Комбинирование селекторов в CSS

Селектор потомков (пробел)

Отображение в браузере:

Первый ребенок

Второй ребенок

Потомок

Первый брат

Второй брат

Код:

HTML

Селектор потомков (пробел) HTML

CSS

Селектор потомков (пробел) CSS

Селектор детей (>)

Отображение в браузере:

Первый ребенок

Второй ребенок

Потомок

Потомок

Код:

HTML

Селектор детей (>) HTML

CSS

Селектор детей (>) CSS

Селектор первого младшего брата (+)

Отображение в браузере:

Старший брат

Первый ребенок

Второй ребенок

Первый младший брат

Второй младший брат

Код:

HTML

Селектор первого младшего брата (+) HTML

CSS

Селектор первого младшего брата (+) CSS

Селектор всех младших братьев (~)

Отображение в браузере:

Старший брат

Первый ребенок

Второй ребенок

Потомок

Первый младший брат

Второй младший брат

Код:

HTML

Селектор всех младших братьев (~) HTML

CSS

Селектор всех младших братьев (~) CSS