curriculum/challenges/english/blocks/lecture-css-specificity-the-cascade-algorithm-and-inheritance/672b8ea434ceac23cc90f337.md
ID selectors are among the most powerful selectors in CSS, allowing developers to apply styles to specific elements with unique identifiers.
This makes them highly effective for targeting individual elements that need unique styling.
ID selectors are defined by a hash symbol (#) followed by the ID name. They should be unique within an HTML document, meaning no two elements should share the same ID.
Here is an example using an ID selector:
:::interactive_editor
<link rel="stylesheet" href="styles.css">
<p id="unique">Example paragraph</p>
<p>Another paragraph</p>
<p>Yet another paragraph</p>
#unique {
color: purple;
}
:::
In this example, the element with the ID unique will have its text color set to purple.
ID selectors have a very high specificity, higher than type selectors and class selectors, but lower than inline styles. The specificity value for an ID selector is (0, 1, 0, 0).
This means that ID selectors can override class selectors and type selectors but can be overridden by inline styles.
What is the specificity value of an ID selector (e.g., #example)?
(1, 0, 0, 0)
This selector targets elements with a specific, unique identifier.
(0, 1, 0, 0)
(0, 0, 1, 0)
This selector targets elements with a specific, unique identifier.
(0, 0, 0, 1)
This selector targets elements with a specific, unique identifier.
2
Which of the following has a higher specificity than an ID selector?
A class selector.
Review the last part of the lesson for the answer.
An inline style.
An attribute selector.
Review the last part of the lesson for the answer.
A type selector.
Review the last part of the lesson for the answer.
2
Given the following CSS, what will be the color of the text?
<head>
<style>
#unique {
color: purple;
}
.highlight {
color: green;
}
p {
color: blue;
}
</style>
</head>
<body>
<p id="unique" class="highlight">This text</p>
</body>
green
Consider the highest specificity.
blue
Consider the highest specificity.
red
Consider the highest specificity.
purple
4