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