CSS TutorialLesson 30Free preview

CSS Combinators

This lesson is part of CSS · All levels

Summary

The combinator combines two selectors to select an element based on its relationship to the other element. There are four types: descendant (space), child (>) which is the only direct child, adjacent sibling (+) which is adjacent right, and general sibling (~) which is all siblings afterwards. With a combinator, styles can be more targeted without adding too much class to HTML.

Key points

The descendant selector (A B) selects all Bs in A, regardless of their depth level.
The child selector (A > B) only selects B as the direct child of A.
Adjacent sibling (A+B) chooses the B that is right after A in the same parent.
General sibling (A ~ B) selects all Bs that are after A in the same parent.
Combinator reduces the need to add additional classes in HTML.

Full lesson

Code examples and quizzes

Full lessons, code examples, and quizzes are available to subscribers. 5 questions.