Complete guide to CSS selectors with examples and specificity
Selectors are patterns used to target HTML elements for styling. They're the foundation of CSS - you use them to tell the browser which elements should receive which styles.
Key Point: More specific selectors override less specific ones. This is determined by specificity values.
Selects all elements of a given type.
p { color: blue; }
Specificity: 0,0,1
Example: Targets all paragraph elements
Selects all elements with a specific class attribute.
.highlight { background: yellow; }
Specificity: 0,1,0
Example: Targets all elements with class="highlight"
Selects a single element with a specific ID.
#header { font-size: 2rem; }
Specificity: 1,0,0
Example: Targets the element with id="header"
Selects elements based on attribute values.
[type="text"] { border: 1px solid gray; }
Specificity: 0,1,0
Example: Targets all elements with type="text"