Combinators

Direct and Indirect Child

Paragraph. Direct child of div element with id "page" (div#page > p)

Paragraph. Indirect child of div element with id "page" (no match)

Paragraph with class "blue". Indirect child of div element with id "page" (div#page p.blue)

Paragraph. Direct child of body element (no match)

Attribute

Exists

Has value

Contains word

(apply)
(doesn't apply)
(doesn't apply)

Has value, or begins with value followd by hyphen

Hello!

Hi!

Hello!

Hi!

Pseudo class

N-th child

Paragraph. First em tag is matched (:first-child), but second and third are not.

Div. First em tag is not matched, second is (div > em:nth-child(2)), and third isn't.

Link state

Institut za matematiku i informatiku
Rust programski jezik

Focus



Pseudo element

Span with pseudo child elements before and after it's content.

Paragraph element with first letter stylized