CSS псевдоклассы: стилизация элементов по индексам

CSS псевдоклассы: стилизация элементов по индексам

От автора: в CSS есть селекторы для поиска элементов на основе их положения в дереве документа. Их называют индексными псевдоклассами, потому что они смотрят на положение элемента, а не на его тип, атрибуты или ID. Всего их пять.

first-child

last-child

only-child

nth-child()


Практика HTML5 и CSS3 с нуля до результата!

Получите бесплатный пошаговый видеокурс по основам адаптивной верстки с полного нуля на HTML5 и CSS3

nth-last-child()

:first-child и :last-child

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

Рассмотрим HTML и CSS ниже:

<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<title>:first-child and :last-child</title>
<style type="text/css">
body {
  font: 16px / 1.5 sans-serif;
}
:first-child {
  color: #e91e63; 
}
:last-child {
color: #4caf50;
}
</style> 
</head>
<body>
 <h2>List of fruits</h2>
  <ul>
  <li>Apples</li>
  <li>Bananas</li>
  <li>Blueberries</li>
  <li>Oranges</li>
  <li>Strawberries</li>
 </ul>
</body>
</html>

На скриншоте ниже показан результат.

CSS псевдоклассы: стилизация элементов по индексам

Заголовок h2 и первый li окрасились в розовый, так как :first-child не привязан к конкретным элементам. Тег h2 – первый ребенок тега body, а li – первый дочерний элемент ul. Но почему оставшиеся элементы li зеленые? Потому что :last-child тоже не привязан к конкретному элементу, а ul является последним дочерним элементом в теге body. По сути, в стилях выше мы прописали *:first-child и *:last-child.

Если добавить к :first-child и :last-child простой селектор, они станут конкретнее. Давайте ограничим нашу выборку только элементами списка. Замените :first-child на li:first-child и :last-child на li:last-child. На скриншоте ниже показан результат.

CSS псевдоклассы: стилизация элементов по индексам

:nth-child() и :nth-last-child()

Уметь выбирать первый и последний дочерние элементы в документе неплохо. А что если нужно выбрать четные или нечетные элементы? Может, нам нужно выбрать шестой элемент в дереве или применить стили к каждому третьему дочернему элементу. Здесь нам помогут псевдоклассы :nth-child() и :nth-last-child().

Как и :not, :nth-child() и :nth-last-child() также являются функциональными псевдоклассами. Они принимают один аргумент, который должен быть:

ключевым словом odd;

ключевым словом even;

целочисленным значением типа 2 или 8;

аргументом в форме Аn+B [5], где А – шаг, B – смещение, а n – переменная с положительным целочисленным числом.

Последний аргумент немного сложнее остальных. Разберем его чуть позже.

Чем отличаются :nth-child() и :nth-last-child()? Они отличаются точкой отсчета: :nth-child() считает вперед, а :nth-last-child() – назад. CSS индексы используют натуральные числа и начинаются с 1, а не с 0.

С помощью псевдоклассов :nth-child() и :nth-last-child() удобно создавать чередующиеся узоры. Полосатая таблица – идеальный пример использования. CSS ниже присваивает четным строкам в таблице светлый синевато-серый фон, результат можно посмотреть на скриншоте ниже:

tr:nth-child(even) {
  background: rgba(96, 125, 139, 0.1);
}

CSS псевдоклассы: стилизация элементов по индексам

Если переключиться с :nth-child на :nth-last-child, полосы инвертируются, так как отсчет начнется с низа. Смотрите скриншот ниже.

CSS псевдоклассы: стилизация элементов по индексам

А хотите что-нибудь посложнее, с более сложными аргументами? Давайте создадим документ с 20 элементами, как показано ниже.

CSS псевдоклассы: стилизация элементов по индексам

С помощью :nth-child() и :nth-last-child() можно выбрать один определенный элемент. Можно выбрать все дочерние элементы после заданной позиции, или можно выбрать элементы с кратностью со смещением. Давайте изменим фон шестого элемента:

.item:nth-child(6) {
  background: #e91e63;
}

Результат.

CSS псевдоклассы: стилизация элементов по индексам

А если нужно выбрать каждый третий элемент? Тут нам поможет синтаксис Аn+В:

.item:nth-child(3n) {
  background: #e91e63;
}

Еще раз, А – шаг. Это множитель для n, начинающийся с 1. То есть если А = 3, то 3n выберет третий, шестой и девятый элементы и т.д. Именно это можно наблюдать на скриншоте ниже.

CSS псевдоклассы: стилизация элементов по индексам

Здесь уже все немного интереснее. С помощью :nth-child() и :nth-last-child() можно выбрать все элементы после заданной точки. Давайте выберем все элементы кроме первых семи:

.item:nth-child(n+8) {
  background: #e91e63;
}

Здесь шаг не задан. Как результат, n+8 выбирает все элементы n, начиная с восьмого. Смотрите скриншот ниже.

CSS псевдоклассы: стилизация элементов по индексам

Замечание: отрицательное смещение

Отрицательные значения и диапазоны также валидны. Запись типа :nth-child(-n+8) инвертирует выборку и выбирает первые восемь элементов.

Практика HTML5 и CSS3 с нуля до результата!

Получите бесплатный пошаговый видеокурс по основам адаптивной верстки с полного нуля на HTML5 и CSS3

Узнать подробнее

С помощью смещения и шага можно выбрать каждый третий элемент, начиная с пятого:

.item:nth-child(3n+5) {
  background: #e91e63;
}

Результат.

CSS псевдоклассы: стилизация элементов по индексам

only-child

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

<ul>
 <li>Apple</li>
</ul>

<ul>
 <li>Orange</li>
 <li>Banana</li>
 <li>Raspberry</li>
</ul>

Селектор li:only-child{color: #9c27b0;} выберет <li>Apple</li>, так как это единственный дочерний элемент первого списка. Элементы второго списка в выборку не попадают, так как там три смежных элемента. Результат показан ниже.

CSS псевдоклассы: стилизация элементов по индексам

:empty

С помощью псевдокласса :empty можно выбрать элементы, у которых нет дочерних элементов. Псевдокласс :empty говорит сам за себя (empty от англ. «пустой»). Чтобы попасть в выборку :empty, элемент должен быть абсолютно пустым, не должно быть даже пробелов. То есть <p></p> попадает в выборку, а <p> </p> нет.

Иногда WYSIWYG редакторы вставляют пустые теги p в ваш контент. С помощью :empty и :not можно делать так, чтобы к этим элементам не применялись стили. Например, p:not(:empty).

Выбор элементов определенного типа по их индексу

Описанные в предыдущем разделе псевдоклассы выбирают элементы, если те занимают определенную позицию в дереве документа. Например, p:nth-last-child(2) выберет все теги p перед последним внутри родительского блока.

В этом разделе мы поговорим о типизированных индексных псевдоклассах. Эти псевдоклассы также выбирают элементы по значению индекса, но выбор ограничен определенным типом. Например, нужно выбрать пятый тег p или четные h2.

Существует пять таких псевдоклассов, имена которых полностью противоположны их нетипизированным коллегам:

first-of-type

last-of-type

only-of-type

nth-of-type()

nth-last-of-type()

Грань между ними и дочерними индексными псевдоклассами тонка. Запись p:nth-child(5) находит только пятый тег p, а запись p:nth-of-type(5) находит все теги p и вычленяет среди них пятый.

Давайте создадим другой документ. В нем также 20 элементов, только некоторые — это теги p, а другие – div. Теги p со скругленными углами, смотрите скриншот ниже.

CSS псевдоклассы: стилизация элементов по индексам

Использование first-of-type, last-of-type и only-type

С помощью :first-of-type можно выбрать первый элемент, подпадающий под селектор. Давайте изменим цвет первого p на зеленый:

p:first-of-type {
background: #cddc39;
}

Такая запись выберет все теги p, являющиеся первым дочерним элементом в родительском блоке. Смотрите скриншот ниже.

CSS псевдоклассы: стилизация элементов по индексам

Псевдокласс :last-of-type работает схожим образом. Выбирается последний элемент в родительском блоке. Посмотреть результат можно ниже. А only-of-type выберет элемент только, если он является единственным дочерним элементом такого типа внутри родительского блока. Показано ниже.

CSS псевдоклассы: стилизация элементов по индексам

CSS псевдоклассы: стилизация элементов по индексам

Разберем еще один пример использования :first-of-type, на этот раз с псевдоэлементом. Помните псевдоэлемент ::first-letter, о котором мы рассказывали ранее в этой главе? Как вы помните, с его помощью создавалась первая заглавная буква для всех элементов, к которым он применялся. А что если мы ограничим его действие только на первый параграф:

p:first-of-type::first-letter {
  font: bold italic 3em / .5 serif;
  color: #3f51b5;
}

На скриншоте ниже показано, что теперь только у первого параграфа заглавная буква, несмотря на наличие заголовка перед параграфом.

CSS псевдоклассы: стилизация элементов по индексам

Использование :nth-of-type и :nth-last-of-type

:nth-of-type() и :nth-last-of-type() также являются функциональными псевдоклассами. Они принимают те же аргументы, что и :nth-child() и :nth-last-child(). Однако как и :first-of-type и :last-of-type, индексы присваиваются только элементам одного типа. Например, чтобы выбрать первый тег p и все последующие, можно взять ключевое слово odd и :nth-of-type():

p:nth-of-type(odd) {
  background: #cddc39;
  color: #121212; 
}

На скриншоте ниже видно, что выбраны только нечетные теги p, а не просто нечетные элементы.

CSS псевдоклассы: стилизация элементов по индексам

Точно так же :nth-last-of-type(even) выберет четные теги p, но отсчет начнется с последнего p в документе. В нашем примере отсчет начнется с элемента 18 (см. ниже).

CSS псевдоклассы: стилизация элементов по индексам

Если до сих пор что-то осталось непонятно, поиграйтесь с инструментом Paul Maloney Nth-Test tool или посмотрите примеры на Nth Master. Оба проекта идеально подходят для изучения псевдоклассов.

Автор: Tiffany Brown

Источник: https://www.sitepoint.com/

Редакция: Команда webformyself.


Практика HTML5 и CSS3 с нуля до результата!

Получите бесплатный пошаговый видеокурс по основам адаптивной верстки с полного нуля на HTML5 и CSS3

Самые свежие новости IT и веб-разработки на нашем Telegram-канале

Практика HTML5 и CSS3 с нуля до результата!

Получите бесплатный пошаговый видеокурс по основам адаптивной верстки с полного нуля на HTML5 и CSS3

Получить

Метки:

Похожие статьи:

Комментарии Вконтакте:

Комментарии Facebook:

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Я не робот.

Spam Protection by WP-SpamFree