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

element), "div.warning" (which makes any

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
This is happy text.




  Be careful! There are wizards present, and they are quick to anger!





  
This is happy text.


  

    Be careful! There are wizards present, and they are quick to anger!

The resulting page content is styled like this:

See also