Структурные псевдоклассы

Структурные псевдоклассы позволяют выбрать элементы, основываясь на их положении в дереве документа и отношении к другим элементам. К примеру, :first-child выбирает первый элемент в группе братских элементов, т. е., имеющих одного родителя.

Структурные псевдоклассы применяются для создания колонок, стилизации таблиц, оформления различных меню и др. К примеру, вот как сделать «зебру» в таблице, так называется чередование светлых и тёмных строк.

tr:nth-child(even) { background: gray;  }
tr:nth-child(odd)  { background: white; }

Здесь чётные строки выделяются серым цветом, а нечётные белым.

Влад Мержевич

Веб-разработчик, автор нескольких книг, посвящённых созданию сайтов, HTML и CSS. Кандидат технических наук.