Html nth child: Псевдоклассы CSS: nth-child и nth-of-type
как использовать CSS селектор nth-child
От автора: приветствую вас в нашей серии уроков CSS от А до Я! В этой серии я расскажу вам про CSS значения и свойства, начинающиеся с различных букв алфавита. Иногда обучающего ролика бывает недостаточно, и в этой статье я дам вам пару быстрых советов по работе с псевдоклассом nth-child.
N значит nth-child
В CSS есть множество мощных селекторов, с помощью которых можно находить элементы на странице и применять к ним стили.
Из-за гибкости выражения для нахождения элементов по шаблону (an+b) псевдокласс nth-child, возможно, является самым мощным. Более подробно данный псевдокласс был разобран в видеоуроке. В этом уроке мы узнаем, когда лучше использовать nth-child, а когда лучше обойтись обычным классом.
Когда нужно использовать nth-child?
Этот вопрос мне очень часто задают студенты. К сожалению, это зависит от ситуации. Это первое, что необходимо учесть. Но я постараюсь дать вам пару базовых критериев.
Во-первых, все селекторы типа nth-child поддерживаются только в IE9 и выше (исключение :first-child). То есть первым делом необходимо определиться с диапазоном браузеров, с которыми вы будете работать. Если вам придется работать с IE8, вы можете использовать обычные классы или :first-child.
Совет 1: если вы поддерживаете IE8, используйте :first-child
Представьте, что у вас есть горизонтальный маркированный список со ссылками меню. По дизайну справа от каждой ссылки должна быть рамка, но кроме последней ссылки.
Практический курс по верстке адаптивного сайта с нуля!
Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3
Узнать подробнее
Не нужно добавлять рамку справа и затем удалять ее на последнем элементе. Лучше добавьте рамку слева и удалите ее у первого элемента.
.site-nav li {
border-left: 2px solid grey;
}
.site-nav li:first-child {
border: 0;
}
.site-nav li { border-left: 2px solid grey; } .site-nav li:first-child { border: 0; } |
Так же можно поступить и для верхних и нижних рамок. Если же вам посчастливилось не поддерживать IE8, читайте дальше…
Совет 2: используйте вместо классов :first-child и :last-child
Если вы создаете или используете готовую сетку, и вам нужно сделать что-то с первой и последней ячейками в ряду, воспользуйтесь псевдоклассами :first-child и :last-child вместо классов типа .first и .last в HTML.
Так ваш HTML код будет выглядеть чище, и вам не придется слишком много думать во время разработки макета. Иногда макеты бывают очень сложными. Чем меньше вам нужно думать над ним, тем лучше.
Совет 3: используйте nth-child для альтернативных стилей
Классический пример альтернативных стилей – разный фон для четных и нечетных строк в таблице. Еще один пример – обтекание четных и нечетных блоков контента по левому и правому краю на странице или в контейнере (нить комментариев или диалог).
Практический курс по верстке адаптивного сайта с нуля!
Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3
Узнать подробнее
В таких случаях я использую :nth-child(odd) и :nth-child(even). Чтобы не засорять код, пропишите первое состояние без nth-child, после чего уже используйте nth-child с большей специфичностью для альтернативных стилей.
/* вот так */
.data-table tr {
background: white;
}
.data-table tr:nth-child(even) {
background: lightgrey;
}
/* а не так */
.data-table tr:nth-child(odd) {
background: white;
}
.data-table tr:nth-child(even) {
background: lightgrey;
}
/* вот так */ .data-table tr { background: white; } .data-table tr:nth-child(even) { background: lightgrey; }
/* а не так */ .data-table tr:nth-child(odd) { background: white; } .data-table tr:nth-child(even) { background: lightgrey; } |
Совет 4: избегайте странных и сложных выражений с nth-child
Для более сложных выборок на странице я предпочитаю прописывать классы напрямую в HTML, а не работать с запутанными выражениями nth-child.
Выражения типа li:nth-child(-n+3) или li:nth-child(5n+1):not(nth-child(3n-1)) слишком сложны для понимания. Понятия не имею, что они значат, но они работают!
К сожалению, в некоторых сложных дизайнах без таких выражений не обойтись. Но представьте, что вы вернетесь к коду через пару месяцев и попытаетесь понять, что вы хотели сделать. Даже у опытных экспертов по CSS на это уйдет довольно много времени!
Совет 5: используйте nth-child, когда не можете контролировать HTML
Может прозвучать странно. И действительно, мы, как разработчики и дизайнеры, должны контролировать HTML. Это наша главная задача. Но тут я говорю о системах управления контентом.
При создании шаблона для сайта на CMS у вас будет возможность контролировать HTML структуру и создавать классы и атрибуты. Однако иногда в ваших шаблонах будут такие места, куда будет вставляться контент из текстовых полей или областей из самой CMS. Классический пример – WP the_content – один большой кусок HTML, который вы либо плохо контролируете, либо не контролируете вообще.
В этой ситуации вам помогут :first-child, :last-child и :nth-child. Вот и все, 5 советов по тому, как использовать или не использовать самые мощные и гибкие CSS селекторы.
Автор: Guy Routledge
Источник: https://www.sitepoint.com/
Редакция: Команда webformyself.
Практический курс по верстке адаптивного сайта с нуля!
Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3
Узнать подробнее
PSD to HTML
Практика верстки сайта на CSS Grid с нуля
Смотреть
Как работает CSS-селектор nth-child | CSS-Tricks по-русски
Как работает CSS-селектор nth-child
В CSS существует селектор, если быть более точным, псевдо-селектор, называемый nth-child. Пример его использования:
ul li:nth-child(3n+3) {
color: #ccc;
}
Вышеприведённый CSS делает следующее: применяет стиля для каждого третьего элемента ненумерованного списка. А именно 3-го, 6-го, 9-го, 12-го и т.д. Но как это работает? А также какую выгоду можно извлечь используя nth-child?
Основной смысл заключается в выражении в скобках. nth-child принимает два ключевых слова: even (чётный) и odd (нечётный). Смысл их абсолютно ясен. Even выбирает чётные элементы (2, 4, 6), odd — нечётные (1, 3, 5).
Как показано в примере выше, nth-child может обрабатывать выражения. Какое самое простое возможное выражение? Просто число. Если вы напишите какое-нибудь число в скобках, то будет выбран один единственный элемент. Например, выберем пятый элемент списка:
ul li:nth-child(5) {
color : #ccc;
}
Вернёмся к нашему первому примеру, в котором мы использовали выражение (3n+3). Как он работает? Почему он выбирает каждый третий элемент? Вся суть в переменной n. Она принимает целые значения от нуля и больше. Давайте рассмотрим подробнее:
(3 x 0) + 3 = 3 = 3-ий элемент
(3 x 1) + 3 = 6 = 6-ой элемент
(3 x 2) + 3 = 9 = 9-ый элемент
и т.д.
Теперь попробуем следующее выражение: nth-child(2n+1):
(2 x 0) + 1 = 1 = 1-ый элемент
(2 x 1) + 1 = 3 = 3-ий элемент
(2 x 2) + 1 = 5 = 5-ый элемент
и т.д.
В итоге получили тоже самое что и в случае с odd, таким образом нет нужды часто использовать такое выражение. Более того, наш первый пример тоже можно упростить и использовать вместо оригинального выражения (3n+3), выражение (3n):
(3 x 0) + 0 = 0 = нет соответствия
(3 x 1) + 0 = 3 = 3-ий элемент
(3 x 2) + 0 = 6 = 6-ой элемент
и т.д.
Как видите, результат тот же, но не надо писать «+3». Также мы можем использовать отрицательные значения в выражении. Например, 4n-1:
(4 x 0) - 1 = -1 = нет соответствия
(4 x 1) - 1 = 3 = 3-ий элемент
(4 x 2) - 1 = 7 = 7-ой элемент
и т.д.
Использование отрицательных значений для коэффициента при n, выглядит слегка странно, потому что в случае отрицательного результата не будет найдено соответствие. Вам надо будет постоянно изменять выражение, чтобы добавить положительных элементов. Как оказалось, этот подход очень удобен для выбора первых n элементов. Рассмотрим пример с «-n+3»:
-0 + 3 = 3 = 3ий элемент
-1 + 3 = 2 = 2-ой элемент
-2 + 3 = 1 = 1-ый элемент
-3 + 3 = 0 = нет соответствия
Кроссбраузерность
nth-child является одним из тех самых несчастных атрибутов, которые являются полностью кроссбраузерными, за исключением абсолютного нуля в IE, даже 8-ой версии. Поэтому, когда речь заходит о его использовании, то если ожидаемый результат — это в некотором роде визуальный эффект (например раскраска строк некой таблицы), то это идеальный подход. Но, вероятно, не стоит использовать его для чего-то более важного, что может повлиять, например, на корректность вёрстки.
Конечно, если вы используете jQuery, то вам не стоит переживать по этому поводу, так как jQuery работает даже в Internet Explorer.
Ну и напоследок
Вы можете поиграть с различными выражениями для селектора на страничке с примером.
CSS3 | Псевдоклассы дочерних элементов
Псевдоклассы дочерних элементов
Последнее обновление: 21.04.2016
Особую группу псевдоклассов образуют псевдоклассы, которые позволяют выбрать определенные дочерние элементы:
:first-child: представляет элемент, который является первым дочерним элементом
:last-child: представляет элемент, который является последним дочерним элементом
:only-child: представляет элемент, который является единственным дочерним элементом в каком-нибудь контейнере
:only-of-type: выбирает элемент, который является единственным элементом определенного типа (тега) в каком-нибудь контейнере
:nth-child(n): представляет дочерний элемент, который имеет определенный номер n, например, второй дочерний элемент
:nth-last-child(n): представляет дочерний элемент, который имеет определенный номер n, начиная с конца
:nth-of-type(n): выбирает дочерний элемент определенного типа, который имеет определенный номер
:nth-last-of-type(n): выбирает дочерний элемент определенного типа, который имеет определенный номер, начиная с конца
Псевдокласс first-child
Используем псевдокласс first-child для выбора первых ссылок в блоках:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Селекторы в CSS3</title> <style> a:first-child{ color: red; } </style> </head> <body> <h4>Планшеты</h4> <div> <a>Microsoft Surface Pro 4</a><br/> <a>Apple iPad Pro</a><br/> <a>ASUS ZenPad Z380KL</a> </div> <h4>Смартфоны</h4> <div> <p>Топ-смартфоны 2016</p> <a>Samsung Galaxy S7</a><br/> <a>Apple iPhone SE</a><br/> <a>Huawei P9</a> </div> </body> </html>
Стиль по селектору a:first-child
применяется к ссылке, если она является первым дочерним элементом любого элемента.
В первом блоке элемент ссылки является первым дочерним элементом, поэтому к нему применяется определенный стиль.
А во втором блоке первым элементом является параграф, поэтому ни к одной ссылке не применяется стиль.
Псевдокласс last-child
Используем псевдокласс last-child
:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Селекторы в CSS3</title> <style> a:last-child{ color: blue; } </style> </head> <body> <h4>Смартфоны</h4> <div> <a>Samsung Galaxy S7</a><br/> <a>Apple iPhone SE</a><br/> <a>Huawei P9</a> </div> <h4>Планшеты</h4> <div> <a>Microsoft Surface Pro 4</a><br/> <a>Apple iPad Pro</a><br/> <a>ASUS ZenPad Z380KL</a> <p>Данные за 2016</p> </div> </body> </html>
Селектор a:last-child
определяет стиль для ссылок, которые являются последними дочерними элементами.
В первом блоке как раз последним дочерним элементом является ссылка. А вот во втором последним дочерним элементом является параграф, поэтому во
втором блоке стиль не применяется ни к одной из ссылок.
Селектор only-child
Селектор :only-child выбирает элементы, которые являются единственными дочерними элементами в контейнерах:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Селекторы в CSS3</title> <style> p:only-child{ color:red; } </style> </head> <body> <h3>Заголовок</h3> <div> <p>Текст1</p> </div> <div> <p>Текст2</p> <p>Текст3</p> </div> <div> <p>Текст4</p> </div> </body> </html>
Параграфы с текстами «Текст1» и «Текст4» являются единственными дочерними элементами в своих внешних контейнерах, поэтому к ним применяется стиль — красный цвет шрифта.
Псевдокласс only-of-type
Псевдокласс only-of-type выбирает элемент, который является единственным элементом определенного типа в контейнере. Например, единственный элемент div, при этом
элементов других типов в этом же контейнере может быть сколько угодно.
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Селекторы в CSS3</title> <style> span:only-of-type{ color: green; /* зеленый цвет */ } p:only-of-type{ color: red; /* красный цвет */ } div:only-of-type{ color: blue; /* синий цвет */ } </style> </head> <body> <div> Header </div> <p>Единственный параграф и <span>элемент спан</span></p> <div> Footer </div> </body> </html>
Хотя для элементов div определен стиль, он не будет применяться, так как в контейнере body находится два элемента div, а не один. Зато в body есть
только один элемент p, поэтому он получит стилизацию. И также в контейнере p есть только один элемент span, поэтому он также будет стилизован.
Псевдокласс nth-child
Псевдокласс nth-child позволяет стилизовать каждый второй, третий элемент, только четные или только нечетные элементы и т.д.
Например, стилизуем четные и нечетные строки таблицы:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Селекторы в CSS3</title> <style> tr:nth-child(odd) { background-color: #bbb; } tr:nth-child(even) { background-color: #fff; } </style> </head> <body> <h4>Смартфоны</h4> <table> <tr><td>Samsung</td><td>Galaxy S7 Edge</td><td>60000</td></tr> <tr><td>Apple</td><td>iPhone SE</td><td>39000</td></tr> <tr><td>Microsoft</td><td>Lumia 650</td><td>13500</td></tr> <tr><td>Alcatel</td><td>Idol S4</td><td>30000</td></tr> <tr><td>Huawei</td><td>P9</td><td>60000</td></tr> <tr><td>HTC</td><td>HTC 10</td><td>50000</td></tr> <tr><td>Meizu</td><td>Pro 6</td><td>40000</td></tr> <tr><td>Xiaomi</td><td>Mi5</td><td>35000</td></tr> </table> </body> </html>
Чтобы определить стиль для нечетных элементов, в селектор передается значение «odd»:
tr:nth-child(odd){}
Для стилизации четных элементов в селектор передается значение «even»:
tr:nth-child(even){}
Также в этот селектор мы можем передать номер стилизуемого элемента:
tr:nth-child(3) { background-color: #bbb; }
В данном случае стилизуется третья строка.
Еще одну возможность представляет использование заменителя для номера, который выражается буквой n:
tr:nth-child(2n+1) { background-color: #bbb; }
Здесь стиль применяется к каждой второй нечетной строке.
Число перед n (в данном случае 2) представляет тот дочерний элемент, который будет выделен следующим. Число, которое идет после знака плюс,
показывают, с какого элемента нужно начинать выделение, то есть, +1 означает, что нужно начинать с первого дочернего элемента.
Таким образом, в данном случае выделение начинается с 1-го элемента, а следующим выделяется 2 * 1 + 1 = 3-й элемент, далее 2 * 2 + 1 = 5-й элемент и так далее.
К примеру, если мы хотим выделить каждый третий элемент, начиная со второго, то мы могли бы написать:
tr:nth-child(3n+2) { background-color: #bbb; }
Псевдокласс :nth-last-child по сути предоставляет ту же самую функциональность, только отсчет элементов идет не с начала, а с конца:
tr:nth-last-child(2) { background-color: #bbb; /* 2 строка с конца, то есть предпоследняя */ } tr:nth-last-child(2n+1) { background-color: #eee; /* нечетные строки, начиная с конца */ }
Псевдокласс nth-of-type
Псевдокласс :nth-of-type позволяет выбрать дочерний элемент определенного типа по определенному номеру:
tr:nth-of-type(2) { background-color: #bbb; }
Аналогично работает псевдокласс nth-last-of-type, только теперь отсчет элементов идет с конца:
tr:nth-last-of-type(2n) { background-color: #bbb; }
Разница между nth-child и nth-of-type — Как создать сайт
В чём разница между псевдоклассами :nth-child и :nth-of-type
При изучении псевдоклассов CSS, чаще всего не понятна разница между :nth-child и :nth-of-type, давайте проясним её.
Допустим нам нужно в HTML-документе, выбрать второй абзац статьи и сделать его фон серым:
<style> CSS-код... </style> <div> <p> Первый абзац...</p> <p> Второй абзац...</p> </div>
Если в CSS-код мы разместим:#content :nth-child(2) { background: gray; }
или#content :nth-of-type(2) { background: gray; }
,
то серым цветом выделится «Второй абзац…». Однако, если в наш HTML-документ добавить заголовок статьи h2
:
<style> CSS-код... </style> <div> <h2>Заголовок статьи 1</h2> <p> Первый абзац...</p> <p> Второй абзац...</p> </div>
То при использовании #content :nth-child(2) { background: gray; }
, серым цветом окрасится «Первый абзац…» (поскольку он является вторым элементом потомком в родителе #content
).
А при использовании #content :nth-of-type(2) { background: gray; }
, серым цветом окрасится «Второй абзац…», (поскольку он является вторым абзацем (типом) в родителе #content
).
Если добавить еще один заголовок h2
:
<style> CSS-код... </style> <div> <h2>Заголовок статьи 1</h2> <h2>Заголовок статьи 2</h2> <p> Первый абзац...</p> <p> Второй абзац...</p> </div>
То при применении псевдокласса #content :nth-child(2) { background: gray; }
, серым цветом окрасится «Заголовок статьи 2», а при применении псевдокласса #content :nth-of-type(2) { background: gray; }
, серым цветом окрасятся «Заголовок статьи 2» и «Второй абзац…».
Вот примерно такие моменты и разнят данные псевдоклассы, и даже если после этих примеров вам немного не понятно, то не переживайте. Ежедневно практикуясь в языке CSS, вы рано или поздно всё поймёте.
Спасибо за внимание 🙂
Следующий урок, расскажет о псевдоэлементах в CSS.
Дата публикации поста: 5 февраля 2016
Дата обновления поста: 26 октября 2014
Навигация по записям
css nth дочерний селектор для детей 2, 3, 6, 7, 10, 11, 14, 15 и т. Д.
Переполнение стека
- Около
Продукты
- Для команд
Переполнение стека
Общественные вопросы и ответыПереполнение стека для команд
Где разработчики и технологи делятся частными знаниями с коллегамиВакансии
Программирование и связанные с ним технические возможности карьерного ростаТалант
Нанимайте технических специалистов и создавайте свой бренд работодателяРеклама
Обратитесь к разработчикам и технологам со всего мира- О компании
.
html — получить n-й дочерний номер элемента в чистом JavaScript
Переполнение стека
- Около
Продукты
- Для команд
Переполнение стека
Общественные вопросы и ответыПереполнение стека для команд
Где разработчики и технологи делятся частными знаниями с коллегамиВакансии
Программирование и связанные с ним технические возможности карьерного ростаТалант
Нанимайте технических специалистов и создавайте свой бренд работодателяРеклама
Обратитесь к разработчикам и технологам со всего мира- О компании
.
селекторов css — CSS как использовать псевдокласс: не с: nth-child
Переполнение стека
- Около
Продукты
- Для команд
Переполнение стека
Общественные вопросы и ответыПереполнение стека для команд
Где разработчики и технологи делятся частными знаниями с коллегамиВакансии
Программирование и связанные с ним технические возможности карьерного ростаТалант
Нанимайте технических специалистов и создавайте свой бренд работодателяРеклама
Обратитесь к разработчикам и технологам со всего мира- О компании
Загрузка…
- Авторизоваться
зарегистрироваться текущее сообщество
.