CSS Selector

A CSS selector is the part of the CSS rule that lets you target which element(s) get styled by the rule. For example:

***HTML***
<div> I am inside of a div element. </div>
<p> I am inside of a paragraph element. </p>


***CSS***
div {
 color: green;
}

p {
 color: red;
}

In the first CSS rule, I am selecting the div element and styling it by coloring the text green. In the second CSS rule, I am selecting the p element and styling it by coloring the text red. Here are what these results look like:

Learn more

General knowledge

• Basic selectors
  • Type selectors elementname
  • Class selectors .classname
  • ID selectors #idname
  • Universal selectors * ns|* *|*
  • Attribute selectors [attr=value]
  • State selectors a:active, a:visited
• Combinators
  • Adjacent sibling selectors A + B
  • General sibling selectors A ~ B
  • Child selectors A > B
  • Descendant selectors A B
• Pseudo-elements
• Pseudo-classes

Technical reference

Selectors Level 3