Selectors pick the HTML elements you want to style. CSS offers simple type selectors up to complex combinators and pseudo-classes for precise targeting.
Basic Selectors
CSS Selectors
Description
*
The universal selector matches every element in the document.
element
Type (tag) selector targets all elements of a given tag name, e.g. p.
.class
Class selector targets elements with a given class attribute.
#id
ID selector targets the single element with a given id attribute.
Combinators
CSS Selectors
Description
A B
Descendant combinator: matches B that is a descendant of A.
A > B
Child combinator: matches B that is a direct child of A.
A + B
Adjacent sibling: matches B immediately after A under the same parent.
A ~ B
General sibling: matches any B sibling following A.
Attribute Selectors
CSS Selectors
Description
[attr]
Matches elements that have the given attribute.
[attr=value]
Matches elements whose attribute equals the value exactly.
[attr~=value]
Matches elements whose attribute is a space-separated list containing value.
[attr^=value]
Matches elements whose attribute starts with value.
[attr$=value]
Matches elements whose attribute ends with value.
[attr*=value]
Matches elements whose attribute contains value as substring.
Pseudo-classes
CSS Selectors
Description
:hover
Matches an element while the user hovers over it.
:focus
Matches an element that has keyboard focus.
:first-child
Matches the first child element among siblings.
:nth-child(n)
Matches the n-th child element among siblings.
:not(x)
Negation: matches elements that do NOT match selector x.
:checked
Matches radio/checkbox/option in selected state.
Pseudo-elements
CSS Selectors
Description
::before
Inserts generated content before an element's content.
::after
Inserts generated content after an element's content.
::first-line
Matches the first formatted line of a block.
::first-letter
Matches the first letter of a block.
::selection
Matches the portion of a document highlighted by the user.
