CSS3-селекторы – фундаментально полезная вещь.
Даже если вы почему-то (старый IE?) не пользуетесь ими в CSS, есть много фреймворков для их кросс-браузерного использования CSS3 из JavaScript.
Поэтому эти селекторы необходимо знать.
Основные виды селекторов
Основных видов селекторов всего несколько:
- * – любые элементы.
- div – элементы с таким тегом.
- #id – элемент с данным id .
- .class – элементы с таким классом.
- [name=»value»] – селекторы на атрибут (см. далее).
- :visited – «псевдоклассы», остальные разные условия на элемент (см. далее).
Селекторы можно комбинировать, записывая последовательно, без пробела:
- .c1.c2 – элементы одновременно с двумя классами c1 и c2
- a#id.c1.c2:visited – элемент a с данным id , классами c1 и c2 , и псевдоклассом visited
Отношения
В CSS3 предусмотрено четыре вида отношений между элементами.
Самые известные вы наверняка знаете:
- div p – элементы p , являющиеся потомками div .
- div > p – только непосредственные потомки
Есть и два более редких:
p – правые соседи: все p на том же уровне вложенности, которые идут после div .
| Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS |
| 9.0+ | 1.0+ | 9.6+ | 3.1+ | 3.6+ | 2.1+ | 2.0+ |
Краткая информация
| Значение по умолчанию | Нет |
|---|---|
| Применяется | Ко всем элементам |
| Ссылка на спецификацию |
Версии CSS
| CSS 1 | CSS 2 | CSS 2.1 | CSS 3 |
|---|
Описание
Псевдокласс :nth-child используется для добавления стиля к элементам на основе нумерации в дереве элементов.
Синтаксис
Значения
Если a равно нулю, то оно не пишется и запись сокращается до b . Если b равно нулю, то оно также не указывается и выражение записывается в форме an . a и b могут быть отрицательными числами, в этом случае знак плюс меняется на минус, например: 5n-1.
За счет использования отрицательных значений a и b некоторые результаты могут также получиться отрицательными или равными нулю. Однако на элементы оказывают влияние только положительные значения из-за того, что нумерация элементов начинается с 1.
В табл. 1 приведены некоторые возможные выражения и ключевые слова, а также указано, какие номера элементов будут задействованы.
| Значение | Номера элементов | Описание |
|---|---|---|
| 1 | 1 | Первый элемент, является синонимом псевдокласса :first-child . |
| 5 | 5 | Пятый элемент. |
| 2n | 2, 4, 6, 8, 10 | Все четные элементы, аналог значения even . |
| 2n+1 | 1, 3, 5, 7, 9 | Все нечетные элементы, аналог значения odd . |
| 3n+2 | 2, 5, 8, 11, 14 | — |
| -n+3 | 3, 2, 1 | — |
| 5n-2 | 3, 8, 13, 18, 23 | — |
| even | 2, 4, 6, 8, 10 | Все четные элементы. |
| odd | 1, 3, 5, 7, 9 | Все нечетные элементы. |
HTML5 CSS3 IE Cr Op Sa Fx
В данном примере псевдокласс :nth-child используется для изменения стиля первой строки таблицы, а также для выделения цветом всех четных строк (рис. 1).
Рис. 1. Применение псевдокласса :nth-child к строкам таблицы
Представьте себе какой-то элемент на странице, в который вложены несколько других элементов.
Это может выглядеть вот так:
Причем, количество вложенных элементов может постоянно меняться, например, программным способом (скриптами).
Если перед нами будет стоять задача применить определенные стили CSS именно к первому элементу среди списка вложенных элементов, то могут возникнуть определенные трудности.
С появлением CSS3 и модуля «Селекторы» такие обращения к элементу стали возможными.
Для этого используется специальный селектор, псевдокласс first-child. С его помощью выбирается первый, по очередности расположения в коде, дочерний элемент, который располагается в родительском элементе.
Синтаксис здесь простой:
Давайте вернемся к примеру, который был в начале этой заметки. Например, при реализации следующего стиля:
Этой записью мы сообщаем о том, что в родительском элементе #main, необходимо найти элемент «p», который расположен в коде выше всех.
Будет выделен «Элемент 1».
Кроме того, аналогичным образом можно выделить последний элемент в родительском. Прочитайте еще про псевдокласс last-child.