A CSS ID selector is a precise label picker: it uses an element’s id value to choose that element for styling. Write a hash symbol (#) followed by the ID value, then add declarations inside braces. The browser applies those declarations to elements using that ID value. section 19.2 section 19.30
Style a labeled page section
Give a div an ID in HTML, then use the same word after # in CSS: <div id="section-quote">A memorable quote</div> <style> #section-quote { color: purple; font-size: 20px; } </style> Here, #section-quote selects the div whose id is section-quote. The color and font-size declarations affect that selected element. section 19.2 section 1.17
#id-value {
property1: value1;
property2: value2;
...
}
Use this small pattern as a reminder: the # belongs before the ID value, while the declarations stay inside the braces. section 19.2
Keep these handy when choosing an ID selector:
- ID values are case-sensitive. Start an ID value with a letter; later characters can include letters, numbers, hyphens, and underscores. section 19.2
- Use an ID selector when styling belongs to one and only one element. Use a class selector when several elements share the styling, or might share it later. section 19.5
- Treat ID selectors carefully: their high specificity can make CSS harder to maintain and troubleshoot. section 19.28 section 19.5
- Selectors can be combined with other selectors when a rule needs a narrower target. section 19.17
Think of a selector as the address on a style rule: it tells the browser which page object receives the declarations. Type selectors choose tag types, class selectors choose shared class names, and ID selectors choose an ID value. When rules compete, IDs carry more specificity than classes or element names. section 19.1 section 19.28
Quick play prompt
Make two div elements with different IDs, such as section-quote and section-summary. Add one # selector for each, then give each div a different text color. Next, ask whether either style might be reused; if yes, try a class selector instead. section 19.2 section 19.5
