The CSS selectors may combine in many different ways in a formation of declarations. The rules for forming a CSS selector are given in the table below.

Have in mind that in practice those rules may interchange and work with one another in almost any combination imaginable.

Simple selectors
SELECTOR DESCRIPTION EXAMPLES
'*' selects all elements *
'element' selects given element div
'element', 'element' selects all given elements separated by comma div, p, h1
... all other combinations ... ...

Descendant selectors
SELECTOR DESCRIPTION EXAMPLES
'element (1)' 'element (2)' selects all given descendant elements (2) inside given ancestor element (1) div p
'element (1)' > 'element (2)' selects all given children elements (2) of given parent element (1) div > p
'element (1)' > 'element (2)' 'element (3)' selects all given descendant elements (3) inside given ancestor element (2) from given parent element (1) div > p *
'element (1)' 'element (2)' > 'element (3)' selects all given children elements (3) of parent element (2) inside given ancestor element (1) div p > span
... all other combinations ... ...

Sibling selectors
SELECTOR DESCRIPTION EXAMPLES
'element (1)' + 'element (2)' selects all next sibling elements (2) that appear after previous sibling element s (1) p + p
'element (1)' + 'element (2)' + 'element (3)' selects all next sibling elements (3) that appear after previous sibling elements (2) that appears after another previous sibling elements (1) ul + li + a
... all other combinations ... ...

Attribute selectors
SELECTOR DESCRIPTION EXAMPLES
'[attribute]' selects all elements with given attribute [title]
'[attribute=value]' selects all elements with given attribute that has assigned given value [target=_blank]
'[attribute~= chars]' selects all elements with given attribute whose given value contains letters "chars" in it [rel=link]
'[attribute|=suff]' selects all elements with given attribute whose given value starts with letters "suff" in it [lang|=fr]
'element[attribute]' selects all given elements with given attribute img[alt]
... all combinations may be with or without elements ... ...

Attributes "id" and "class" selectors
SELECTOR DESCRIPTION EXAMPLES
'#id' selects all elements with id attribute set to "id" #homepage
'.class' selects all elements with class attribute set to "class" .highlight
'#id .class' selects all elements with class attribute set to "class" inside given ancestor with the id attribute set to "id" #main .main_sub
... all other combinations ... ...

Pseudo- elements
SELECTOR DESCRIPTION EXAMPLES
'element:first-letter' selects the first letter of every given element p:first-letter
'element:first-line' selects the first line of every given element p:first-letter
'element:before' insert content before the content of every given element ul li:before
'element:after' insert content after every given element a:after
... all other combinations ... ...

Pseudo-classes
SELECTOR DESCRIPTION EXAMPLES
'element:first-child' selects every given element that is the first child of its parent p:first-child
'element:link (a)' selects all unvisited links of a hyperlink (a) a:link
'element:visited (a)' selects all visited links of a hyperlink (a) a:visited
'element:active' selects the active element (i.e. during mouse press down process) a:active
'element:hover' selects element while hovered across by a pointing devices (i.e. a mouse) a:hover
'element:focus (input)' selects element being focused on by user agent (input) input:focus
'element:lang(l)' selects every given element with a lang attribute value starting with "l" div:lang(en)
... all other combinations ... ...

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

Note that the pseudo-classes :active and :hover are not strictly tied to a hyperlink (<a>) element. Whether browser will respect that function or not respect, that's another story but most of them do, especially last generations.

Also note that the pseudo-class :focus is not strictly related to the form elements, but it makes most sense to use it with them.