CSS3 Selectors

Selecting elements with CSS selectors

Basic Selectors

* # universal selector (all elements)
element # type selector (e.g., div, p)
.class # class selector
#id # ID selector

Combinators

A B # descendant (B inside A)
A > B # direct child (B is child of A)
A + B # adjacent sibling (B immediately after A)
A ~ B # general sibling (B after A)

Attribute Selectors

[attr] # has attribute
[attr=value] # exact match
[attr^=value] # starts with
[attr$=value] # ends with
[attr*=value] # contains

Pseudo-classes

:hover # mouse over
:active # being activated
:focus # has focus
:first-child # first child
:last-child # last child
:nth-child(n) # nth child

Pseudo-elements

::before # insert before content
::after # insert after content
::first-line # first line of text
::first-letter # first letter