ACSS 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:

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 theclass"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>  Be careful! There are wizards present, and they are quick to anger!</div><div>  <p>This is happy text.</p>  <div>    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 selectorselementname
  • Class selectors.classname
  • ID selectors#idname
  • Universal selectors* ns|* *|*
  • Attribute selectors[attr=value]
  • State selectorsa:active, a:visited

• Grouping selectors

  • Selector listA, B

• Combinators

  • Next-sibling selectorsA + B
  • Subsequent-sibling selectorsA ~ B
  • Child selectorsA > B
  • Descendant selectorsA B

• Pseudo

  • Pseudo classes:
  • Pseudo elements::