Selector (CSS)
A CSS selector is the part of a CSS rule that describes what elements in a document the rule will match. The matching elements will have the rule's specified style applied to them.
Example
Consider this CSS:
css
p {
color: green;
}
div.warning {
width: 100%;
border: 2px solid yellow;
color: white;
background-color: darkred;
padding: 0.8em 0.8em 0.6em;
}
#customized {
font: 16px Lucida Grande, Arial, Helvetica, sans-serif;
}
The selectors here are "p"
(which applies the color green to the text inside any <p>
element), "div.warning"
(which makes any <div>
element with the class "warning"
look like a warning box), and "#customized"
, which sets the base font of the element with the ID "customized"
to 16-pixel tall Lucida Grande or one of a few fallback fonts.
We can then apply this CSS to some HTML, such as:
html
<p>This is happy text.</p>
<div class="warning">
Be careful! There are wizards present, and they are quick to anger!
</div>
<div id="customized">
<p>This is happy text.</p>
<div class="warning">
Be careful! There are wizards present, and they are quick to anger!
</div>
</div>
The resulting page content is styled like this:
See also
- Learn more about CSS selectors in our introduction to CSS.
- Basic selectors
- Type selectors
elementname
- Class selectors
.classname
- ID selectors
#idname
- Universal selectors
* ns|* *|*
- Attribute selectors
[attr=value]
- State selectors
a:active, a:visited
- Type selectors
- Grouping selectors
- Selector list
A, B
- Selector list
- Combinators
- Adjacent sibling selectors
A + B
- General sibling selectors
A ~ B
- Child selectors
A > B
- Descendant selectors
A B
- Adjacent sibling selectors
- Pseudo