Css каждый второй: Как выбрать каждый первый, второй и так далее элементы списка или таблицы или блока? — Вебджем.рф

Содержание

Как выбрать второй элемент с определенным классом?

Позвольте мне начать с того, что я осознаю nth-child и, насколько я могу судить, это не сработает в моей ситуации. Скажем, у меня есть HTML ниже:

<div>
    <div>test1</div>
</div>
<div>
    <div>test2</div>
</div>
<div>
    <div>test3</div>
</div>

И я хочу выделить div, который содержит test2 . Из того, что я понимаю, использование .myclass:nth-child(2) не будет работать, потому что он ищет второй дочерний экземпляр myclass , и все экземпляры, которые у меня есть, являются первыми дочерними. Вы можете видеть, что это не работает здесь .

Итак, мой вопрос заключается в том, как я могу выбрать второй экземпляр myclass из приведенного выше примера, используя только CSS3? Я не могу использовать javascript/jquery.

html css
Поделиться Источник Abe Miessler 14 июня 2013 в 02:08
3 ответа

3

Это должно сделать это:
div:nth-of-type(2) .myclass { background:pink !important; }
или
div:nth-child(3) .myclass { background:pink !important; }
Поделиться imjared 14 июня 2013 в 02:16

0

div:nth-of-type(2) > .myclass{ background-color:red; }
Чуть-чуть крепче.
Поделиться meobyte 14 июня 2013 в 02:28

0

Чтобы следовать ответу имджареда, вы, возможно, захотите изменить то, как вы думаете о DOM.
.. из вашего первоначального вопроса кажется, что вы пытаетесь заставить второй экземпляр .myclass измениться, но CSS не может действительно выглядеть глобально для всех экземпляров до и после.
Вместо этого я бы подумал об этом так:
<some containing Element, like body> div:nth-of-type(2) .myclass { color: red; }
То, что вы действительно пытаетесь выбрать, — это элемент .myclass во втором разделе некоторого содержащего элемента. Код в вашем вопросе работает только в том случае, если элементы .myclass являются прямыми братьями и сестрами, а это не так.
Поделиться Hylianpuffball 14 июня 2013 в 02:28
Выбрать элемент с определенным стилем?
Можно ли выбрать элемент с определенным стилем с помощью CSS? Нравится… все img, которые имеют style=position:fixed; Я имею в виду выбор элементов в зависимости от их стиля, а не класса или идентификатора.

Как выбрать все поля в форме с определенным классом
Я пытаюсь выбрать все поля в форме с определенным именем вызова, а затем выбрать все rest. моя форма: <form style=margin:20px 0 id=myform_2> <p> Query Name : <input id=full_text_search name=name type=text class=serialize_1> </p> <p> Platform : <select…
Похожие вопросы:

Выберите первый и последний элемент с определенным классом, используя jQuery
У меня есть список пролетов с определенным классом place, а некоторые из них имеют класс activated. Есть ли способ выбрать первый элемент с классом activated и последний? <span class=place…

CSS/Xpath селектор для элемента с определенным классом, содержащего элемент с определенным текстом
В Scrapy shell для http://www.apkmirror.com/apk/ airbnb-inc/airbnb/ , я пытаюсь извлечь ссылки, соответствующие различным выпускам приложения AirBnB: Как видно с помощью Chrome Inspect, структура.
..

Яш выбрать ребенка с определенным классом
Я пишу сценарий GreaseMonkey, который проходит через страницу с различными элементами, и каждый элемент имеет текст и кнопку. Он использует document.getElementsByClassName , чтобы найти родительские…

CSS-выбрать все элементы, происходящие от элемента с определенным классом?
Как выбрать все элементы, которые происходят от элемента с определенным классом? Для example…I нужны все ячейки таблицы ( td ), которые являются потомками ONLY из таблицы, имеющей определенный…

jquery (или css) каждый второй элемент с классом
Кажется, что невозможно получить каждый второй элемент с определенным именем класса ни в jquery, ни в css. В частности, я пытаюсь использовать селектор n-го ребенка в обоих случаях примерно так: $(…

Выбрать элемент с определенным стилем?
Можно ли выбрать элемент с определенным стилем с помощью CSS? Нравится… все img, которые имеют style=position:fixed; Я имею в виду выбор элементов в зависимости от их стиля, а не класса или…

Как выбрать все поля в форме с определенным классом
Я пытаюсь выбрать все поля в форме с определенным именем вызова, а затем выбрать все rest. моя форма: <form style=margin:20px 0 id=myform_2> <p> Query Name : <input…

Как добавить div с классом каждый второй элемент
Пожалуйста, помогите.. Как добавить div с классом каждый второй элемент. У меня есть пункт списка: <div class=col-sm-3> <div class=product rotation> <div>data 1</div>…

Как правильно выбрать элемент с определенным классом a с помощью jQuery
Я пытаюсь использовать jQuery для выбора элемента div, но ни за что на свете не могу понять, как заставить его работать. Я пытаюсь настроить его так, чтобы, когда пользователь нажимает на элемент…

Как я могу выбрать второй элемент из группы divs с тем же классом?
У меня есть 4 дива с одним и тем же классом, и я хочу выбрать с javaScript только второй <div></div> <div></div> <div. ..
child() | HTML и CSS с примерами кода
Псевдокласс :nth-child используется для добавления стиля к элементам на основе нумерации в дереве элементов.
Псевдоклассы
Синтаксис
/* Выбирает каждый четвёртый элемент среди любой группы соседних элементов */ :nth-child(4n) { color: lime; }
Значения
odd
Все нечётные номера элементов.

even
Все чётные номера элементов.
<число>
Порядковый номер дочернего элемента относительно своего родителя. Нумерация начинается с 1, это будет первый элемент в списке.
<выражение>
Задаётся в виде an±b, где a и b — целые числа, а n — счётчик, который автоматически принимает значение 0, 1, 2…
Если a равно нулю, то оно не пишется и запись сокращается до b. Если b равно нулю, то оно также не указывается и выражение записывается в форме an. a и b могут быть отрицательными числами, в этом случае знак плюс меняется на минус, например: 5n-1.
За счёт использования отрицательных значений a и b некоторые результаты могут также получиться отрицательными или равными нулю. Однако на элементы оказывают влияние только положительные значения из-за того, что нумерация элементов начинается с
1.
Результат для различных значений псевдокласса

Значение Номера элементов Описание
1 1 Первый элемент, является синонимом псевдокласса :first-child
5 5 Пятый элемент
2n 2, 4, 6, 8, 10,… Все чётные элементы, аналог значения even
2n+1 1, 3, 5, 7, 9,… Все нечётные элементы, аналог значения odd
3n 3, 6, 9, 12, 15,… Каждый третий элемент
3n+2 2, 5, 8, 11, 14,… Каждый третий элемент, начиная со второго
n+4 4, 5, 6, 7, 8,… Все элементы, кроме первых трёх
-n+3 3, 2, 1 Первые три элемента
5n-2 3, 8, 13, 18, 23,… —
even 2, 4, 6, 8, 10,… Все чётные элементы
odd 1, 3, 5, 7, 9,… Все нечётные элементы
Допустимо комбинировать два псевдокласса :nth-child для выбора диапазона элементов. Здесь будут выбраны все элементы со второго по пятый.
:nth-child(n + 2):nth-child(-n + 5) { /* … */ }
Спецификации
Примеры
Пример 1
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>nth-child</title> <style> table { width: 100%; /* Ширина таблицы */ border-spacing: 0; /* Расстояние между ячейками */ } tr:nth-child(2n) { background: #f0f0f0; /* Цвет фона */ } tr:nth-child(1) { background: #666; /* Цвет фона */ color: #fff; /* Цвет текста */ } </style> </head> <body> <table border="1"> <tr> <td> </td> <td>2134</td> <td>2135</td> <td>2136</td> <td>2137</td> <td>2138</td> </tr> <tr> <td>Нефть</td> <td>16</td> <td>34</td> <td>62</td> <td>74</td> <td>57</td> </tr> <tr> <td>Золото</td> <td>4</td> <td>69</td> <td>72</td> <td>56</td> <td>47</td> </tr> <tr> <td>Дерево</td> <td>7</td> <td>73</td> <td>79</td> <td>34</td> <td>86</td> </tr> <tr> <td>Камни</td> <td>23</td> <td>34</td> <td>88</td> <td>53</td> <td>103</td> </tr> </table> </body> </html>

В данном примере псевдокласс :nth-child используется для изменения стиля первой строки таблицы, а также для выделения цветом всех чётных строк (рис. 1).
Пример 2
HTML
<h4> <code>span:nth-child(2n+1)</code>, БЕЗ элемента <code><em></code> в группе элементов-потомков. </h4> <p>Элементы 1, 3, 5 и 7 будут выбраны.</p> <div> <span>Span 1!</span> <span>Span 2</span> <span>Span 3!</span> <span>Span 4</span> <span>Span 5!</span> <span>Span 6</span> <span>Span 7!</span> </div> <br /> <h4> <code>span:nth-child(2n+1)</code>, С элементом <code><em></code> в группе элементов-потомков. </h4> <p> Элементы 1, 5 и 7 будут выбраны.<br /> 3 используется в подсчёте потому что это элемент-потомок, но он не выбран потому что он не <code><span></code>. </p> <div> <span>Span!</span> <span>Span</span> <em>Это `em`.</em> <span>Span</span> <span>Span!</span> <span>Span</span> <span>Span!</span> <span>Span</span> </div> <br /> <h4> <code>span:nth-of-type(2n+1)</code>, С элементом <code><em></code> в группе элементов-потомков. </h4> <p> Элементы 1, 4, 6 и 8 будут выбраны.<br /> 3 не используется в подсчёте и не выбран, потому что это <code><em></code>, но не <code><span></code>, а <code>nth-of-type</code> выбирает только потомков этого типа. Элемент <code><em></code> полностью пропускается и игнорируется. </p> <div> <span>Span!</span> <span>Span</span> <em>Это `em`.</em> <span>Span!</span> <span>Span</span> <span>Span!</span> <span>Span</span> <span>Span!</span> </div>
CSS
html { font-family: sans-serif; } span, div em { padding: 5px; border: 1px solid green; display: inline-block; margin-bottom: 3px; } . first span:nth-child(2n + 1), .second span:nth-child(2n + 1), .third span:nth-of-type(2n + 1) { background-color: lime; }
Результат
См. также
Ссылки
Плиточная раскладка на CSS Flexbox с помощью order и :nth-child() | by Stas Bagretsov
Эта статья показывает то, как сделать плиточную раскладку на CSS Flexbox, имея под рукой только стандартные возможности CSS и ничего более. Она хороша тем, что показывает подводные камни работы с флексами и даёт понять суть их работы с другого ракурса.
Перевод статьи CSS masonry with flexbox, :nth-child(), and order
👉Мой Твиттер — там много из мира фронтенда, да и вообще поговорим🖖. Подписывайтесь, будет интересно: ) ✈️
С первого взгляда это кажется довольно простым, взять и создать плиточную раскладку на флексах. Всё, что нужно, это всего лишь выставить flex-flow на column wrap и вуаля, у вас то что нужно. Ну типа того. Проблема с таким подходом в том, что он создает сетку с на вид перетасованным и неясным порядком. Элементы будут отрендерены сверху вниз и люди, смотрящие на сетку слева направо будут читать боксы в примерно таком, довольно произвольном виде, к примеру 1, 3, 6, 2, 4, 7, 8, 5 и так далее и т.п.
У флексов нет простого способа отрендерить элементы в виде колоночной раскладки, используя строчную расстановку элементов, но мы всё же можем сделать плиточную раскладку только на CSS — без JavaScript — используя свойства :nth-child() и order. По сути, это трюк с созданием строчной расстановки элементов, используя flex-direction: column, учитывая то, что мы рендерим 3 колонки:
/* Рендерим элементы как колонки */
.container {
display: flex;
flex-flow: column wrap;
}
/* Меняем порядок элементов, делая как бы строчную расстановку */
. item:nth-child(3n+1) { order: 1; }
.item:nth-child(3n+2) { order: 2; }
.item:nth-child(3n) { order: 3; }
/* Новые колонки разделители */
.container::before,
.container::after {
content: "";
flex-basis: 100%;
width: 0;
order: 2;
}
Это создаст плиточную раскладку с элементами, отрендереными как колонки, но расставленными в порядке, как было бы в строчном порядке. Серые вертикальные линии это псевдоэлементы, которые делают переносы строк.
Давайте разберем проблему (ну или перейдите к её решению в конце статьи или к codepen).
Flexbox по факту не создан для построения плиточных раскладок — если вы выставите фиксированную высотку на флекс-контейнере и flex-flow на column wrap, то у вас получится что-то типа такого:
Тут элементы отрендерены по колонкам сверху вниз, создавая произвольный порядок во время чтения слева направо. Конечно же, это ожидаемый итог и желаемый во многих случаях, но не тогда, когда мы пытаемся создать именно плиточную раскладку. Вы только представьте насколько это дезориентирует читателя, когда страница станет больше в высоту.
Если же мы сменим flex-direction на row, имея элементы с различными высотами, то мы получим правильный порядок, но уже со стрёмными и неожиданными разрывами по все нашей сетке:
Так, что, кажется невозможным воспользоваться преимуществами обоих подходов: получить элементы отрендеренные как колонки, но имеющие строчный порядок. Вы могли прибегнуть к flex-direction: column и просто переставить элементы в HTML, достигнув правильного визуального порядка, но это может быть очень громоздко, к тому же это излишне сложно и создаст неразбериху в логическом порядке при переходах по клавише табуляции (Просто кликая по табу).
Свойство order влияет на порядок элементов в CSS Flexbox или гриде, и мы можем смело использовать его для смены порядка элементов в нашей плиточной раскладке, которая вот вот уже будет сделана как мы хотим. Свойство order довольно простое в использовании: если у вас два элемента и у одного стоит order: 1, а у другого order: 2, то элемент с order: 1 будет орендерен перед другим элементом, вне зависимости от их порядка в HTML исходнике.
В нашем случае, решение зависит от тонкостей спецификации order: что случится, если два или более элементов будут с одинаковым order? Какой из них будет первым? В этом случае, flexbox опирается на исходный код: тот элемент, который идет первым в исходном HTML коде, будет отрендерен перед другим элементом с таким же значением order. Это даёт нам возможность легко перегруппировать элементы в сетке таким образом, что мы сможем сменить порядок расстановки элементов с колоночного на строчный, всё ещё рендеря эти строки, как колонки, используя nth-child().
Посмотрите на табличку ниже. Чтобы получить рациональный порядок с использованием flex-direction: row, нам просто надо отрендерить элементы в стандартном порядке: 1, 2, 3, 4, 5, 6, и т.д.
Но если нам надо получить тот же порядок с использованием flex-direction: column, то тогда уже нам понадобится поменять сам порядок элементов, таким образом, чтобы он соответствовал порядку каждой колонки в таблице (а не каждой строки):
То есть первыми элементами в нашей флексбокс раскладке должны 1, 4, 7, 10. Эти элементы заполнят первую колонку, далее 2, 5, 8, 11 для второй колонки и 3, 6, 9, 12 для третьей и последней колонки. Тут нам на помощь приходит селектор nth-child(). Мы можем его использовать для того, чтобы выделить каждый третий элемент (3n), начиная с первого элемента (3n + 1) и выставить всем этим элементам одинаковое значение order:
. item:nth-child(3n+1) { order: 1; }
Этот селектор выставит order: 1 для элементов 1, 4, 7, 10, то есть всем первым колонкам. Другими словами, мы используем комбинацию nth-child() и order, чтобы изменить порядок элементов на их изначальном положении. Чтобы создать 2 и 3 колонки, мы изменим порядок у других элементов:
.item:nth-child(3n+1) { order: 1; }
.item:nth-child(3n+2) { order: 2; }
.item:nth-child(3n) { order: 3; }
Тут мы делаем три группы элементов: 1, 4, 7, 10 (3n+1) c order: 1, далее 2, 5, 8, 11 (3n+2) с order: 2 и 3, 6, 9, 12 (3). Всё вместе выдаёт нам такой порядок элементов 1, 4, 7, 10, 2, 5, 8, 11, 3, 6, 9, 12.
Такой подход создаст иллюзию того, что элементы вернулись к своему изначальному порядку, как если бы вы рассматривали их в порядке слева направо. Если бы мы визуально оценивали эту сетку по строкам, то первая строка включала бы по первому элементу с каждой группы (1, 2, 3), вторая строка содержала бы каждый второй элемент из каждой группы (4, 5, 6) и так далее и т.п. Используя эту технику мы можем создать плиточную раскладку с элементами, отрендеренными как колонки, но имеющими порядок как было бы в строчном варианте.
А как это влияет на переходы с использованием табов? Да никак. Свойство order меняет только визуальное представление объектов, а не порядок переходов по клавише TAB, так что в этом плане всё будет работать, как и предполагается.
Если у вас довольно много элементов в раскладке, то этот подход 100% приведёт к тому, что что-то пойдет не так. Мы делаем расчёт на то, что каждая “группа”, которую мы создали, будет отрендерена ровно как одна колонка в контейнере, но в реальности у элементов могут быть разные высоты и колонки с лихвой могут сливаться друг с другом. Первая колонка может быть длиннее, чем другие две, для примера, что привело бы к тому, что третья колонка начиналась бы в конце второй:
Подсвеченный элемент (3) должен быть отрендерен в начале третьей колонки или же алгоритм расстановки попросту полетит в тартарары, и если есть место для ещё одного элемента в конце второй колонки, то он само собой будет отрендерен там.
Мы можем пофиксить эту проблему, заставив колонки рестартиться в указанные моменты. Вообще, с флексбоксами нет простого способа для указания “этот элемент должен перейти на новую строку”, но мы можем достигнуть этого эффекта, добавив невидимые элементы, которые возьмут 100% высоты контейнера. Так как они требуют 100% высоты родителя, то они не поместятся в колонку вместе с любым другим элементом, создавая тем самым, переходы на новые строки.
Нам нужно вставить такие переходы в сетку и массив элементов, таким образом, чтобы у нас получилась такая последовательность: 1, 4, 7, 10,<переход>, 2, 5, 8, 11,<переход>, 3, 6, 9, 12. Мы можем использовать псевдоэлементы на контейнере, чтобы добавить такие переходы и мы можем выставить order на 2 обоим. Добавление псевдоэлемента :before, сделает его первым потомком контейнера, а добавление псевдоэлемента :after сделает его последним потомком того же контейнера, так что если мы выставим order: 2 каждому из них, то они станут первым и последним элементом “группы” с order: 2 (так как они находятся до и после других элементов): :before, 2, 5, 8, 11, :after.
/* Новые колонки разделители */
.container::before,
.container::after {
content: "";
flex-basis: 100%;
width: 0;
order: 2;
}
Я подсветил псевдоэлементы ниже, чтобы показать их эффект. Обратите внимание, что элемент 3 мог бы попасть во вторую колонку, но он отображается как первый элемент в последней:
И в конце вам надо убедиться в том, что ваш флекс-контейнер имеет высоту выше, чем ваша самая высокая колонка (чтобы все колонки поместились). Теперь всё это совместите и так вы сможете сделать настоящую трехколоночную плиточную раскладку (вот codepen).
.container {
display: flex;
flex-flow: column wrap;
align-content: space-between;
/* Вашему контейнеру нужна фиксированная высота
* и он должен быть выше, чем самая высокая колонка. */
height: 600px;
}
.item {
width: 32%;
margin-bottom: 2%; /* Optional */
}
/* Перегруппировываем элементы в 3 ряда */
.item:nth-child(3n+1) { order: 1; }
.item:nth-child(3n+2) { order: 2; }
.item:nth-child(3n) { order: 3; }
/* Новые колонки разделители */
.container::before,
.container::after {
content: "";
flex-basis: 100%;
width: 0;
order: 2;
}
Ваш html должен выглядеть примерно так, где div это каждый элемент в сетке:
<div>
<div></div>
<div></div>
<div></div>
...
</div>
Чтобы создать плиточную раскладку с более, чем тремя колонками, нам надо сделать несколько вещей: адаптировать наш алгоритм сортировки, обновить ширину элементов и вставить переходы на новые строки вручную (вместо использования псевдоэлементов). Для быстрого доступа к конечным результатам я собрал список codepen’ов показывающих плиточную раскладку на флексах для 3, 4, 5 и 6 колонок.
До этого мы были ограничены созданием только двух псевдоэлементов с :before и :after, теперь нам нужно прибегнуть к ручному добавлению переходов на новые строки внутри контейнера (вам требуется на один элемент-разделитель меньше, чем количество колонок в вашей раскладке). Вы можете просто вставить их в конец контейнера и они будут отсортированы по соответствующим колонкам:
<div>
<div></div>
<div></div>
<div></div>
<div></div>
...
<span></span>
<span></span>
<span></span>
</div>
Мы вставляем разделители колонок как span, для того, чтобы отсортировать их в независимости от элементов контента. Нам нужен способ сбросить счет после того, как мы достигнем элемент разделитель или неравномерное число элементов сделает старт первого разделителя после 3 колонки, к примеру. Селектор :nth-of-type выбирает элементы вне зависимости от их типа, так что мы можем разделить порядок элементов и разделители таким образом:
.item:nth-of-type(4n+1) { order: 1; }
.item:nth-of-type(4n+2) { order: 2; }
.item:nth-of-type(4n+3) { order: 3; }
.item:nth-of-type(4n) { order: 4; }
Разделители же, как и в предыдущем примере, возьмут всю высоту контейнера:
/* Переход к новой колонке */
.break {
flex-basis: 100%;
width: 0;
margin: 0;
}
В общем, это создаст плиточную колонку с 4-мя колонками (вот codepen):
Вот полное решение для CSS такой плиточной раскладки с 4-мя колонками:
.container {
display: flex;
flex-flow: column wrap;
align-content: space-between;
height: 600px;
}
.item {
width:24%;
margin-bottom: 2%; /* опционально */
}
. item:nth-of-type(4n+1) { order: 1; }
.item:nth-of-type(4n+2) { order: 2; }
.item:nth-of-type(4n+3) { order: 3; }
.item:nth-of-type(4n) { order: 4; }
.break {
flex-basis: 100%;
width: 0;
margin: 0;
}
Этот способ создания плиточной раскладки только средствами CSS, точно не является самым надежным, гибким или защищенным от внезапных косяков со стороны разработчика, в отличие от такого же исполнения на JavaScript (например Masonry), но если вы не хотите полагаться на сторонние библиотеки только для того, чтобы создать раскладку, то я надеюсь, что эти советы будут вам полезны.
Разукрашиваем таблицу
В CSS3 появились удобные средства для улучшения стилевых таблиц печати и разбиения контента на столбцы.
:nth-of-type [p:nth-of-type(2n+l){color: red;}] — Поиск всех элементов определенного типа.
:first-child [р: first-child{ color: blue;}] — Поиск первого дочернего элемента.
:nth-child [p:nth-child(2n+l){color: red;}] — Поиск заданного дочернего элемента в прямом направлении (от начала к концу).
:last-child [p:last-child{color:blue;}] — Поиск последнего дочернего элемента.
:nth-last-child [p:nth-last-child(2){color: red;}] — Поиск заданного дочернего элемента в обратном направлении.
:first-of-type [p:first-of-type{color:blue;}] — Поиск первого элемента заданного типа.
:last-of-type [р:last-of-type{color:blue;}] — Поиск последнего элемента заданного типа.
Поддержка столбцов
[#content{ column-count: 2; column-gap: 20рх; column-rule: lpx solid #ddccb5; }] — Разбиение области контента на несколько столбцов.
:after [span.weight:after { content: «lbs»; color: #bbb; }] — Используется с content для вставки контента после заданного элемента.
[media=»only all and (max-width: 480)»] — Применение стилей в зависимости от параметров устройства.
Создадим простую таблицу без стилей. Она будет выглядеть так.
Название Цена Количество Итого
Кружка $10.00 5 $50.00
Рубашка $20.00 5 $100.00
Ножницы $9.00 4 $36.00
Промежуточный итог $186.00
Доставка $12.00
Всего $198.00
Зебра (:nth-of-type)
Эффект зебры (чередование цвета строк) полезен тем, что упрощает просмотр данных по строкам. Раньше в строку таблицы приходилось включать дополнительные классы (например, odd и even для нечетных и четных строк соответственно). При помощи новых селекторов мы можем добиться желаемого эффекта без изменения разметки.
Селектор nth-of-type находит каждый элемент конкретного типа, определяемый формулой или ключевыми словами. Чтобы каждая вторая строка таблицы была окрашена в другой цвет, проще всего найти все чётные строки таблицы и назначить им другой цвет фона. То же самое делается с нечетными строками. В CSS3 имеются ключевые слова even и odd, предназначенные именно для таких ситуаций. Фактически этот селектор означает: «Найти каждую чётную строку таблицы и задать ее цвет. Затем найти каждую нечётную строку таблицы и задать её цвет».
table{ border-collapse: collapse; width: 600px; } th, td{ border: none; } th{ background-color: #000; color: #fff; } tr:nth-of-type(even){ background-color: #F3F3F3; } tr:nth-of-type(odd){ background-color:#ddd; }
Название Цена Количество Итого
Кружка $10. 00 5 $50.00
Рубашка $20.00 5 $100.00
Ножницы $9.00 4 $36.00
Промежуточный итог $186.00
Доставка $12.00
Всего $198.00
Выравнивание текста столбцов (:nth-child)
По умолчанию текст во всех столбцах таблицы выравнивается по левому краю. Мы выровняем по правому краю все столбцы, кроме первого, чтобы цена и количество единиц товара лучше читались. Для этого мы воспользуемся селектором nth-child.
Селектор nth-child ищет дочерние элементы заданного элемента; по аналогии с nth-of-type, он может использовать ключевые слова или формулу. Формула определяется в виде an + b, где а — множитель, n — счетчик, начинающийся с 0, b — смещение. Принцип использования формул проще понять в контексте; давайте применим его в таблице.
Для выбора всех строк таблицы можно воспользоваться селектором вида:
table tr:nth-child(n)
В этом примере не указан ни множитель, ни смещение.
Все строки таблицы, кроме первой (строка с заголовками столбцов), выбираются при помощи селектора со смещением:
table tr:nth-child(n+2)
Счетчик равен 0, но со смещением 2, отсчёт начинается не от начала таблицы, а со второй строки.
Для выбора каждой второй строки таблицы используется множитель 2:
table tr:nth-child(2n)
Каждая третья строка выбирается при помощи множителя 3n.
Если прибавить к множителю смещение, то поиск будет начинаться не от начала таблицы, а с одной из следующих строк. Следующий селектор находит каждую вторую строку, начиная с четвертой:
table tr :nth-child(2n+4)
Итак, для выравнивания всех столбцов, кроме первого, используется следующая запись:
td:nth-child(n+2), th:nth-child(n+2){ text-align: right; }
Название Цена Количество Итого
Кружка $10. 00 5 $50.00
Рубашка $20.00 5 $100.00
Ножницы $9.00 4 $36.00
Промежуточный итог $186.00
Доставка $12.00
Всего $198.00
Последняя строка (:last-child)
Хотите, чтобы нижняя строка выделялась жирным шрифтом? Воспользуемся селектором last-child, который находит последний дочерний элемент группы.
tr:last-child{ font-weight: bolder; }
Выделим также последний столбец таблицы, чтобы суммы строк тоже выделялись на общем фоне:
td:last-child{ font-weight: bolder; }
Наконец, при помощи селектора last-child можно увеличить размер шрифта общей суммы в правом нижнем углу таблицы. Мы находим последний столбец последней строки и изменяем его оформление.
tr:last-child td:last-child{ font-size:24px; }
Название Цена Количество Итого
Кружка $10.00 5 $50.00
Рубашка $20.00 5 $100.00
Ножницы $9.00 4 $36.00
Промежуточный итог $186.00
Доставка $12.00
Всего $198.00
Поиск в обратном направлении (:nth-last-child)
Если стоимость доставки снижена под действием скидки, то соответствующая строка таблицы должна выделяться цветом. Для быстрого поиска этой строки удобно использовать селектор nth-last-child. Вы уже видели, как селектор nth-child и формула аn+b используются для выбора конкретных дочерних элементов. Селектор nth-last-child работает практически так же, если не считать того, что он перебирает дочерние элементы в обратном порядке, начиная с последнего. Это позволяет легко найти предпоследний элемент группы.
Селектор определяет конкретный дочерний элемент — второй с конца.
tr:nth-last-child(2){ color: green; }
В оформление таблицы осталось внести последний штрих. Ранее мы выровняли по правому краю все столбцы, кроме первого. Для строк с опи саниями и ценами товаров такое выравнивание естественно, но последние три строки выглядят немного странно. Для них лучше использовать выравнивание по правому краю. Для решения этой задачи мы используем селектор nth-last-child с отрицательным множителем и положительным смещением.
tr:nth-last-child(-n+3) td{ text-align: right; }
Такая формула реализует интервальный выбор. В ней используется смещение 3, а с селектором nth-last-child выбирается каждый элемент до заданного смещения. Если бы вместо него использовался селектор nth-child, то строки выбирались бы от начала таблицы.
Название Цена Количество Итого
Кружка $10.00 5 $50.00
Рубашка $20.00 5 $100.00
Ножницы $9.00 4 $36.00
Промежуточный итог $186.00
Доставка $12.00
Всего $198.00
Реклама
Псевдокласс nth-last-child — n-ный потомок родителя, отсчет с конца
Псевдокласс nth-last-child выбирает элемент, который является n-ным потомком родителя, отсчитывая с конца. Ведет себя аналогично nth-child, только отсчет ведется с конца.
Синтаксис
селектор:nth-last-child(число | odd | even | выражение) { }
Значения
Значение Описание
число Положительное число начиная с 1. Задает номер элемента, к которому мы хотим обратиться. Нумерация элементов начинается с 1.
odd Нечетные элементы.
even Четные элементы.
выражение Можно составлять специальные выражения с буквой n, которая обозначает все целые числа от нуля (не от единицы!) до бесконечности. Так, 2n — значит все четные числа (начиная со второго).
Как это понять? Подставляем в n последовательно числа от 0 и так далее: если n = 0, то 2n даст 0 — такого элемента нет (нумерация элементов с 1!), если n = 1, то 2n даст 2 — второй элемент, если n = 2, 2n дает 4 — четвертый элемент. Если написать 3n — это будет каждый третий элемент (начиная с третьего!), и так далее.
Пример
В данном примере мы сделаем красного цвета тот li, который является 4-тым с конца потомком своего родителя (4-тым внутри ol):
<ul> <li>list item</li> <li>list item</li> <li>list item</li> <li>list item</li> <li>list item</li> </ul> li:nth-last-child(4) { color: red; }
:
Пример
Сейчас красными сделаем все четные с конца li:
<ul> <li>list item</li> <li>list item</li> <li>list item</li> <li>list item</li> <li>list item</li> </ul> li:nth-last-child(even) { color: red; }
:
Пример
Сейчас красными сделаем все нечетные с конца li:
<ul> <li>list item</li> <li>list item</li> <li>list item</li> <li>list item</li> <li>list item</li> </ul> li:nth-last-child(odd) { color: red; }
:
Пример
Сейчас красными сделаем каждую третью с конца li (начиная с третьей с конца):
<ul> <li>list item</li> <li>list item</li> <li>list item</li> <li>list item</li> <li>list item</li> </ul> li:nth-last-child(3n) { color: red; }
:
30 CSS-селекторов, о которых полезно помнить
Главная

->

Материалы

->

30 CSS-селекторов, о которых полезно помнить

Reg.ru: домены и хостинг
Крупнейший регистратор и хостинг-провайдер в России.
Более 2 миллионов доменных имен на обслуживании.
Продвижение, почта для домена, решения для бизнеса.
Более 700 тыс. клиентов по всему миру уже сделали свой выбор.
Перейти на сайт->
Бесплатный Курс «Практика HTML5 и CSS3»
Освойте бесплатно пошаговый видеокурс
по основам адаптивной верстки
на HTML5 и CSS3 с полного нуля.
Начать->
Фреймворк Bootstrap: быстрая адаптивная вёрстка
Пошаговый видеокурс по основам адаптивной верстки в фреймворке Bootstrap.
Научитесь верстать просто, быстро и качественно, используя мощный и практичный инструмент.
Верстайте на заказ и получайте деньги.
Получить в подарок->
Бесплатный курс «Сайт на WordPress»
Хотите освоить CMS WordPress?
Получите уроки по дизайну и верстке сайта на WordPress.
Научитесь работать с темами и нарезать макет.
Бесплатный видеокурс по рисованию дизайна сайта, его верстке и установке на CMS WordPress!
Получить в подарок->
*Наведите курсор мыши для приостановки прокрутки.
Назад Вперед

30 CSS-селекторов, о которых полезно помнить
Итак, Вы разобрались с основными селекторами: id, class, селекторами потомков. И все? Если да, то Вы теряете очень много в плане гибкости управления внешним видом элементов на странице.
Несмотря на то, что многие из упомянутых здесь селекторов входят в спецификацию CSS3 и, соответственно, поддерживаются только современными браузерами, Вам все же следует ознакомиться с ними и держать их в памяти.
1. *
* { margin: 0; padding: 0; }
Начнем с простейших вещей для новичков, прежде чем перейдем к продвинутым селекторам.
Символ звездочки позволяет выбрать все элементы на странице. Многие веб-разработчики используют это для «обнуления» всех внешних и внутренних отступов.
Также символ * можно использовать для дочерних элементов объекта.
#container * { border: 1px solid black; }
Этот код нацелен на все элементы, которые являются дочерними по отношению к блоку с идентификатором container.
Совместимость:
* IE6+
* Firefox
* Chrome
* Safari
* Opera
2. #X
#container { width: 960px; margin: auto; }
Символ решетки позволяет нам отбирать элементы по идентификатору. Это один из наиболее распространенных способов отбора элементов, однако будьте осторожны при его использовании.
«Спросите себя: Мне точно необходимо использовать id для какого-то элемента, чтобы сослаться на него?»
Селекторы id негибки и их трудно использовать повторно в разных проектах. Если возможно, пытайтесь сначала использовать имя тэга или даже псевдо-класс.
Совместимость:
* IE6+
* Firefox
* Chrome
* Safari
* Opera
3. .X
.error { color: red; }
Это селектор класса. Разница между id и классами в том, что с помощью классов можно выбирать сразу несколько элементов. Используйте классы, если Вам нужно применить один стиль к группе элементов.

В противном случае используйте id для нахождения «иголки в стоге сена» и применения стиля только к одному конкретному объекту.
Совместимость:
* IE6+
* Firefox
* Chrome
* Safari
* Opera
4. X Y
li a { text-decoration: none; }
Следующий часто используемый тип селектора — селектор потомка. Его следует использовать, когда нужно производить более точечный отбор элементов.
К примеру, как быть, если нужно выбрать не все тэги ссылок, а только те, что находятся внутри неупорядоченного списка? Это как раз тот случай, когда следует использовать селектор потомка.
«Совет: Если Ваш селектор похож на X Y Z A B.error, то Вы, вероятно, что-то делаете на так. Всегда спрашивайте себя, действительно ли это самый простой способ»
Совместимость:
* IE6+
* Firefox
* Chrome
* Safari
* Opera
5. X
a {color: red;} ul {margin-left: 0px;}
Что, если Вы хотите сослать на все элементы определенного типа на странице, если у них нет id или классов? Делайте проще, используйте селекторы типа. Если Вам нужно выбрать все неупорядоченные списки, используйте ul{}.
Совместимость:
* IE6+
* Firefox
* Chrome
* Safari
* Opera
6. X:visited и X:link
a:link {color: red;} a:visited {color: purple;}
Здесь мы используем псевдо-класс :link для выбора всех ссылок, на которых еще не был совершен клик.
Также есть псевдо-класс :visited, который, как Вы и ожидали, позволяет нам применить стиль только к тем ссылкам, по которым был совершен клик или переход.
Совместимость:
* IE7+
* Firefox
* Chrome
* Safari
* Opera
7. X + Y
ul + p { color: red; }
Это так называемый смежный селектор. В этом случае каждый параграф следующий сразу после каждого элемента ul будет красного цвета.
Совместимость:
* IE7+
* Firefox
* Chrome
* Safari
* Opera
8. X > Y
#container > ul { border: 1px solid black; }
Различие между X Y и X > Y в том, что последний выберет только прямых потомков. Рассмотрим следующий пример:
<div> <ul> <li>Элемент списка <ul> <li>Потомок</li> </ul> </li> <li>Элемент списка</li> <li>Элемент списка</li> <li>Элемент списка</li> </ul> </div>
Селектор #container > ul выберет только те элементы ul, которые являются прямыми потомками блока div с идентификатором container. Т.е. в данном случае этот селектор не отберет элемент ul, который является потомком первого элемента li.
Совместимость:
* IE7+
* Firefox
* Chrome
* Safari
* Opera
9. X ~ Y
ul ~ p { color: red; }
Эта комбинация сестринских (сиблинговых) элементов похожа на X + Y, но она менее строгая. Если в случае ul + p будут выбраны только первые элементы p, следующие за ul (т.е. наблюдается смежность в выборе), то рассматриваемый нами сейчас селектор более общий.
В нашем случае он отберет все элементы p, следующие за элементом ul.
Совместимость:
* IE7+
* Firefox
* Chrome
* Safari
* Opera
10. X[title]
a[title] { color: green; }
Здесь мы обращаемся к атрибуту селектора. В нашем примере будут окрашены в зеленый цвет только ссылки, имеющие атрибут title.
Совместимость:
* IE7+
* Firefox
* Chrome
* Safari
* Opera
11. X[href=»foo»]
a[href="http://www.codeharmony.ru"] { color: red; }
Код выше позволит придать стиль всем ссылкам, атрибут href у которых равен http://www.codeharmony.ru. Эти ссылки будут красного цвета. Остальные ссылки не получат данного стиля.
Это работает хорошо, но это немного негибко. Что, если ссылка на самом деле ведет на Codeharmony.ru но, возможно, адрес указан, как codeharmony.ru а не http://www.codeharmony.ru? В таких случаях мы можем использовать основы регулярных выражений.
Совместимость:
* IE7+
* Firefox
* Chrome
* Safari
* Opera
12. X[href*=»codeharmony»]
a[href*="codeharmony"] { color: red; }
Поехали дальше; это как раз то, что нам нужно. Звездочка означает, что искомое значение может находиться в любой части атрибута href. Таким образом, мы можем отобрать и http://www.codeharmony.ru и www.codeharmony.ru и codeharmony.ru.
Совместимость:
* IE7+
* Firefox
* Chrome
* Safari
* Opera
13. (карат). Он обычно используется в регулярных выражениях для обозначения начала строки. Если мы хотим отобрать ссылки, у которых атрибут href начинается с http, то мы можем использовать селектор из примера выше.
«Обратите внимание, что мы не ищем http://. Это необязательно и, к тому же, не учитывает ссылки по протоколу https://.»
Совместимость:
* IE7+
* Firefox
* Chrome
* Safari
* Opera
14. X[href$=».jpg»]
a[href$=".jpg"] { color: red; }
И снова мы используем регулярное выражение и символ $ для того, чтобы обозначить конец строки. В данном примере мы ищем все ссылки, которые ссылаются на картинки с расширением .jpg. Разумеется, такой подход не будет работать для картинок с расширениями .gif, .png и т.д.
Совместимость:
* IE7+
* Firefox
* Chrome
* Safari
* Opera
15. X[data-*=»foo»]
a[data-filetype="image"] { color: red; }
Как же мы можем охватить различные типы картинок? Мы можем создать, например, несколько селекторов:
a[href$=".jpg"], a[href$=".jpeg"], a[href$=".png"], a[href$=".gif"] { color: red; }
Но это муторно и не элегантно. Другой вариант — это создать собственный атрибут data-filetype и добавить его к каждой ссылке, ведущей на картинку.
<a href="path/to/image.jpg" data-filetype="image">Ссылка</a>
Поступив таким образом, мы можем использовать код данного примера:
a[data-filetype="image"] { color: red; }
Совместимость:
* IE7+
* Firefox
* Chrome
* Safari
* Opera
16. X[foo~=»bar»]
a[data-info~="external"] { color: red; } a[data-info~="image"] { border: 1px solid black; }
Вот еще один интересный трюк, о котором не все знают. Знак ~ (тильда) позволяет нам выбирать атрибуты со значениями, разделенными пробелами, т.е.
<a href="path/to/image.jpg" data-info="external image">Кликни сюда</a>
Используя данный прием мы можем делать выборки с нужными нам комбинациями:
/* Отобрать атрибут data-info, который содержит значение external */ a[data-info~="external"] { color: red; } /* и отобрать атрибут data-info, который содержит значение image */ a[data-info~="image"] { border: 1px solid black; }
Совместимость:
* IE7+
* Firefox
* Chrome
* Safari
* Opera
17. X:checked
input[type=radio]:checked { border: 1px solid black; }
Этот псевдо-класс отбирает те элементы, которые были отмечены, например, радиокнопку или чекбокс.
Совместимость:
* IE9+
* Firefox
* Chrome
* Safari
* Opera
18. X:after
Данный псевдо-класс позволяет сгенерировать контент вокруг выбранного элемента.
.clearfix:after { content: ""; display: block; clear: both; visibility: hidden; font-size: 0; height: 0; } .clearfix { *display: inline-block; _height: 1%; }
Данный пример показывает, как с помощью псевдо-класса :after после блока с классом .clearfix создаётся пустая строка, после чего очищается. Хороший метод, когда невозможно применить overflow: hidden.

Совместимость:
* IE8+
* Firefox
* Chrome
* Safari
* Opera
19. X:hover
div:hover { background: #e3e3e3; }
Это Вы точно знаете. Официальное название звучит вроде «псевдо-класс, основанный на действии пользователя». Звучит страшновато, хотя на деле все просто. Хотите применить к элементу определенный стиль, когда на него наводится курсор мыши? Это оно самое!
«Помните, что старые версии IE не понимают этого псевдо-класса по отношению к чему-бы то ни было, кроме тэга а.»
Часто данный прием используется для задания нижней границы для ссылок при наведении на них курсора:
a:hover { border-bottom: 1px solid black; }
«Мега-чит: border-bottom: 1px solid black; выглядит лучше, чем text-decoration: underline;»
Совместимость:
* IE6+ (в IE6 работает только по отношению к ссылкам)
* Firefox
* Chrome
* Safari
* Opera
20. X:not(selector)
div:not(#container) { color: blue; }
Отрицание может быть также очень полезным. Предположим, я хочу выбрать все блоки div, кроме одного с идентификатором container. Для этого отлично подойдет код выше.
Если же мне нужно выбрать все элементы, кроме тэгов параграфов, то можно написать так:
*:not(p) { color: green; }
Совместимость:
* IE9+
* Firefox
* Chrome
* Safari
* Opera
21. X::pseudoElement
p::first-line { font-weight: bold; font-size: 1.2em; }
Псевдоэлементы можно использовать для придания стилей фрагменту элемента, например, первой строке или первой букве. Применяется только к блочным элементам.
Выбираем первую букву параграфа:
p::first-letter { float: left; font-size: 2em; font-weight: bold; font-family: cursive; padding-right: 2px; }
Этот кусок кода найдет все параграфы на странице и применит к первой букве каждого из них указанные стили. Часто это используется для создания эффекта «газетного заголовка».
Выбираем первую строку параграфа:
p::first-line { font-weight: bold; font-size: 1.2em; }
Аналогично предыдущему примеру, но в данном случае будет выбрана первая строка каждого параграфа.
Совместимость:
* IE6+
* Firefox
* Chrome
* Safari
* Opera
22. X:nth-child(n)
li:nth-child(3) { color: red; }
Помните времена, когда мы не имели возможности обратиться к конкретному порядковому элементу-потомку? Данный псевдо-класс решает эту проблему!
В качестве параметра принимается целое число. Если нужно выбрать 2-й элемент списка, нужно использовать конструкцию: li:nth-child(2).
Мы можем даже выбирать группы элементов-потомков. К примеру, чтобы выбрать каждый четвертый элемент списка, нужно использовать конструкцию: li:nth-child(4n).
Совместимость:
* IE9+
* Firefox
* Chrome
* Safari
23. X:nth-last-child(n)
li:nth-last-child(2) { color: red; }
Что, если у Вас есть большой неупорядоченный список и Вам нужно, к примеру, выбрать третий элемент с конца. Вместо того, чтобы писать li:nth-child(397), Вы можете воспользоваться псевдо-классом nth-last-child.
Совместимость:
* IE9+
* Firefox 3.5+
* Chrome
* Safari
* Opera
24. X:nth-of-type(n)
ul:nth-of-type(3) { border: 1px solid black; }
Иногда бывают ситуации, когда вместо того, чтобы выбирать определенных потомков, нужно сделать выбор по типу элемента.
Представьте, что на странице есть пять неупорядоченных списков. Если Вам нужно применить стили только к третьему списку, но у него нет уникального идентификатора и иных «зацепок», то можно воспользоваться псевдо-классом nth-of-type(n). В коде выше показан способ придания стиля только третьему неупорядоченному списку.
Совместимость:
* IE9+
* Firefox 3.5+
* Chrome
* Safari
25. X:nth-last-of-type(n)
ul:nth-last-of-type(3) { border: 1px solid black; }
Да, для полноты картины есть и такой вариант. Так можно выбрать n-ный элемент определенного типа с конца.
Совместимость:
* IE9+
* Firefox 3.5+
* Chrome
* Safari
* Opera
26. X:first-child
ul li:first-child { border-top: none; }
Этот псевдо-класс позволяет выбрать только первого потомка родительского элемента. Часто используется для удаления границ первого и последнего элементов списка.
К примеру, если у вас есть список рядов, каждый из которых имеет border-top и border-bottom, то последний и первый элементы списка будут немного выбиваться из общего строя.
Для устранения этого недостатка можно использовать данный псевдо-класс.
Совместимость:
* IE7+
* Firefox
* Chrome * Safari
* Opera
27. X:last-child
ul > li:last-child { color: green; }
В противоположность классу first-child, last-child выберет последний элемент родительского элемента.
Совместимость:
* IE9+
* Firefox
* Chrome
* Safari
* Opera
28. X:only-child
div p:only-child { color: red; }
Честно говоря, это довольно редко используемый псевдо-класс, но, тем не менее, он тоже бывает полезен. Он позволяет выбрать Вам те элементы, которые являются единственными потомками для своих родителей.
В нашем примере стиль будет применен только к параграфу, который является единственным потомком блока div.
Давайте рассмотрим для наглядности такую разметку:
<div><p>Здесь идет единственный в блоке параграф.</p></div> <div> <p>Здесь идет первый параграф в блоке.</p> <p>Здесь идет второй параграф в блоке.</p> </div>
В этом случае параграфы во втором блоке div выбраны не будут. Стиль будет применен только к параграфу из первого блока div.
Совместимость:
* IE9+
* Firefox
* Chrome
* Safari
* Opera
29. X:only-of-type
li:only-of-type { font-weight: bold; }
Этот псевдо-класс выбирает элементы, которые не имеют сестринских элементов в содержащем их контейнере. Например, давайте выберем все ul, которые содержат одинокие li.
Вы могли бы написать ul li, но этот способ выберет все элементы li. Единственный способ — использовать only-of-type.
ul > li:only-of-type { font-weight: bold; }
Совместимость:
* IE9+
* Firefox 3.5+
* Chrome
* Safari
* Opera
30. X:first-of-type
Этот псевдо-класс позволяет отобрать первого сиблинга того же типа.
Чтобы лучше это понять, скопируйте в свой редактор следующий код:
<div> <p>Здесь параграф.</p> <ul> <li>Элемент 1.</li> <li>Элемент 2.</li> </ul> <ul> <li>Элемент 3.</li> <li>Элемент 4.</li> </ul> </div>
Сейчас, не читая дальше, попробуйте придать стиль только «элементу 2». Когда догадаетесь (либо сдадитесь), читайте дальше.
Решение 1
Есть много способов решить данную задачу. Рассмотри лишь некоторые из них. Начнем с использования first-of-type:
ul:first-of-type > li:nth-child(2) { font-weight: bold; }
Данный код гласит: «Найди первый неупорядоченный список на странице, затем найди только его прямых потомков, являющихся элементами li. После этого выбери только второй по порядку элемент li.»
Решение 2
Другой вариант — воспользоваться смежным селектором:
p + ul li:last-child { font-weight: bold; }
Здесь мы находим ul, следующий непосредственно за тэгом параграфа, после чего находим самый последний его дочерний элемент.
Решение 3
Можно еще немного поиграть с селекторами и поступить таким образом:
ul:first-of-type li:nth-last-child(1) { font-weight: bold; }
Сейчас мы уже получаем первый элемент ul на странице, затем ищем самый первый элемент li, но начиная с конца.
Совместимость:
* IE9+
* Firefox 3.5+
* Chrome
* Safari
* Opera
Вывод
Если Вы все еще пишете код, принимая во внимание существование IE6, то Вам нужно быть предельно осторожным при использовании новых селекторов. Но не делайте из этого оправдания, не говорите, что Вам это не нужно знать — этим Вы осложните жизнь самому себе.
Если Вы работаете с какими-либо JavaScript-библиотеками, например, с jQuery, то всегда старайтесь использовать «родные» CSS3 селекторы, когда это возможно. В этом случае Ваш код будет работать быстрее.
Благодарю за внимание, надеюсь, Вы нашли для себя хотя бы пару-тройку полезных трюков.
По материалам www.net.tutsplus.com
Перевод — Дмитрий Науменко.
P.S. Уже верстаете сайты или планируете глубже освоить CSS? Посмотрите еще серию бесплатных видео по резиновой верстке и бесплатный курс по основам адаптивной верстки. Эти материалы помогут вам продвинуться вперед гораздо быстрее:
Понравился материал и хотите отблагодарить?
Просто поделитесь с друзьями и коллегами!

Смотрите также:
Наверх
Как работают псевдоклассы в CSS. Подробное объяснение с примерами и диаграммами
Наверняка каждый, кто работал с CSS, не раз впадал в отчаяние. Например, когда пытался отцентрировать дочерний элемент по отношению к родительскому, что является весьма нетривиальной задачей. В этой статье мы рассмотрим ещё более сложную тему — псевдоклассы, один из видов селекторов.
Прим. перев. Псевдоклассы предназначены для изменения стиля существующих элементов страницы в зависимости от их динамического состояния, например, при работе со ссылками (:link, :visited, :hover, :active, :focus).
В этой статье мы познакомимся с двумя типами псевдоклассов:
селекторы *-of-type;
селекторы *-child.
Иногда сложно понять, что такое псевдоклассы и как они работают. Главная сложность состоит в том, что они представлены в абстрактном виде. Поэтому для упрощения восприятия использованы схемы с DOM-деревьями.
Разметка и DOM-дерево
Обратите внимание на HTML-код, представленный ниже. Он будет использоваться во всех примерах в этой статье.
<body> <div class=”main”> <a href=”#”>Внутренняя ссылка 1</a> <a href=”#”>Внутренняя ссылка 2</a> <ul> <a href=”#”>Вложенная в список ссылка 1</a> <li> <a href=”#”>Элемент списка 1</a> </li> <li> <a href=”#”>Элемент списка 2</a> </li> </ul> <a href=”#”>Внутренняя 3</a> </div> <a href=”#”>Внешняя ссылка 1</a> <a href=”#”>Внешняя ссылка 2</a> </body>
А теперь давайте преобразуем этот код в нечто, понятное визуально и интуитивно — в DOM-дерево.
Давайте рассмотрим подробнее элемент body. В нём расположено 3 дочерних элемента: main и два элемента <a>.
<body> <div class=”main”> ... </div> <a href=”#”>Внешняя ссылка 1</a> <a href=”#”>Внешняя ссылка 2</a> </body>
На схеме представлено отношение между body и дочерними элементами.

Важен порядок, в котором дочерние элементы размещаются в дереве. В коде дочерние элементы располагаются сверху вниз, а в дереве — слева направо.
Теперь давайте посмотрим на div-контейнер с классом main:
<div class=”main”> <a href=”#”>Внутренняя ссылка 1</a> <a href=”#”>Внутренняя ссылка 2</a> <ul> ... </ul> <a href=”#”>Внутренняя ссылка 3</a> </div>
Контейнер с классом main имеет 4 дочерних элемента: сначала два элемента <a>, затем элемент ненумерованного списка ul и снова <a>-элемент.

Аналогичным образом спускаемся вниз по схеме согласно порядку вложенности элементов, отрисовывая полноценное дерево HTML-кода.

Внимательно изучите структуру DOM-дерева, чтобы легче воспринимать оставшуюся часть статьи.
Псевдокласс only-of-type (единственный из выбранного типа)
Для всех псевдоклассов действует один и тот же формат:
выбираемый-элемент:селектор { /* стиль */ }
Выбираемый элемент служит для того, чтобы выбрать любой элемент из DOM. Обратите внимание на пример:
a:only-of-type { border: 2px solid black; }
В приведённом выше фрагменте кода выбираемый элемент — тег <a>, а его селектор — one-of-type.
Данный пример можно изучить в работе на codepen.io. Уберите символы комментариев, чтобы посмотреть, как работает тот или иной селектор, а лучше продолжите чтение статьи, чтобы не запутаться.
Начнём с того, что выберем всё, что есть в DOM, а затем отфильтруем.

Обратите внимание, как был произведён выбор: в каждой секции (от 1 до 5) у элементов есть общий родительский элемент. Пример: родительский элемент для первой секции — body, для второй секции — контейнер с классом main, и т. д. Каждая секция соответствует уровню вложенности кода.
Так как в нашем случае выбираемым элементом являются элементы <a>, то мы можем сделать следующее:
Мы выбрали все элементы <a> в каждой секции и последовательно их пронумеровали слева направо. Не забывайте, что порядок очень важен.
Теперь мы завершаем часть работы, связанную с выбираемым элементом, и приступаем к фильтрации.

Only-of-type проходит через все секции, выбирая только те элементы <a>, которые являются единственными для своей секции.
Обратите внимание, что <a>-элементы для первой и второй секций не были выбраны из-за того, что они не являются единственными для своих секций. Иначе говоря: одна секция — один элемент <a>.
Псевдокласс first-of-type (первый из выбранного типа)
Давайте продолжим с того, на чём остановились — с выбираемого элемента (речь идёт об <a>-теге).
Селектор first-of-type выбирает каждый первый элемент <a> в секции.
Код, который выполняет условия приведённой выше схемы:
a:first-of-type { border: 2px solid black; }
Вы можете посмотреть как работает этот код в браузе на codepen.io.
Псевдокласс last-of-type (последний из выбранного типа)
Last-of-type — полная противоположность псевдокласса first-of-type. Этот селектор выбирает последние элементы <a> во всех секциях.
Элемент <a> — первый и последний для секций, в которых он представлен в единственном числе.
Псевдокласс nth-of-type (n-й из выбранного типа)
Теперь переходим к наиболее интересной части статьи. Рассмотрим простой CSS с элементами математики из школьной программы.
Давайте определим следующий стиль, чтобы посмотреть на селектор в действии:
a:nth-of-type(1) { border: 2px solid black; }
Вместо nth подставьте число из скобок в порядковой форме, чтобы прочитать правильно селектор.
Итак, давайте вернёмся к селектору. a:nth-of-type(1) может читаться точно так же, как и a:first-of-type. В данном случае эти селекторы работают одинаково: каждый из них выбирает только те элементы <a>, которые являются первыми в своих секциях.
А теперь давайте попробуем кое-что другое:
a:nth-of-type(0) { border: 2px solid black; }
Надеюсь, вы догадались, что произошло. Если нет, то объясняю: в этом случае ни один элемент <a> не будет выбран, так как счёт начинается с 1, а не с 0. То же самое произойдёт, если вы напишете a:nth-of-type(5) или a:nth-of-type(6/7/8) вместо a:nth-of-type(0). Это легко можно объяснить: в DOM нет 5-го, 6-го, 7-го или 8-го элемента <a>, поэтому в данном случае селектор ничего не выберет.
А если мы пойдём немного глубже и напишем следующее условие:
a:nth-of-type(2) { border: 2px solid black; }
то селектор выберет каждый второй элемент <a> в первой и во второй секциях.
Для полного понимания картины приведу ещё один пример:
a:nth-of-type(3) { border: 2px solid black; }
В этом случае будет выбран третий (не перепутайте с a:last-of-type) элемент <a> во второй секции, так как эта секция — единственная, в которой есть три элемента <a>.
Достаточно просто, не так ли? Но вставлять в скобки вы можете не только числа, но и формулы. Например, (a*n)+b (то же самое, что и an + b), где a и b — константы, а n —значение, которое больше или равно нулю. Не переживайте, если вам что-то непонятно, сейчас я всё объясню.
Для начала применим следующий стиль:
a:nth-of-type(n) { border: 2px solid black; }
Формула, переданная в селектор выглядит следующим образом: (1 * n) + 0 [=n], где а = 1, b = 0, n — переменная. Теперь давайте разберёмся, что идёт дальше. Значение n последовательно вставляется в формулу, начиная с 0, после этого селектор делает выбор. Поэтому a:nth-of-type можно представить следующим образом:
a:nth-of-type(0) { border: 2px solid black; } // n = 0 a:nth-of-type(1) { border: 2px solid black; } // n = 1 a:nth-of-type(2) { border: 2px solid black; } // n = 2 a:nth-of-type(3) { border: 2px solid black; } // n = 3 a:nth-of-type(4) { border: 2px solid black; } // n = 4...
В соответствии с данными результатами и будет выбран элемент <a>.
Давайте приведём ещё один пример:
a:nth-of-type(2n + 1) { border: 2px solid black; }
При постепенном заполнении значений n с нуля будут генерироваться следующие селекторы:
// n = 0 подразумевает эту операцию: (2 * 0) + 1 = 1 a:nth-of-type(1) { border: 2px solid black; }// n = 1 подразумевает эту операцию: (2 * 1) + 1 = 3 a:nth-of-type(3) { border: 2px solid black; }// n = 2 подразумевает эту операцию: (2 * 2) + 1 = 5 – Но в данном случае ни один элемент выбран не будет, так как у нас нет 5-го элемента <a> ни в одной из секций. a:nth-of-type(5) { border: 2px solid black; }...

Помимо чисел и формул, генерирующих числа, вы можете также выбирать чётные или нечётные номера элементов. Even выбирает все чётные номера элемента в соответствующих секциях. Предположим, что у нас есть секция с 4-мя элементами <a>. Из этой секции селектор выберет второй и четвёртый элементы <a>. Аналогичным образом селектор работает с нечётными числами, только следует заменить even на odd — a:nth-of-type(odd) {style}
Псевдокласс nth-last-of-type (n-й с конца из выбранного типа)
Этот селектор работает точно так же, как и предыдущий, но с небольшим отличием:
a:nth-last-of-type(1) { border: 2px solid black; }

Обратите внимание, что в каждой секции нумерация элементов <a> идёт справа налево. Это и есть единственное отличие от предыдущего селектора. В :last-of-type также можно использовать числа, формулы и выбор по чётным и нечётным номерам элементов. Главное запомнить, что для этого селектора работает обратный отбор, его следует читать справа налево. Иначе говоря, последний элемент превращается в первый, предпоследний превращается во второй и т. д.
На этом часть статьи о селекторах *-of-type подходит к концу. Надеюсь, что вам понравилось. Мы проделали большой путь от only-of-type до nth-last-of-type, углубившись в first-of-type, last-of-type и nth-of-type. Если где-то в середине вы что-то не до конца поняли, то предлагаю вам поэкспериментировать в codepen и перечитать эту часть.
Настало время перейти к новой категории псевдоклассов — *-child. В этой части статьи мы рассмотрим и попытаемся понять, как работает эта категория селекторов. После того, как вы изучили предыдущие селекторы, эта категория псевдоклассов не покажется вам трудной. Давайте начнём!
Псевдокласс only-child (единственный из выбранного типа дочернего элемента)
Примените следующий стиль к HTML-коду, который дан в самом начале .
a:only-child { border: 2px solid black; }
Как вы видите, селектор выбрал два <a>-элемента, каждый из которых вложен в элемент «список» li. Почему так и как это работает: only child дословно переводится как «единственный ребёнок / единственный дочерний элемент», поэтому селектор выбирает только те <a>-элементы, у которых родительский элемент имеет только один дочерний элемент —<a>. В нашем случае каждый li имеет по одному родительскому и по одному дочернему элементу, поэтому они и были выбраны.

Почему не выбран <a>-элемент, единственный дочерний элемент <a> ненумерованного списка ul? Ответ прост: несмотря на то, что он является единственным дочерним <a>-элементом, у него есть ещё два соседа, не являющихся элементами <a>, для которых ul является родительским. Получается три дочерних элемента, что, разумеется, не попадает под наше правило: один родительский элемент — один дочерний.
Псевдокласс first-child (первый дочерний элемент)
Примените следующий стиль:
a:first-child { border: 2px solid black; }
Селектор first-child выбирает все первые дочерние элементы <a> своих родителей. Следует помнить, что он выбирает только первые дочерние <a>-элементы. Это означает, что элемент <a> должен занимать первую позицию в своей секции, а не быть первым после какого-либо другого дочернего элемента.
Если вы не поняли, почему первый дочерний <a>-элемент в body не был выбран, то сейчас объясню. Дело в том, что он является первым только среди дочерних <a>-элементов в этой секции. Среди всех дочерних элементов он — второй, так как первый — это контейнер с классом main.
Псевдокласс last-child (последний дочерний элемент)
Думаю, что после всего материала, который мы изучили, вы примерно понимаете, как работает этот селектор. Если нет — объясняю: last-child выбирает последний элемент <a> в каждой секции. Правило прежнее: <a>-элемент должен быть именно первым в списке всех дочерних элементов, иначе он не будет выбран.
Обратите внимание на схему после кода.
a:last-child { border: 2px solid black; }

Псевдокласс nth-child (n-й дочерний элемент)
Надеюсь, вы усвоили небольшой урок математики в первой части статьи. Потому что сейчас это произойдёт снова, но с небольшими изменениями.
Обратите внимание на следующий пример:
a:nth-child(1) { border: 2px solid black; }
Всё работает так же, как и с селектором nth-of-type.
Чтобы начать использовать nth-child, нужно повторить все те действия, которые мы произвели с селектором nth-of-type — поместить в скобки любое число. В примере выше селектор сработает точно так же, как и first-child — выберет все первые элементы <a> в секциях.
Итак, давайте перейдём к новому примеру:
a:nth-child(2n - 1) { border: 2px solid black; }
Постепенно добавляем значения n в формулу начиная с 0, и это даёт нам понять, что селектор сверху во многом схож тем, что ниже.
// n = 0 Подразумевает эту операцию: (2 * 0) - 1 = 0 - 1 = -1 a:nth-child(-1) { border: 2px solid black; } | не выбирает ничего// n = 1 подразумевает эту операцию: (2 * 1) - 1 = 2 - 1 = 1 a:nth-child(1) { border: 2px solid black; }// n = 2 подразумевает эту операцию: (2 * 2) - 1 = 4 - 1 = 3 a:nth-child(3) { border: 2px solid black; }// n = 3 подразумевает эту операцию: (2 * 3) - 1 = 6 - 1 = 5 a:nth-child(5) { border: 2px solid black; } | не выбирает ничего
Если селектор получает числа, выходящие за пределы секторов (как -1, 5, 6), он просто их игнорирует.
На схеме ниже показано действие селектора a:nth-child(2n-1):
На сайте CSS Tricks вы сможете найти очень полезную и исчерпывающую статью о селекторе :nth-child.
А пока что давайте перейдём к последнему селектору в нашем руководстве.
Псевдокласс nth-last-child (n-й дочерний элемент с конца)
Этот селектор работает точно так же, как и :nth-child, за исключением одной тонкости: он видит и читает дерево DOM в обратном направлении — справа налево.

Дочерние элементы в каждой секции для этого селектора выстраиваются в ряд справа налево.
a:nth-last-child(1) { border: 2px solid black; }
Обратите внимание на то, как расположены и выбраны дочерние элементы на схеме:

Как видите, всё довольно просто — выбор элемента происходит с конца.
Заключение
На этом наше знакомство с псевдоклассами окончено. Но вы всегда можете найти полезный материал по CSS у нас на сайте. Желаем вам удачи в освоении CSS!
Перевод статьи «How CSS pseudo-classes work, explained with code and lots of diagrams»
CSS: четные и нечетные правила
CSS: четные и нечетные правила
См. Также указатель всех подсказок.
Правила четных и нечетных
Один из способов улучшить читаемость больших таблиц — раскрасить чередование рядов. Например, в таблице ниже светло-серый фон для четных строк и белый для нечетных. Правила для этого очень просто:
tr: nth-child (даже) {background: #CCC} tr: nth-child (нечетный) {background: #FFF}
Месяц ’94 ’95 ’96 ’97 ’98 ’99 ’00 ’01 ’02
янв. 14 13 14 13 14 11 11 11 11
фев 13 15 12 15 15 12 14 13 13
мар. 16 15 14 17 16 15 14 15 15
Апрель 17 16 17 17 17 15 15 16 16
Май 21 20 20 21 22 20 21 20 19
июн. 24 23 25 24 25 23 25 23 24
июл. 29 28 26 26 27 26 25 26 25
авг. 29 28 27 28 28 27 26 28 26
сен 24 23 23 26 24 24 24 22 21
окт. 20 22 20 22 20 19 20 22
Ноябрь 18 17 16 17 16 15 14 15
Декабрь 15 13 13 14 13 10 13 11
Фактически, CSS позволяет не только разрешать четные / нечетные чередования, но и произвольные интервалы.Ключевые слова «четный» и «нечетный» просто удобные сокращения. Например, для длинного списка вы можете сделать это:
li: nth-child (5n + 3) {font-weight: bold}
Это говорит о том, что каждый 5-й элемент списка выделен жирным шрифтом, начиная с 3-й. Другими словами, элементы с номерами 3, 8, 13, 18, 23 и т. Д., будет жирным.
Четные и нечетные столбцы
То же самое работает и для столбцов таблицы, но тогда должно быть элемент в документе, соответствующий столбцу.HTML предоставляет для этого COL. Таблица должна начинаться с одного COL для каждый столбец:
<таблица> месяц '94 '95 '96 ...
(COL можно использовать не только для стиля, но в этом случае все, что нам нужно, это наличие элементов COL.) Следующие правила придают желтому фону первый столбец, а затем каждый второй столбец, начиная с столбца 3, серый:
col: first-child {background: # FF0} col: nth-child (2n + 3) {background: #CCC}
Месяц ’94 ’95 ’96 ’97 ’98 ’99 ’00 ’01 ’02
янв. 14 13 14 13 14 11 11 11 11
фев 13 15 12 15 15 12 14 13 13
мар. 16 15 14 17 16 15 14 15 15
Апрель 17 16 17 17 17 15 15 16 16
Май 21 20 20 21 22 20 21 20 19
июн. 24 23 25 24 25 23 25 23 24
июл. 29 28 26 26 27 26 25 26 25
авг. 29 28 27 28 28 27 26 28 26
сен 24 23 23 26 24 24 24 22 21
окт. 20 22 20 22 20 19 20 22
Ноябрь 18 17 16 17 16 15 14 15
Декабрь 15 13 13 14 13 10 13 11
Фон строк (TR) рисуется перед фоном столбцов (COL), поэтому, если вы хотите быть уверены, что фон столбцы видны, вы не должны устанавливать фон на ряды.
CSS: селектор nth-child ()

Пример
Укажите цвет фона для каждого элемента
, который является вторым дочерним элементом его родитель:
p: nth-ребенок (2) {
фон: красный;
}
Попробуй сам »
Дополнительные примеры «Попробуйте сами» ниже.
Определение и использование
Селектор : nth-child ( n ) соответствует каждому элементу, который является n -м дочерним элементом, независимо от тип своего родителя.
n может быть числом, ключевым словом или формулой.
Совет: Посмотрите на: nth-of-type () селектор для выбора элемента, который является n -м дочерним элементом, определенного тип своего родителя.
Поддержка браузера
Числа в таблице указывают первую версию браузера, полностью поддерживающую селектор.
Селектор
: nth-child () 4.0 9,0 3,5 3,2 9,6
Синтаксис CSS
: nth-child ( номер ) {
объявления css ;
} Демо
Другие примеры
Пример
Четные и нечетные ключевые слова, которые можно использовать для сопоставления дочерних элементов, индекс которых нечетное или четное (индекс первого потомка равен 1).
Здесь мы указываем два разных цвета фона для нечетных и четных элементов p:
p: nth-child (нечетный) {
фон: красный;
}
p: nth-child (четный) {
фон: синий;
}
Попробуй сам »
Пример
По формуле ( an + b ).Описание: представляет собой размер цикла, n — счетчик (начинается с 0), а b — значение смещения.
Здесь мы указываем цвет фона для всех элементов p, индекс которых равен кратно 3:
p: n-й ребенок (3n + 0) {
фон: красный;
}
Попробуй сам »
CSS: селектор nth-of-type ()

Пример
Укажите цвет фона для каждого элемента
, который является вторым элементом p своего родителя:
p: n-й тип (2) {
фон: красный;
}
Попробуй сам »
Дополнительные примеры «Попробуйте сами» ниже.
Определение и использование
Селектор : nth-of-type ( n ) соответствует каждому элементу, который является n -м дочерним элементом определенного типа его родитель.
n может быть числом, ключевым словом или формулой.
Совет: Посмотрите на селектор: nth-child () для выбора элемента, который является n -м дочерним элементом, независимо от тип своего родителя.
Поддержка браузера
Числа в таблице указывают первую версию браузера, полностью поддерживающую селектор.
Селектор
: nth-of-type () 4,0 9,0 3,5 3,2 9,6
Синтаксис CSS
: nth-of-type ( номер ) {
объявления css ;
} Демо
Другие примеры
Пример
Четные и нечетные ключевые слова, которые можно использовать для сопоставления дочерних элементов, индекс которых нечетное или четное (индекс первого потомка равен 1).
Здесь мы указываем два разных цвета фона для нечетных и четных элементов p:
p: nth-of-type (нечетный) {
фон: красный;
}
p: nth-of-type (четное) {
фон: синий;
}
Попробуй сам »
Пример
По формуле ( an + b ). Описание: представляет собой размер цикла, n — счетчик (начинается с 0), а b — значение смещения.
Здесь мы указываем цвет фона для всех элементов p, индекс которых равен кратно 3:
p: n-й тип (3n + 0) {
фон: красный;
}
Попробуй сам »
: nth-of-type | CSS-уловки
Селектор : nth-of-type позволяет выбрать один или несколько элементов на основе их исходного порядка в соответствии с формулой. Он определен в спецификации CSS Selectors Level 3 как «структурный псевдокласс», что означает, что он используется для стилизации контента на основе его отношений с родительскими и родственными элементами.
Предположим, что у нас есть неупорядоченный список, и мы хотим «зебра-полоса» чередовать элементы списка:
Первый элемент Второй элемент Третий пункт Четвертый пункт Пятый пункт
Вместо добавления классов к каждому элементу списка (например, .even и .odd ) мы можем использовать : nth-of-type :
li { фон: slategrey; } / * выбираем чередующиеся элементы, начиная со второго * / li: nth-of-type (2n) { фон: lightslategrey; }
Как видите, : nth-of-type принимает аргумент: это может быть одно целое число, ключевые слова «четный» или «нечетный» или формула, как показано выше.Если указано целое число, выбирается только один элемент, но ключевые слова или формула будут перебирать все дочерние элементы родительского элемента и выбирать соответствующие элементы — аналогично навигации по элементам в массиве в JavaScript. Ключевые слова «четный» и «нечетный» просты, но формула построена с использованием синтаксиса an + b , где:
«a» — целое число
«n» — буквальная буква «n»
«+» — оператор и может быть «+» или «-»
«b» является целым числом и требуется, если в формулу включен оператор
Важно отметить, что эта формула является уравнением и проходит через каждый родственный элемент, определяя, какой из них будет выбран.Часть формулы «n», если она присутствует, представляет собой набор возрастающих положительных целых чисел (точно так же, как итерация по массиву). В нашем примере выше мы выбрали каждый второй элемент с формулой 2n , которая работала, потому что каждый раз, когда элемент проверялся, «n» увеличивалось на единицу (2 × 0, 2 × 1, 2 × 2, 2 × 3, так далее). Если порядок элементов соответствует результату уравнения, он будет выбран (2, 4, 6 и т. Д.). Для более подробного объяснения используемых математических вычислений, пожалуйста, прочтите эту статью.
Для дальнейшей иллюстрации, вот несколько примеров действительных селекторов : nth-of-type :
Оцените эту ручку!
К счастью, не всегда нужно делать математику самостоятельно — существует несколько тестеров и генераторов : nth-of-type :
Достопримечательности
: nth-of-type выполняет итерацию по элементам, начиная с вершины исходного порядка.Единственная разница между ним и : nth-last-of-type заключается в том, что последний выполняет итерацию по элементам , начиная с нижней части исходного порядка .
Селектор : nth-of-type очень похож на : nth-child , но с одним критическим отличием : он более конкретен. В нашем примере выше они дадут тот же результат, потому что мы перебираем только li элементов, но если бы мы перебирали более сложную группу братьев и сестер, : nth-child попытался бы сопоставить всех братьев и сестер, а не только братьев и сестер. того же типа элемента.Это раскрывает силу : nth-of-type — он нацелен на конкретный тип элемента в расположении по отношению к аналогичным братьям и сестрам, а не ко всем братьям и сестрам .
Сопутствующие объекты
Другие ресурсы
Поддержка браузера
Хром Safari Firefox Opera IE Android iOS
Завод 3.2+ Работает 9,5+ 9+ Работает Работает
: nth-of-type был представлен в модуле CSS Selectors Module 3, что означает, что старые версии браузеров не поддерживают его. Однако поддержка современных браузеров безупречна, а новые псевдоселекторы широко используются в производственных средах. Если вам нужна более старая поддержка браузера, используйте polyfill для IE или используйте эти селекторы некритическими способами, например, с прогрессивным улучшением, что рекомендуется.
: энный ребенок | CSS-уловки
Селектор : nth-child позволяет выбрать один или несколько элементов на основе их исходного порядка в соответствии с формулой.
/ * Выбрать первый элемент списка * / li: nth-child (1) {} / * Выбираем 5-й элемент списка * / li: nth-child (5) {} / * Выбираем все остальные элементы списка, начиная с первого * / li: nth-child (нечетное) {} / * Выбираем каждый третий элемент списка, начиная с первого * / li: nth-child (3n - 2) {} / * Выбираем каждый третий элемент списка, начиная со второго * / li: nth-child (3n - 1) {} / * Выбираем каждый третий дочерний элемент, если он имеет класс "el" * / .el: nth-child (3n) {}
Он определен в спецификации CSS Selectors Level 3 как «структурный псевдокласс», что означает, что он используется для стилизации контента на основе его отношений с родительскими и родственными элементами.
Предположим, мы создаем сетку CSS и хотим удалить поля на каждом четвертом модуле сетки. Вот этот HTML:
<раздел> Один Два Три Четыре Пять
Вместо того, чтобы добавлять класс к каждому четвертому элементу (например,грамм. . Последний ), мы можем использовать : nth-child :
.module: nth-child (4n) { поле справа: 0; }
Селектор : nth-child принимает аргумент: это может быть одно целое число, ключевые слова четное , нечетное или формула. Если указано целое число, выбирается только один элемент, но ключевые слова или формула будут перебирать все дочерние элементы родительского элемента и выбирать соответствующие элементы — аналогично навигации по элементам в массиве JavaScript.Ключевые слова «четный» и «нечетный» являются простыми (2, 4, 6 и т. Д. Или 1, 3, 5 соответственно). Формула построена с использованием синтаксиса an + b , где:
«a» — целое число
«n» — буквальная буква «n»
«+» — оператор и может быть либо «+», либо «-».
«b» — целое число и требуется, если в формулу включен оператор
Важно отметить, что эта формула является уравнением и проходит через каждый родственный элемент, определяя, какой из них будет выбран.Часть формулы «n», если она присутствует, представляет собой набор возрастающих положительных целых чисел (точно так же, как итерация по массиву). В нашем примере выше мы выбрали каждый четвертый элемент по формуле 4n , которая работала, потому что каждый раз, когда элемент проверялся, «n» увеличивалось на единицу (4 × 0, 4 × 1, 4 × 2, 4 × 3, так далее). Если порядок элементов соответствует результату уравнения, он будет выбран (4, 8, 12 и т. Д.). Для более подробного объяснения используемых математических вычислений, пожалуйста, прочтите эту статью.
Для дальнейшей иллюстрации, вот несколько примеров действительных селекторов : nth-child :
К счастью, не всегда нужно делать математику самостоятельно — существует несколько тестеров и генераторов : nth-child :
: nth-child (an + b of
) Существует малоизвестный фильтр, который можно добавить к : nth-child в соответствии со спецификацией CSS Selectors: возможность выбрать : nth-child из подмножества элементов, используя формат из .Предположим, у вас есть список смешанного содержимого: у некоторых есть класс .video , у некоторых — класс .picture , и вы хотите выбрать первые 3 изображения. Вы можете сделать это с помощью фильтра «из», например: : nth-child (-n + 3 of .picture) { / * Выбирает первые 3 элемента применяется не ко ВСЕМ детям, а только для тех, кто соответствует .picture * / } Обратите внимание, что это отличается от добавления селектора непосредственно к селектору : nth-child : .picture: nth-child (-n + 3) { / * Не то же самое! Это относится к элементам, совпадающим с .picture который _также_ соответствует: nth-child (-n + 3) * / } Это может немного запутать, поэтому пример может помочь проиллюстрировать разницу: Браузер поддерживает фильтр «of» очень ограниченно: на момент написания этой статьи только Safari поддерживал синтаксис. Чтобы проверить статус вашего любимого браузера, вот открытые вопросы, связанные с : nth-child (an + b of s) : Достопримечательности : nth-child выполняет итерацию по элементам, начиная с вершины исходного порядка.Единственная разница между ним и : nth-last-child заключается в том, что последний выполняет итерацию по элементам , начиная с нижней части исходного порядка . Синтаксис для выбора первого числа элементов n немного противоречит интуиции. Вы начинаете с -n плюс положительное количество элементов, которые хотите выбрать. Например, li: nth-child (-n + 3) выберет первые 3 элемента li . Селектор : nth-child очень похож на : nth-of-type , но с одним критическим отличием : он менее специфичен.В нашем примере выше они дадут тот же результат, потому что мы перебираем только элементов .module , но если бы мы перебирали более сложную группу братьев и сестер, : nth-child попытался бы сопоставить всех братьев и сестер, а не только братья и сестры одного и того же типа элемента. Это раскрывает мощь : nth-child — он может выбрать любой родственный элемент в расположении, не только элементы, указанные перед двоеточием . Сопутствующие объекты Другие ресурсы Поддержка браузера Хром Safari Firefox Opera IE Android iOS Любая 3.2+ Любая 9,5+ 9+ Любая Любая : nth-child был представлен в модуле CSS Selectors Module 3, что означает, что старые версии браузеров не поддерживают его. Однако поддержка современных браузеров безупречна, а новые псевдоселекторы широко используются в производственных средах. Если вам нужна более старая поддержка браузера, используйте polyfill для IE или используйте эти селекторы некритическими способами, например, с прогрессивным улучшением, что рекомендуется. Селекторы псевдоклассов — Мастерская по макету CSS Селектор псевдокласса действует так, как если бы вы добавили класс к элементу в вашей разметке. Мастерская по макету CSS: селекторы псевдоклассов Вы, вероятно, знакомы по крайней мере с двумя селекторами псевдокласса, теми, которые мы используем для выбора состояний ссылки. a: ссылка {} а: посетил {} Эти селекторы работают так, как если бы они добавляли класс в зависимости от состояния ссылки. В этом случае независимо от того, посещена ли ссылка или нет. Другие псевдоклассы, которые мы можем использовать для ссылки, на самом деле являются динамическими псевдоклассами . Они применяются в зависимости от того, что происходит в документе. Ссылка, на которую наведен курсор, добавлена вкладка или активирована. a: наведение {} a: active {} a: focus {} Чтобы использовать псевдокласс, мы добавляем его к элементу, на который хотим нацелиться, с помощью двоеточия : . У нас есть несколько других полезных псевдоклассов, с которыми можно поиграть. : первенец Целевой элемент, если он является первым дочерним элементом родительского элемента. Селектор first-child был частью CSS2.1. В этом примере у нас есть набор абзацев. Абзац первый. Абзац второй Чтобы применить CSS только к первому абзацу внутри оболочки , мы используем селектор first-child. .wrapper p: first-child {} Это работает, только если есть элемент абзаца как первый элемент непосредственно внутри этого контейнера. Если мы добавим здесь заголовок первого уровня, то селектор first-child больше не будет выбирать абзац. : последний ребенок Целевой элемент, когда он является последним дочерним элементом родительского элемента. Спецификация Selectors Level 3 принесла нам несколько новых селекторов псевдокласса. Селектор last-child похож на first-child, за исключением того, что он нацелен на последнего дочернего элемента родителя. .wrapper p: last-child {} Это может быть удобно для таких вещей, как удаление нижней границы из списка или поля из последнего элемента. : ребенок Выберите несколько элементов в соответствии с их положением в дереве документа. Селектор nth-child действительно очень полезен. Простым примером является использование этого селектора для чередования строк таблицы. <таблица> Имя Любимый цвет Любимое животное Рэйчел Пурпурный Кот Джо Розовый Альбатрос Элоиза Зеленый Слаг Мы можем применить CSS к нечетным строкам с помощью следующего селектора. tr: nth-child (odd) {} Или четных строк: tr: nth-child (четный) {} Эти ключевые слова — не единственный способ использовать nth-child. Мы можем настроить таргетинг на конкретную строку. Этот селектор только выберет строку 2. tr: nth-child (2) {} Значение ключевого слова odd равно этому селектору, в котором мы выбираем первый элемент и каждый второй элемент после него. tr: nth-child (2n + 1) td {} Есть несколько отличных ресурсов, которые помогут вам понять, как работает nth-child.Вместо того, чтобы воспроизводить все это, взгляните на: : n-й тип Выберите несколько элементов в соответствии с их положением в дереве документа, НО только те элементы, которые совпадают с типом, к которому применяется правило. После того, как вы изучили, как работает nth-child, вы можете использовать тот же синтаксис для nth-of-type . Этот селектор выбирает только те элементы, которые относятся к тому же типу, что и элемент, к которому он применяется. В моем примере ниже показаны заголовки и абзацы. Чтобы применить CSS ко всем остальным абзацам, но игнорировать заголовки, я мог бы использовать следующий селектор. p: nth-of-type (odd) {} : единственный ребенок Псевдокласс only-child будет соответствовать, если элемент является единственным дочерним элементом родительского — например, список только с одним элементом списка. li: только ребенок {} Это может быть полезным селектором при проектировании переменного количества контента, поступающего из CMS. : пусто Пустой псевдокласс будет соответствовать, если элемент полностью пуст или содержит только комментарий HTML. п: пусто {} Не будет совпадать, если внутри элемента есть пробелы. Пустой псевдокласс будет соответствовать первым двум, но не последнему абзацу. : не Псевдокласс , а не позволяет вам что-то делать, если селектор не совпадает.Селектор, который вы хотите исключить, находится внутри круглых скобок. В приведенном ниже примере мы делаем шрифт жирным, если он не находится внутри td с классом animal . td: not (.animal) { font-weight: жирный; } Как установить альтернативный цвет строки таблицы с помощью CSS? < html >
< головка 02
35
Установить альтернативную строку в таблице
title >

<035 style 30 96359 граница-обрушение: обрушение;
ширина: 100%;
}

th, td {
выравнивание текста: слева;
отступ: 8 пикселей;
}

tr: nth-child (odd) {
цвет фона: светло-зеленый;
}
стиль >
головка >

< таблица > < tr > < th th 6> 9 < th > Обозначение th > < th > Заработная плата th > 3 tr > < tr > < td > Стив td > < 6356356> 6 < td > 1, 00, 000 td > tr > 56 < tr > < td > SURAJ td > / помощник менеджера > < td > 50, 000 td > tr > < tr > 9038 9038 9038 > < td > Analysist td > < td 6 000 < tr > < tr > 6 903 > < td > Wor ker td > < td > 20, 000 td > < tr > < td > Saksham td td 6356 td > < td > 20, 000 td > 2 2 стол > корпус > 9063 5 < html > .

Значение	Номера элементов	Описание
`1`	1	Первый элемент, является синонимом псевдокласса `:first-child`
`5`	5	Пятый элемент
`2n`	2, 4, 6, 8, 10,…	Все чётные элементы, аналог значения even
`2n+1`	1, 3, 5, 7, 9,…	Все нечётные элементы, аналог значения `odd`
`3n`	3, 6, 9, 12, 15,…	Каждый третий элемент
`3n+2`	2, 5, 8, 11, 14,…	Каждый третий элемент, начиная со второго
`n+4`	4, 5, 6, 7, 8,…	Все элементы, кроме первых трёх
`-n+3`	3, 2, 1	Первые три элемента
`5n-2`	3, 8, 13, 18, 23,…	—
`even`	2, 4, 6, 8, 10,…	Все чётные элементы
`odd`	1, 3, 5, 7, 9,…	Все нечётные элементы

Название	Цена	Количество	Итого
Кружка	$10.00	5	$50.00
Рубашка	$20.00	5	$100.00
Ножницы	$9.00	4	$36.00
Промежуточный итог			$186.00
Доставка			$12.00
Всего			$198.00

Название	Цена	Количество	Итого
Кружка	$10. 00	5	$50.00
Рубашка	$20.00	5	$100.00
Ножницы	$9.00	4	$36.00
Промежуточный итог			$186.00
Доставка			$12.00
Всего			$198.00

Значение	Описание
число	Положительное число начиная с 1. Задает номер элемента, к которому мы хотим обратиться. Нумерация элементов начинается с 1.
odd	Нечетные элементы.
even	Четные элементы.
выражение	Можно составлять специальные выражения с буквой n, которая обозначает все целые числа от нуля (не от единицы!) до бесконечности. Так, 2n — значит все четные числа (начиная со второго). Как это понять? Подставляем в n последовательно числа от 0 и так далее: если n = 0, то 2n даст 0 — такого элемента нет (нумерация элементов с 1!), если n = 1, то 2n даст 2 — второй элемент, если n = 2, 2n дает 4 — четвертый элемент. Если написать 3n — это будет каждый третий элемент (начиная с третьего!), и так далее.

Месяц	’94	’95	’96	’97	’98	’99	’00	’01	’02
янв.	14	13	14	13	14	11	11	11	11
фев	13	15	12	15	15	12	14	13	13
мар.	16	15	14	17	16	15	14	15	15
Апрель	17	16	17	17	17	15	15	16	16
Май	21	20	20	21	22	20	21	20	19
июн.	24	23	25	24	25	23	25	23	24
июл.	29	28	26	26	27	26	25	26	25
авг.	29	28	27	28	28	27	26	28	26
сен	24	23	23	26	24	24	24	22	21
окт.	20	22	20	22	20	19	20	22
Ноябрь	18	17	16	17	16	15	14	15
Декабрь	15	13	13	14	13	10	13	11