Dynamic Pseudo-Classes

The examples below seem slightly confusing. This is because an element’s style is influenced by dynamic pseudo-classes attached to adjacent elements. View the source of this document to fully understand these selectors.


#test1:hover > p { background: yellow; }

Here is a paragraph.

And another.


#test2 p:hover + p { background: yellow; }

Paragraph 1.

Paragraph 2.

Paragraph 3.


#test3 input:focus + input { background: yellow; }

#test4 p:hover ~ p { background: yellow; }

Paragraph 1.

Paragraph 2.

Paragraph 3.

Paragraph 5.

Paragraph 5.

Paragraph 6.

back