Web · Selectors and classes
IDs
The full text of this chapter, to read or revisit. To practise, do the exercises.
▶ Do the exercisesExercise 1 — Introduction to ID Selectors
ID selectors are another powerful way to target HTML elements in CSS. While classes allow you to apply the same styles to multiple elements, IDs are designed to identify a unique element on a page.
In CSS, ID selectors start with a hash/pound sign (#) followed by the ID name:
#main-header {
color: blue;
font-size: 24px;
}
To use an ID in HTML, you add the id attribute to an element:
<h1 id="main-header">This is the main heading</h1>
The most important rule about IDs: Each ID must be unique on the page. Unlike classes, which can be reused on multiple elements, an ID should only be used once per HTML document.
Important Distinction
While browsers might not show errors if you use the same ID multiple times, it's considered incorrect and can cause problems with JavaScript and accessibility tools. Always keep IDs unique!
Exercise 2 — ID Selectors in Action
Let's see how ID selectors work in a real example. In this example, we'll create a simple page with unique elements identified by IDs.
<!DOCTYPE html>
<html>
<head>
<style>
/* Regular element selector (affects all paragraphs) */
p {
color: black;
}
/* Class selector (affects elements with this class) */
.info {
font-style: italic;
}
/* ID selector for the main title */
#main-title {
color: blue;
text-align: center;
text-decoration: underline;
}
/* ID selector for a special paragraph */
#important-info {
color: red;
font-weight: bold;
border: 2px solid red;
padding: 10px;
}
</style>
</head>
<body>
<h1 id="main-title">Codémon Database</h1>
<p>Welcome to the Codémon information system.</p>
<p class="info">Browse through our collection of Codémon data.</p>
<p id="important-info">Warning: Some rare Codémons might not be in our database yet!</p>
</body>
</html>
In this example:
- The
#main-title
selector targets a specific h1 element, making it blue, centered, and underlined.
- The
#important-info
selector targets a specific paragraph, making it red, bold, and adding a border.
Notice how these styles only apply to the elements with the matching IDs, not to all elements of the same type.
ID vs Class
While both target specific elements, IDs are for unique, one-of-a-kind elements (like a main header or specific section), while classes are for groups of similar elements that share styling (like all warning messages or all navigation links).
Exercise 3 — Correct ID Selector Syntax
Which of the following is the correct CSS syntax for an ID selector that targets an element with id="header"?
Options
• ```#header { color: blue; }```
• ```.header { color: blue; }```
• ```header { color: blue; }```
• ```*header { color: blue; }```
Hint : Remember which symbol is used to start ID selectors in CSS, and how it differs from class selectors.
Exercise 4 — Complete the HTML and CSS for IDs
Complete the HTML and CSS code to create a heading with the ID "page-title" and style it to be red and centered.
<!DOCTYPE html>
<html>
<head>
<style>
____page-title {
color: red;
text-align: center;
}
</style>
</head>
<body>
<h1 ____="page-title">Welcome to Codémon World</h1>
</body>
</html>
Options: # . id class name *
Hint : Think about the correct symbol to use for ID selectors in CSS and the correct attribute to use in HTML.
Exercise 5 — Specificity of ID Selectors
One of the most important aspects of ID selectors is their high specificity. In CSS, specificity determines which styles are applied when multiple rules target the same element.
Specificity hierarchy (from lowest to highest):
1. Element selectors (
p
,
h1
,
div
)
2. Class selectors (
.class-name
)
3. ID selectors (
#id-name
)
<!DOCTYPE html>
<html>
<head>
<style>
/* Least specific - element selector */
p {
color: black;
background-color: lightgray;
padding: 10px;
}
/* More specific - class selector */
.special-paragraph {
color: blue;
border: 1px solid blue;
}
/* Most specific - ID selector */
#unique-paragraph {
color: red;
font-weight: bold;
}
</style>
</head>
<body>
<p>This is a regular paragraph.</p>
<p class="special-paragraph">This is a paragraph with a class.</p>
<p id="unique-paragraph" class="special-paragraph">This paragraph has both an ID and a class!</p>
</body>
</html>
Notice in this example:
- The first paragraph uses only the element selector styles
- The second paragraph uses the class styles, which override the conflicting element styles (color)
- The third paragraph uses the ID styles, which override both the element and class styles (color)
This is why ID selectors are powerful - they take precedence over other types of selectors when there are conflicts.
Use With Caution
The high specificity of ID selectors can make your CSS harder to maintain if overused. It can become difficult to override styles later.
Exercise 6 — Match Selectors with Their Characteristics
Match each selector type with its correct characteristic or use case:
Items to match
• Element Selector (p, h1)
• Class Selector (.className)
• ID Selector (#idName)
• Highest specificity
Definitions
• Targets all elements of a specific type
• Can be reused on multiple elements
• Should be unique to one element per page
• #idName { }
Exercise 7 — When to Use ID Selectors
Which of the following scenarios is the MOST appropriate use case for an ID selector?
Options
• Styling the main navigation menu that appears only once on the page
• Styling all buttons to have rounded corners
• Highlighting every third paragraph in an article
• Styling all error messages to be red
Hint : Think about the uniqueness requirement for IDs and which scenario involves a truly one-of-a-kind element on the page.
Exercise 8 — Complete the CSS with Selectors
Complete the CSS code to select elements using the appropriate selectors. Use an ID selector for the banner, a class selector for all notes, and an element selector for all paragraphs.
/* Style the main banner (unique) */
____banner {
background-color: blue;
color: white;
}
/* Style all note elements */
____note {
font-style: italic;
background-color: lightyellow;
}
/* Style all paragraphs */
____ {
line-height: 1.5;
margin-bottom: 15px;
}
Options: # . p div * @
Hint : Remember the correct prefixes for different types of selectors and when each should be used.
Exercise 9 — Best Practices for ID Selectors
ID selectors are for unique elements. Here are some quick rules to follow:
- Use them rarely: Only for things like
#header
,
#main
, or
#footer
.
- Only once: An ID must appear just once per page.
- Clear names: Use names that describe the role, not the style.
- Prefer classes for styling: They’re easier to reuse.