Selector (CSS)

Example

Consider this 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:

<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

• Grouping selectors

  • Selector list A, B

• Combinators

  • Next-sibling selectors A + B
  • Subsequent-sibling selectors A ~ B
  • Child selectors A > B
  • Descendant selectors A B

• Pseudo

  • Pseudo classes :
  • Pseudo elements ::