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