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", "Helvetica", "Arial", 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
- Next-sibling selectors
A + B - Subsequent-sibling selectors
A ~ B - Child selectors
A > B - Descendant selectors
A B
- Next-sibling selectors
-
Pseudo