Пять полезных CSS селекторов

Помимо обычных селекторов тегов, потомков, классов и id селекторов, CSS располагает псевдо-классами, селекторы которых позволяют оформить HTML теги на основе их позиции в документе. В этой статье рассмотрим 5 полезных CSS селекторов, стоящих внимания при оформлении веб-страниц и приложений.

:first-child и :last-child

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

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

li:first-child {
border: 1px solid red;
font-weight: bold;
}   

Аналогично, :last-child, выберет последний элемент.

li:last-child {
border: 1px solid green;
}   

:nth-child

:nth-child, особо полезный структурный псевдо-класс, он позволяет выбирать элементы на основании их позиций в рамках родительского элемента.

Синтаксис :nth-child, довольно прост, в круглых скобках заявляется какие элементы выбрать.

Одним из аргументов являются even или odd, выбирающие только четные или нечетные элементы. Следующее правило, выберет только четные элементы списка.

li:nth-child(even) {
color: white;
background-color: black;
}

В следующем случае можно использовать целое число.

li:nth-child(3) {
background-color: tomato;
}    

Что делает этот псевдо-класс реально мощным, так это пользовательская комбинация, для "особого" выбора элементов. Базовый синтаксис таков:

:nth-child(an+b)   

Значения a и b всегда представляются числом, в значение n не меняется (остается литералом). Значение b, это значение отступа, который определяет, какой элемент выбрать первым. Значение a, определяет цикл выбираемых элементов, после выбора первого элемента. Значение n, неизменно, это эдакий литерал, по сути с каждым "оборотом цикла" увеличивающийся на 1, начиная с 0. итак:

li:nth-child(2n+3)

Что происходит, 3 элемент списка будет выбран первый (значение b), а затем до конца списка выбирается каждый второй (a).

Выражение, приведенное ниже, будет выбирать только первые 5 элементов списка, что достигается отрицательным значением n (если его сделать положительным, то наоборот первые 5 будут пропускаться и выбираться все остальные).

li:nth-child(-n+5)   

Иногда полезно использовать вариацию псевдо-класса, где b, считается не от начала а от конца ( работает она аналогично-инвертировано ), например выражение ниже, начнет выбирать с конца списка, отсчитав 10 элементов, и выделит каждый второй элемент вплоть до начала списка:

li:nth-last-child(2n+10) {  
background: yellow;
color: red;
}   

:nth-of-type

Аналогично :nth-child, выбирает элементы так же по выражению (an+b). Отличие его в том, что оно не зависит от позиции элемента в теле документа. Сейчас объясню более понятно: например

<div>1 div</div>
<span>2 span</span>
<div>3 div</div>
<span>4 span</span>
<div>5 div</div>
<span>6 span</span>
<div>7 div</div>
<span>8 span</span>
<div>9 div</div>
<div>10 div</div>    

Если использовать div:nth-child(2n), то мы выделим блок только с номером 10, а если div:nth-of-type(2n), то будет выбираться каждый второй блок, независимо есть ли между ними span или нет. Грубо говоря :nth-child оперирует с элементами которые идут друг за другом, а :nth-of-type игнорирует все преграды и выбирает подряд. Какой псевдо-класс использовать, дело вкуса, но я склоняюсь к nth-of-type.

И соответственно "обратный" псевдо-класс :nth-last-of-type

:target

Весьма интересный псевдо-класс, который основывается на URL текущей страницы и выбирает элемент по соответствующему id. Например:

<a href="#intro">Введение</a> <a href="#conclusion">Заключение</a>
...
<div id="intro">Введение</div>
<div id="conclusion">Заключение</div>   

:target {
border: 5px solid blue;
}   

При нажатии на ссылку "введение", синим цветом будет выделяться блок с id="intro". По сути выделяется тот элемент, чей id = URL после решетки ( #intro ).

::before и ::after псевдо-элементы

Псевдо-элементы, дают доступ к "виртуальным" элементам документа, которые не указаны в HTML-коде. С помощью псевдо-элементов ::before и ::after, можно вставить "виртуальный" контент, который виден только пользователю браузера, до выбираемого элемента и после.

::before

Как называется, так и работает. Этот псевдо-элемент вставит контент вперед выбираемого элемента. Дабы это имело смысл, всегда используется свойство css content, - иначе смысл? В любом случае, это свойство должно, хотя бы, быть просто пустыми ковычками ( чтобы корректно работать ).

.pdf::before {
content: url(img/pdf.png);
margin-right: 10px;
}    

Тут к примеру вставляется картинка ко всем элементам с классом .pdf, и к ней же применяются свойства css.

::after

Псевдо-элемент ::after, аналогично предыдущему вставит контент после выбираемого элемента.

 

Поддержка браузерами

Рассмотренные селекторы, отлично поддерживаются большинством браузером. Если не брать в счет ie8 <, хотя даже этот уебок ie8 поддерживает ::before и ::after, удивительно!) С другой стороны, для нашего друга всегда есть JQuery, где можно недостающие селекторы оформить в js-коде.