Псевдокласс optional в CSS


Содержание

CSS :: Псевдокласс :optional

Псевдокласс :optional (от англ. optional – необязательный) позволяет выбрать все необязательные для заполнения поля формы (у них отсутствует атрибут required ), например, input:optional <блок объявлений>.

Селектор псевдоклассов напоминает селектор классов, но в отличие от классов, псевдоклассы в разметке html -документа не указываются и отделяются от указанного в селекторе элемента двоеточием ‘:’ . При этом выбираются элементы необходимого типа, которые соответствуют требованиям указанного в селекторе псевдокласса.

Продвинутые CSS-селекторы, о которых вы не знали

В каскадных таблицах стилей элементам страницы присваиваются значения атрибутов id и CSS class для того, чтобы стилизовать их. Но что делать, если у вас нет доступа к коду, чтобы добавить эти? К счастью существуют динамические селекторы, которые являются единственным решением в этой ситуации.

Введение

Дальше я собираюсь рассказать о работе селекторов атрибутов, но рекомендую с самого начала применять идентификаторы и классы, так как использование селекторов не всегда полезно. В процессе поиска элемента ( CSS или JavaScript ) браузеру приходиться « обойти » весь DOM страницы, чтобы найти нужный.

При использовании селекторов атрибутов на поиск затрачивается больше ресурсов и времени. Поэтому не стоит злоупотреблять селекторами и применять вместо них CSS id или class . Их нужно использовать только в том случае, если нет другого выхода. Например, когда HTML-код генерируется динамически, и вы никак не можете добавить в него классы или идентификаторы.

Селекторы атрибутов

($=) – атрибут оканчивается определенным значением

Выбор элемента с помощью CSS , значение которого заканчивается определенным символом ( суффиксом ) выглядит следующим образом:

Атрибут id$ находится внутри скобок элемента div . Обратите внимание, что вместо тега div можно указать любой другой HTML-элемент от input до span и так далее. Этот пример идеально подойдет для выбора элемента, если суффикс внутри атрибутов формируется динамически.

Чтобы выбрать этот элемент div , нужно использовать следующий селектор:

Нам необходимо указать $ после id атрибута в скобках. Затем в кавычках добавить суффикс элемента, на который нацелились:

Этот селектор можно использовать для любых элементов ( div , span , img и т.д. ), а также любых их атрибутов ( id , name , value и class HTML CSS ).

(^=) — атрибут начинается с определенного значения

Можно выбирать элементы, значение атрибутов которых начинается с определенного префикса. Делается это по аналогии с описанным выше селектором ( $= ):

Селектор будет выглядеть следующим образом:

Единственное отличие двух описанных CSS class selector состоит в том, что перед знаком = (равно) указываются разные символы. В этом примере использован атрибут class , вместо id .

(* =) — атрибут содержит некоторое значение

Что делать, если и префикс и суффикс атрибутов генерируется динамически? В данном случае нужно найти элемент, значение атрибута которого содержит параметр:

Выбор этого элемента будет выглядеть следующим образом:

Таким образом, любой div , который содержит название класса “ logoutPanel ” будет выбран и к нему будут применены определенные стили.

(=) – атрибут со значением

Это еще один способ выбора элемента с определенным значением id , CSS class , name , value и т.д.:

Можно обратиться к элементу div , используя указанный выше атрибут = или через атрибут класса:

Краткий обзор селекторов атрибутов:

  • = значение атрибута эквивалентно определённым символам;
  • $= значение атрибута оканчивается определенными символами;
  • ^= значение атрибута начинается с определенных символов;
  • *= значение атрибута содержит определенные символы.

Псевдоклассы селекторов

Перед тем, как задать параметры class в CSS , нужно понимать, что псевдоклассы селекторов – это CSS селекторы с двоеточием перед ними. Многие из них часто используются для ссылок или интерактивных элементов:

Это удобно, когда необходимо получить доступ к каким-либо элементам, находящимся в определенном состоянии.

Псевдокласс :not(x)

Селектор псевдокласса :not(x) удаляет из набора определенные элементы на основе переданного параметра. Это полезно при стилизации всех элементов:

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

Можно пойти дальше и выбирать любые атрибуты.

Псевдоэлемент ::first-letter

В CSS кроме псевдоклассов существуют и псевдоэлементы. К ним как раз относится псевдоэлемент ::first-letter . С его помощью можно стилизовать первую букву любого абзаца. Этот эффект часто применяется в печатных изданиях. Создать заглавную букву при помощи псевдоэлемента ::first-letter довольно просто:

Если не хотите стилизовать первые буквы в каждом абзаце, можно выбрать только первый абзац во всем тексте. Для этого нужно использовать вместе псевдокласс и псевдоэлемент ( :first-child и ::first-letter ):

Этот подход освобождает от необходимости использования JavaScript .

Псевдокласс :first-of-type

Этот псевдокласс я использую довольно часто. Он позволяет выбрать первый элемент определенного типа внутри родительского и применить к нему CSS class :

Псевдокласс :last-of-type

:first-of-type не бывает без :last-of-type . Как вы уже наверное догадались, этот селектор работает противоположно селектору :first-of-type :

Заключение

Вы познакомились с « продвинутыми » CSS class selector , о которых не слышали раньше или никогда не сталкивались с ними. В любом случае я рекомендую вам ознакомиться с ними поближе и, возможно, вы будете чаще использовать их для решения своих повседневных задач по верстке.

Данная публикация представляет собой перевод статьи « Advanced CSS Selectors you never knew about » , подготовленной дружной командой проекта Интернет-технологии.ру

Псевдоклассы и псевдоэлементы для оформления элементов форм

Псевдоэлемент ::placeholder

Псевдоэлемент ::placeholder позволит вам оформить внешний вид текста, который выводится с помощью атрибута placeholder для любого текстового поля формы. Как правило, используются теги атрибутом type=»text» или «email» , но также их часто можно встретить в полях типа «url» или «search» :

Для того чтобы стилизовать псевдоэлемент ::placeholder пока еще необходимо использовать вендорные префиксы для разных браузеров:

Поддержку этого псевдоэлемента можно посмотреть на сайте caniuse.com

Пример ниже показывает, как можно изменить цвет шрифта во всех полях формы.

В примере поле с type=»search» имеет другой цвет текста в placeholder . Чтобы изменить цвет для определенного типа поля, необходимо записать стили этого псевдоэлемента так:

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

Если рассмотреть синтаксис чуть пристальней, то мы увидим, что часть браузеров использует псевдоэлемент ::placeholder с двумя двоеточиями, а другая часть — псевдокласс :placeholder с одним двоеточием перед названием.

Важный момент: в css-правилах вы можете использовать не все свойства, а только те, что перечислены ниже:

  • color
  • font и все связанные свойства ( font-size , font-family и т.д.)
  • text-decoration
  • text-indent
  • text-overflow
  • text-transform
  • line-height
  • word-spacing
  • letter-spacing
  • background и все связанные свойства ( background-color , background-image и т.д.)
  • opacity
  • vertical-align

В основном, это свойства, так или иначе связанные с форматированием текста.

Псевдокласс :placeholder-shown

Кроме псевдоэлемента ::placeholder в стандарте CSS существует еще псевдокласс :placeholder-shown , посмотреть поддержку которого можно также на сайте caniuse.com.

Отличие :placeholder-shown от ::placeholder заключается в том, что оформление с помощью :placeholder-shown работает только тогда, когда в полях input и textarea виден текст заполнителя, т.е. значение атрибута placeholder. Когда пользователь начинает вводить текст, это оформление меняется на стандартное или описанное в стилях для данной страницы/сайта.

Состояния ссылок в CSS. Псевдоклассы

Первый урок четвертой главы мы начнем с изучения ссылок, а точнее, будем разбираться с тем, какие состояния бывают у ссылки, и как через CSS можно повлиять на ее вид в том или ином состоянии, используя соответствующие псевдоклассы.

Какими бывают состояния ссылок

Взаимодействия пользователя с элементами веб-страницы отслеживаются браузером. Если говорить о ссылках, им присваивается определенный статус в зависимости от того, какое действие было совершено (наведение, нажатие, переход по ссылке и т. д.). Это мы и называем состояниями ссылок.

Когда вы пишете стиль CSS, то с помощью селектора указываете, для какого элемента он предназначен. В самом начале учебника, когда мы изучали селекторы, в одном из уроков рассматривались псевдоклассы CSS, благодаря которым можно задавать стили для разных состояний элемента, в том числе для ссылок. Ниже — четыре состояния, которые могут принимать ссылки:

  • :hover — ссылка, на которую наведен курсор;
  • :active — активная ссылка (та, по которой совершается клик, или на которой удерживается кнопка мыши);
  • :link — ссылка, еще не посещенная пользователем;
  • :visited — посещенная ссылка.

Для справки: из соображений безопасности набор стилей, которые можно использовать для ссылок :visited , ограничен. Посещенные ссылки принимают только свойства color , background-color , border-color (и его производные), column-rule-color , outline-color . При этом свойство к посещенной ссылке можно применить, только если это же свойство задано и для обычной. Прозрачность цвета, установленная через альфа-канал для элемента :visited , будет проигнорирована. JavaScript-метод getComputedStyle всегда возвращает значение цвета непосещенных ссылок, даже если у посещенных ссылок цвет иной.

Стилизация состояний

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

Псевдокласс :active также поддается гибкой стилизации:

Если в ваши планы входит максимально детальная проработка дизайна ссылок, то желательно определить стили для всех четырех состояний. При этом очень важно соблюсти порядок, в котором будут записаны селекторы с псевдоклассами. Обязательно размещайте их в следующей последовательности:

Что будет, если поменять строки местами? В этом случае некоторые стили перестанут работать согласно правилам каскадности. Дело в том, что ссылка может находиться одновременно в двух состояниях, к примеру, в :visited и в :hover , и если расположить стиль для :hover выше, чем стиль для :visited , то первый перекроется.

Выбор ссылок с помощью селекторов

Как записать селектор с псевдоклассом для определенной группы ссылок? Например, если вам нужно применить какой-то стиль для всех ссылок навигационного меню с идентификатором #main-menu , когда такая ссылка находится в состоянии наведенного на нее курсора, вы можете использовать такой селектор:

Либо, если у каждой ссылки этого меню дополнительно имеется свой класс (допустим, это .menu-link ), то такая запись тоже подойдет:

Чтобы определить стили для всех состояний данных ссылок, запишите для каждого псевдокласса отдельное правило:

Обширные возможности CSS в плане построения селекторов позволяют с удобством делать точную выборку ссылок, которые вам необходимо стилизовать. А какие именно свойства CSS применимы к ссылкам, мы обсудим в следующем уроке.

CSS Pseudo-classes

Что такое псевдо-классы?

Псевдо-класс используется для определения специального состояния элемента.

Например, он может быть использован для:

  • Стиль элемента, когда пользователь наносит на него указатель мыши
  • Стиль посещенных и непосещенных ссылки по-разному
  • Стиль элемента, когда он получает фокус

Синтаксис

Псевдо-классы привязки

Ссылки могут отображаться различными способами:

Пример

/* unvisited link */
a:link <
color: #FF0000;
>

/* visited link */
a:visited <
color: #00FF00;
>

/* mouse over link */
a:hover <
color: #FF00FF;
>

/* selected link */
a:active <
color: #0000FF;
>

Илон Маск рекомендует:  In - Ключевое слово Delphi

Примечание: a:hover Должны прийти после a:link и a:visited в CSS определение для того, чтобы быть эффективным! a:active Должны прийти после a:hover в CSS определение для того, чтобы быть эффективным! Имена псевдо-классов не чувствительны к регистру.

Псевдо-классы и классы CSS

Псевдо-классы могут сочетаться с классами CSS:

При наведении указателя мыши на ссылку в примере она изменит цвет:

Пример

Пример использования псевдо-класса :hover в элементе

Пример

Простая подсказка Hover

Наведите указатель мыши на элемент

(например, всплывающая подсказка):

Пример

p <
display: none;
background-color: yellow;
padding: 20px;
>

div:hover p <
display: block;
>

CSS-: первый-ребенок псевдо-класс

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

Соответствие первому элементу

В следующем примере селектор соответствует любому элементу

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

Пример

Сопоставление первого элемента во всех

В следующем примере селектор соответствует первому элементу во всех элементах

Пример

Сопоставить все элементы во всех первых дочерних элементах

В следующем примере селектор соответствует всем элементам в

элементы, являющиеся первыми дочерними элементами другого элемента:

Пример

CSS-The: lang псевдо-класс

:lang псевдо-класс позволяет определить специальные правила для разных языков.

В приведенном ниже примере :lang определяет кавычки для элементов с lang = «No»:

Пример

Some text A quote in a paragraph Some text.

Как использовать псевдоклассы CSS?

Приветствую вас, дорогие друзья!

Хотите узнать, как использовать псевдоклассы CSS для быстрого изменения оформление определенных блоков на вашем сайте не внося правок в HTML или PHP-код? Тогда читайте статью до конца! В ней я расскажу о том, какие возможности дают нам псевдоклассы CSS, каких видов они бывают, и покажу несколько конкретных примеров их практического применения.

Идея использования псевдоклассов заключается в том, что мы можем в CSS к какому-то тегу, классу или идентификатору дописать определенное кодовое слово, далее задать набор нужных нам CSS-свойств, и таким образом повлиять на внешнее оформление практически любого элемента на нашем сайте, в зависимости от его состояния, положения на странице и даже принадлежности к тому или иному языку. Это очень удобно и активно используется в современной вёрстке!

При этом наш элемент будет вести себя так, как будто бы мы присваивали ему какой-то свой новый CSS-класс. Хотя, по факту, мы никакого нового класса ему не задавали!

Все псевдоклассы CSS условно разделяют на несколько групп:

  • Структурные псевдоклассы
  • Динамические псевдоклассы
  • Языковые псевдоклассы
  • Псевдоклассы отрицания др.

Структурные псевдклассы CSS

Итак, предположим, у нас на сайте есть блок, внутри которого расположены другие элементы. Это могут быть отдельные блоки, пункты списка, абзацы, ссылки и так далее.

Если нам нужно каким-то образом изменить оформление первого элемента внутри этого блока, то мы можем использовать псевдокласс first-child.
Давайте разберём пример с таким кодом страницы:

У нас есть блок с классом iw-blocks, внутри которого находится несколько блоков с одинаковыми классами. Так же у них может не быть этих классов, и, тем не менее, мы сможем обратиться к любому из них, и дописать нужные CSS-свойства.

Чтобы дописать CSS свойства только для первого элемента нам нужно:

  1. 1. Сначала указываем класс или идентификатор родительского блока, того элемента, к которому нам нужно обратиться. В данном случае это класс iw-blocks.
  2. 2. Далее пишем тег или класс одного из нескольких повторяющихся элементов. В данном случае у нас повторяются несколько блоков с классом block. Поэтому мы можем использовать либо название класса, либо же просто написать тег div.
  3. 3. Через двоеточие пишем название псевдокласса CSS, которое мы будем использовать:
    :first-child
  4. 4. В фигурных скобках зададим ему CSS-свойства. Например, изменим цвет фона и цвет текста.

После сохранения изменений и обновления страницы дописанные CSS-свойства сработают только для первого блока с классом block.

Бывают ситуации, когда нам нужно обратиться к элементу, стоящему внутри блока, к которому мы применяем псевдокласс.

В этом случае пишем так:

Также вместо :first-child мы можем использовать любой из указанных ниже псевдоклассов CSS.

:nth-last-child – применяет стили для последнего дочернего элемента.

  • :nth-last-child(3) – применяет стили для третьего дочернего элемента с конца. Вместо значения 3 может стоять любое число.
  • :nth-child(2) — применяет стили для второго дочернего элемента по порядку. В скобках может стоять любое другое число.
  • :nth-child(2n) — этот псевдокласс применяет стили для каждого второго дочернего элемента по порядку.

Так же есть и другие структурные псевдоклассы CSS, но они используются значительно реже.

  • :only-child — сработает, если элемент является единственным дочерним.
  • :only-of-type — применяет слили для единственного элемента указанного типа в родительском блоке.
  • :empty — сработает для элемента, который не имеет вложенных тегов.
  • :root – корневой элемент на странице.

Динамические псевдоклассы CSS

  • :hover — этот псевдокласс применит CSS стили для элемента при наведении на него курсора мышки.
  • :focus, :active — позволяет применить нужные CSS свойства для ссылок, полей форм, кнопок и других элементов, которые активировали (выделили) кликом мышки или переходом при помощи клавиши TAB на клавиатуре.
  • :link — псевдокласс для ссылки, по которой не осуществлялся переход.
  • :visited — псевдокласс для ссылки, по которой посетитель уже переходил.

Псевдокласс отрицания

div:not(.price) – применит CSS свойства для всех блоков div, кроме блоков с классом price

Так же можно вместо класса указывать названия тегов или использовать другие псевдоклассы:

span:not(:last-child) – псевдокласс применит CSS свойства ко всем тегам span кроме последнего.

Использование языкового псевдокласса CSS

Так же мы можем использовать псевдокласс :lang() для выделения блоков принадлежащих к определённому языку.

Для того чтобы браузеру было понятно какой это язык у блока должен стоять атрибут с кодом языка

Псевдоклассы CSS

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

Внешний вид элементов изменяется с помощью селекторов. Но что если вам необходимо в таблице изменить все четные строки. То есть добавить цветную заливку или изменить в них цвет текста. Можно прописать класс для каждой четной строки вручную, но это займет время и увеличит размер страницы. Простым решением будет использовать псевдокласс :nth-child(even) для селектора tr.

color:green;

Этот код сделает цвет текста во всех четных строках таблицы на зеленый.

Кроме этого в процессе взаимодействия пользователя со страницей возникают динамические состояния. К примеру когда посетитель наводит указатель мыши на элемент Ссылка возникает его динамическое состояние a:hover. А когда пользователь нажимает на элемент то возникает динамическое состояние a:visited.

Псевдоклассы CSS бывают следующих видов:

  1. Динамические.
  2. Псевдоклассы пользовательского интерфейса.
  3. Структурные псевдоклассы.
  4. Целевой псевдокласс :target.
  5. Языковой псевдокласс :lang().
  6. Псевдокласс отрицания :not().
  7. Комбинация псевдоклассов.
Динамические псевдоклассы

В большинстве случаев применяются к ссылкам на странице. Но так же могут применяться к другим элементам веб страницы. Динамических псевдоклассов несколько. Каждый отвечает за свою динамическую характеристику элемента.

:link — Стиль применяется к непосещенным ссылка;

:visited — Стиль применяется к ссылке которую вы уже посетили на странице;

:focus — Применение стиля к ссылкам, или элементам, которые были активированы курсором или же с помощью клавиатуры (клавишой TAB). Чаще всего используется для элементов форм;

:hover — используется для применения стилей к элементами на которые наведен курсор мыши;

:active — выбирается элемент страницы на который было произведено нажатие мыши. Применяется как к ссылкам так и другим элементам веб страницы.

Псевдоклассы CSS для пользовательского интерфейса

Псевдоклассы данного типа применяются к элементам форм, которым заданы определенные атрибуты.

:disabled — стили для заблокированных к изменению элементов форм;

:enabled — противоположный предыдущему, применяет стили к не заблокированным элементам формы;

:checked — стилизация таких элементов как: , , а также элементов , находящихся внутри элемента ;

:indeterminate — применяется к элементам формы таким как радио и чекбокс. Такие элементы формы могут находиться в неопределенном состоянии. Именно к таким и применяются стили.

Структурные псевдоклассы CSS

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

:root — выбор элемента, который является корневым в документе;

:nth-child() — элементы на основе их индекса (в порядке очереди) внутри их родительского контейнера. Варианты:
li:nth-child(even) — каждый элемент списка с индексом 2, 4, 6, 8, и т.д.
li:nth-child(odd) — каждый элемент списка с индексом 1, 3, 5, 7, и т.д.
li:nth-child(3) — только элемент с индексом 3.
li:nth-child(an+b) — например, li:nth-child(3n+1) выберет первый (3*0 +1 = 1), четвёртый (3*1 +1 = 4), седьмой (3*2 +1 = 7) элементы и т.д., причём значение b может быть равно нулю;

:nth-last-child() — дочерние элементы на основе их индекса внутри контейнера, при этом отсчёт идёт в обратном порядке, т.е. начиная с последнего элемента. Значениями аргумента могут быть положительные, отрицательные значения, а также ключевые слова even odd ;

:nth-of-type() — элементы одного типа на основе их индекса внутри контейнера, например, img:nth-of-type(2n) установит обтекание по левому краю каждой четной картинке, при условии, что они каждая из них не обёрнута другим блоком;

:nth-last-of-type() — элементы одного типа на основе их индекса внутри контейнера, начиная с последнего элемента к первому;

:first-child — элемент, который является первым дочерним элементом некоторого другого элемента;

:last-child — последний дочерний элемент элемента-контейнера;

:first-of-type — первый элемент данного типа среди дочерних элементов родительского элемента-контейнера;

:last-of-type — последний элемент данного типа среди дочерних элементов родительского элемента-контейнера;

:only-child — дочерний элемент, который является единственным дочерним элементов. Работает аналогично с :first-child:last-child или :nth-child(1):nth-last-child(1) , но с меньшей специфичностью;

:only-of-type — элемент, который является единственным элементом данного типа в родительском элементе;

:empty — элемент, который не содержит ни одного дочернего элемента.

Целевой псевдокласс

Некоторые ссылки указывают на местоположение внутри ресурса. Этот тип ссылок заканчивается символом «решетка» # , за которым следует идентификатор якоря (так называемый идентификатор фрагмента), например https://web-legko.ru/css3/#content . Элемент с идентификатором фрагмента называется целевым элементом. С помощью данного псевдокласса можно стилизовать элемент, к которому перешли по ссылке на странице (навигация по странице), а также элементы, которые расположены в одном блоке и при нажатии на кнопку/ссылку сменяются/перемещаются (например, css-слайдер).

В данном примере каждой картинке задан id , а каждой ссылке — соответствующий идентификатор якоря. При нажатии на ссылку каждая картинка увеличивается до стопроцентного размера.

Языковой псевдокласс

Данный псевдокласс используется когда в документе содержатся абзацы текста на разных языках. Чтобы браузер различал их, элементу с текстом добавляется атрибут lang с кодом языка, например, lang=»fr» . В результате чего этот элемент может быть стилизован при помощи селектора p:lang(fr) .

Псевдокласс отрицания

Функциональный селектор псевдокласса, который принимает в качестве значения простой селектор, а затем отбирает элементы, которые не содержат указанное значение аргумента. Значениями аргументов могут быть только следующие селекторы:

  • элемента, например, body :not(strong)
  • класса и идентификатора, например, p:not(.text)
  • псевдокласса, например, ul:not(:first-child)
  • атрибута, например, input:not([type=»checkbox»])
Комбинации псевдоклассов

При стилизации элементов возможна комбинация псевдоклассов CSS, например:

tr:nth-last-child(even):hover — добавит стили при наведении каждой чётной строке таблицы (отсчёт в обратном порядке);

h2:not(:first-of-type):not(:last-of-type) — добавит стили для всех элементов данного типа, кроме первого и последнего элемента данного типа.

Знакомство с псевдо-классами

Перевод статьи: Meet the Pseudo Class Selectors.
Автор: Chris Coyier

Селекторы псевдо-классов — это CSS селекторы с предшествующим им двоеточием. Вы, вероятно, многократно встречали конструкции подобную этой:

Псевдо-классы очень полезны и в отдельных случаях без них просто не обойтись. Они определены в различных CSS спецификациях (CSS2 или CSS3) и без проблем поддерживаются большинством браузеров, за исключением IE. В браузерах семейства Internet Explorer, даже включая IE8, псевдо-классы поддерживаются очень слабо. И хотя в последней версии IE9 заявлена их полная поддержка, все же уверенно работают псевдо-классы гиперссылок и лишь часть других, но о полноценной поддержке CSS3 спецификации в IE говорить еще рано. В данной статье рассматриваются все имеющиеся псевдо-классы. Их не так уж и много, поэтому давайте вкратце остановимся на каждом из них.

Селекторы псевдо-классов для ссылок.

, компоненты табличной структуры

, и т.д., помимо своих прямых обязанностей выполняют роль ссылок. )

:visited — Этот селектор применяется к ссылкам, которые уже были активированы ранее в используемом браузере.

:hover — Селектор относится к ссылкам ( *и не только ), на которых наведен курсор мыши. Именно в период нахождения курсора над элементом, его состояние будет соответствовать псевдо-классу :hover .

:active — Выбирает ссылки в момент их активации (клик мышью или нажатие клавиши «Enter» ). Этот псевдо-класс, к примеру, может применяться для придания ссылкам эффекта нажатой кнопки ( *более подробно этот случай рассмотрен в здесь ).

Селекторы псевдоклассов для элементов ввода и ссылок.

:focus — Возможность определения стилей для ссылок при наведении на них курсора мыши (псевдо-класс :hover ) – очень полезный инструмент, но он не позволяет достигнуть желаемого эффекта в том случае, если ссылка активируется при помощи клавиатуры. Именно для реализации такой возможности предназначен псевдо-класс :focus . Его можно использовать не только для ссылок, но и применительно к элементам формы ( и

), которые тоже могут получать фокус в процессе взаимодействия с пользователем. Некоторые разработчики рекомендуют определять псевдо-класс :focus для всех элементов, использующих псевдо-класс :hover . На рисунке представлена форма, элемент которой

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

:target — Этот псевдо-класс применяется только в том случае, если для соответствующего элемента определен атрибут id и его значение совпадает с используемым в текущем URL адресе анкором. К примеру, если вы находитесь по адресу www.site.com/page.html#home, то CSS свойства, определенные в пределах правила для селектора #home:target будут применяться для форматирования соответствующего элемента (с ). Такая взаимосвязь может очень эффективно применяться на практике. Удачный пример, иллюстрирующий применение псевдо-класса :target описан в этой статье.

:enabled — Данный псевдо-селектор выбирает элементы ввода, которые являются активными и доступны к использованию (этот статус устанавливается по умолчанию, если не указано иное).

:disabled — Выбирает неактивные элементы ввода, имеющие атрибут disabled . Большинство браузеров отображают эти элементы в серых тонах, таким образом выделяя их на фоне активных. При помощи псевдо-класса :disabled можно применять свое стилевое оформление к таким элементам.

:checked — Соответствует отмеченным элементам ввода флажкам checkbox и выбранным радио-кнопкам radiobutton .

:indeterminate — Подобно предыдущему псевдо-классу, этот тоже относится к переключателям и флажкам, но выбирает те из них, которые находятся в неопределенном состоянии (не выбраны пользователем). Пример показан на рисунке, когда после начальной загрузки страницы ни одна из радио-кнопок, принадлежащих одной группе, еще не выбрана. ( *Кроме того состояние элемента indeterminate может быть определено программным путем, из скрипта).

Псевдо-классы выбора элементов по их родственным и порядковым отношениям.

:root — Выбирает находящийся в корне документа элемент. Практически во всех случаях это элемент, если только вы не работаете в какой-нибудь другой, отличной от HTML среде, поддерживающей CSS, например, в XML, где это может быть и совершенно другой находящийся в корне документа элемент.

:first-child — Относится к первому дочернему элементу, указанного типа ( *К примеру, селектор div p:first-child соответствует первому элементу

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

:last-child — Эквивалентен предыдущему псевдо-классу, с той лишь разницей, что вместо первого выбирает последний дочерний элемент.

:nth-child(N) — Этот псевдо-класс основан на порядковых позициях дочерних элементов, указанных в селекторе. В скобках указывается числовое значение, соответствующее позиции дочернего элемента, к которому будет применяться CSS правило. ( * div:nth-child(3) указывает на третий по счету блок

:nth-of-type(N) — Принцип действия этого псевдо-класса тот же, что и у предыдущего ( :nth-child(N) ), с тем отличием, что :nth-of-type(N) применяется для отбора N-го по счету элемента указанного типа, среди других элементов, находящихся на одном уровне вложенности. К примеру, внутри контейнера

и несколько изображений . Если вам необходимо выбрать все нечетные картинки, то псевдо-селектор :nth-child в этом случае не поможет. Здесь вам придется применить селектор div img:nth-of-type(odd) . Этот псевдо-класс очень удобен для работы со списками определений , который позволяет выбирать необходимые компоненты таких списков (тег термина) и (тег определения).

:first-of-type — Селектор, содержащий этот псевдо-класс, относится к первому элементу указанного типа среди других, находящихся на одном уровне вложенности. К примеру, если вы имеете два контейнера

:last-of-type — Аналогичен предыдущему псевдоклассу, с тем исключением, что выбирает не первые, а последние элементы указанного типа на одном уровне вложенности.

:nth-last-of-type(N) — Работает также как и :nth-of-type(N) , но отсчет при этом ведется начиная не с первого, а последнего элемента.

:nth-last-child(N) — Работает также как и :nth-child(N) , но выборка соответствующих аргументу дочерних элементов производится с последнего.

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

Фильтрующие псевдо-классы.

:not(S) — Данный селектор псевдо-класса позволяет из уже сформированного набора элементов исключить ненужные, указав соответствующий им параметр в скобках селектора. К примеру, если необходимо выделить все, присутствующие в документе блоки

:empty — Относится к «пустым» элементам, то есть к тем, которые не содержат текст или дочерние элементы между открывающим и закрывающим тегами. (К примеру,

Псевдо-классы для работы с текстом элементов.

:first-letter — Правила, определенные в рамках селектора с этим псевдо-классом форматируют первый символ текста, находящегося внутри указанного элемента. ( *Допустим, селектор div.music:first-letter позволит изменить стиль первой буквы во всех блоках имеющих класс music ). Этот псевдо-класс, как правило, применяется для создания эффекта буквицы.

:first-line — Выбирает лишь первую строку текста внутри определенного элемента. Зачастую применяется для визуального выделения введения, предшествующего основному содержанию статьи.

:lang() — Этот псевдо-класс определен в последней спецификации (CSS3) и поддерживается IE восьмой версии и выше. Он позволяет выбрать любой элемент, который имеет атрибут lang с соответствующим значением или наследует его от родительского элемента. К примеру, псевдо-класс :lang(fr) будет соответствовать содержащим текст элементам даже без атрибута lang , если они являются потомками контейнера, допустим , в котором определён атрибут lang=»fr» .

::selection — Позволяет изменять стилевое оформление выделенных пользователем фрагментов текста ( * ::selection является CSS псевдо-элементом, а автор упоминает его в статье, которая посвящена псевдо-селекторам, по причине его прямого отношения к форматированию фрагментов текста элементов страницы ). Для браузера Firefox используется нестандартный псевдо-элемент ::-moz-selection . Более детально случай применения псевдо-элемента ::selection рассмотрен здесь.

Для достижения желаемого результата вы можете формировать CSS селекторы, выстраивая цепочки из необходимых псевдо-классов, используя различные комбинации из имен идентификаторов и классов. В частности, такой прием может очень пригодиться для определения первого символа ( :first-letter ) и первой строки ( :first-line ) содержимого элемента. Вы, вероятно, не хотели бы, чтобы каждый параграф на странице был оформлен с использованием эффекта буквицы, а только самый первый из них. Поэтому для применения нужного форматирования лишь к первому параграфу необходимо использовать следующий селектор p:first-child:first-letter . На рисунке приведен пример буквицы, когда увеличивается размер первого символа и используется эффект его обтекания.

Псевдо-элементы для манипуляций контентом документа.

:before — Позволяет вставлять контент перед определенным элементом. Этот псевдо-элемент может пригодиться, когда вам, допустим, необходимо добавить кавычки перед элементом

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

:after — Дает возможность вставки контента после указанного элемента. К примеру, если вам нужно добавить закрывающие кавычки для все того же элемента . Очень часто псевдо-элемент :after используется с целью отмены эффекта обтекания блока. Для этого, после требуемого элемента добавляется пустое место ( *пробел ), что отменяет обтекание без необходимости внесения изменений в исходный код документа.

Не рекомендовано к использованию.

:contains() — Насколько мне известно, этот псевдо-класс уже устарел и в текущей CSS3 спецификации он отсутствует. На первый взгляд, данный селектор кажется очень полезным (он позволяет выбирать нужный элемент страницы по его текстовому содержимому). Я не знаю всей истории (если вы в курсе, пожалуйста, поделитесь), но отказ от этого способа отбора элементов, по-видимому, связан с какими-то трудностями или тем фактом, что в данном случае контент содержится непосредственно в CSS селекторе ( *что противоречит принципам семантически корректного документа ). Более правильный с точки зрения семантики вариант применения данного псевдо-класса – не использование находящегося в элементе текста, а указание типа дочернего элемента, который может находиться в пределах форматируемого родительского элемента (к примеру, p:contains(img) выбирает все параграфы, содержащие в себе изображения). Однако, как бы там ни было, этот псевдо-класс не рекомендован к использованию в будущем.

:required , :optional , :read-only , :read-write — Аналогично предыдущему селектору также считаются устаревшими, а их альтернативой являются соответствующие варианты селекторов атрибутов — input[required] , input[readonly] .

Использование псевдо-классов в jQuery.

Фреймворк jQuery допускает использование всех перечисленных выше псевдо-классов и элементов. Более того, в этой библиотеке предусмотрено несколько дополнительных, не менее полезных псевдо-классов.

:first — Данный класс соответствует первому экземпляру указанного в селекторе набора. Он отличается от псевдо-класса :nth-child(1) , который относится к элементу только в том случае, если его тип соответствует указанному и если он является первым дочерним элементом. Псевдо-класс :first не учитывает какие-либо родственные отношения, а выбирает первый соответствующий указанному набору элемент.

:eq(N) — Библиотека jQuery не поддерживает селектор :nth-of-type ( :nth-child поддерживается), но в набор собственных селекторов jQuery входит :eq(N) , который является достойной альтернативой :nth-of-type . Селектор с таким псевдо-классом выбирает следующий N-й элемент, который соответствует указанному набору. Следует учитывать, что относясь к JavaScript библиотеке, этот селектор отсчитывает элементы начиная с нуля, а не с единицы. Но при использовании селектора :nth-child , для выбора первого элемента в качестве аргумента нужно указывать единицу :nth-child(1) . Удобный инструмент, помогающий разобраться в тонкостях использования этих селекторов, находится здесь.

:contains(‘text’) — Этот псевдо-класс удален из CSS, но все еще работает в jQuery.

:lt(X) — При помощи этого селектора можно выбрать все элементы, входящие в определенный набор, которые находятся до указанного по счету индекса элемента X. ( * ul li:lt(3) выберет первый, второй и третий элемент списка. Третий элемент выбирается потому, что в этом случае отсчет индекса также ведется начиная с нуля – 0(1), 1(2), 2(3) )

:gt(X) — Аналогичен предыдущему селектору, но при этом выбираются все следующие за указанным элементы ( *Если список

    содержит 6 элементов, то jQuery селектор ul li:gt(3) выберет два последних – 4(5) и 5(6) )

:even — Этот селектор эквивалентен CSS псевдо-классам :nth-child(even) или :nth-child(2n) .

:odd — Аналог селекторов :nth-child(odd) или :nth-child(2n+1) , выбирающих нечетный элемент ( *в последнем случае для выбора первого элемента (тоже нечетного) значение n должно быть равно нулю. Как уже упоминалось, у CSS псевдо-классов индексирование элементов начинается с единицы ).

:has(S) — Работает так же как и CSS селектор :conteins() , содержащий в качестве аргумента тип элемента. То есть в данном случае селектор выбирает элемент (или набор элементов), который имеет потомка, указанного в качестве аргумента типа ( * ul li:has(a) выберет все элементы списка, которые в своем составе содержат ссылки ).

jQuery содержит намного больше селекторов, предназначенных для отбора необходимых элементов, которые также очень полезны (по крайней мере, с точки зрения читабельности кода). Здесь можно увидеть полный список допустимых селекторов jQuery.

Библиотекой jQuery не предусмотрен какой-либо инструмент, обеспечивающий прямой доступ к CSS псевдо-элементам :before и :after , но желаемого результата можно добиться средствами JavaScript:

Специфичность CSS селекторов.

В CSS спецификации селекторы классов и псевдо-классов имеют один и тот же уровень приоритетности (а точнее имеют равные значения специфичности).

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

В приведенном примере обнуление всех отступов элемента списка ( margin:0 ) будет работать (подразумевается, что первый и второй селекторы соответствуют одному списку

    ), но только лишь потому, что правило обнуления всех отступов находится ниже, а не потому, что оно обладает приоритетом (оба правила имеют один уровень специфичности). Поэтому эти моменты всегда необходимо учитывать.

Псевдоклассы в CSS

Ну кто из нас не знает, что такое псевдоселекторы (или псевдоклассы) в CSS? Да-да, это то, что обычно пишут после селектора через двоеточие. Самые известные псевдоклассы это :link, :hover, :visited и :active.

Такие конструкции в CSS, как правило, можно встретить в каждом файле стилей, но их использование ограничивается лишь описанием состояния ссылок и не более того.

В общем, тема псевдоселекторов еще не обсуждалась на нашем сайте, так что самое время приступить ;-)

Итак, как я уже сказал, веб-разработчики используют псевдоклассы в основном для задания стилей ссылок, например :link для непосещенной ссылки, :hover для ссылки при наведении, :active для нажатой и удерживаемой ссылки и :visited для посещенной. Кстати, у нас есть отличная статья про оформление ссылок, рекомендую.

Идем дальше. Как вы думаете, сколько, помимо этих четырех, существует псевдоклассов? :first-child, last-child? Кто еще? Все? А на самом деле всего их 33. Рассмотрим все детально.

Название и назначение псевдоклассов

  1. :link — отвечает за стили непосещенной ссылки;
  2. :hover — состояние объекта (не обязательно ссылки) при наведении на него мышкой;
  3. :active — состояние активного объекта (например, для ссылки и зажатие ее мышкой);
  4. :visited — состояние посещенной ссылки;
  5. :focus — когда вы используете какой-то объект на страницы, то на нем устанавливается фокус (в случае и текстовым поле это постановка курсора в это поле);
  6. :first-child — первый дочерний элемент текущего элемента;
  7. :last-child — соответственно, последний дочерний элемент чего-то;
  8. :only-child — применяет стиль к элементу, если он единственный дочерний элемент;
  9. :nth-child() — какой-то по счету с начала дочерний элемент, например p:nth-child(4);
  10. :nth-last-child() — аналогично, только отчет с конца; интересно, что в этом и предыдущем селекторах можно задавать не только конкретные цифры, но и счетность, к примеру вот так: ul li:nth-last-child(2n+1);
  11. :lang() — если у элемента указан язык (с помощью атрибута lang, например lang=»en»), то этот элемент можно выбрать так;
  12. :root — дает указание применить стиль к корневому элементу (в html документе это тег );
  13. :not() — дает ограничение на применение стилей по селектору (то есть селектор .red-block:not(div) применит указанный стиль ко всем элементам с классом .red-block, только есть этот элемент не

Ну что, классно? Сообщения о валидации формы можно без JS выводить, подсвечивать активные поля, писать меньше кода — эх, красота была бы, если это бы добро работало везде ;-) Мечтания в сторону, переходим к таблице поддержки браузерами.

Поддержка псевдоселекторов в разных браузерах

Как вы понимаете, ограниченность использование псевдоклассов не так просто появилась, вызвана она частичной их поддержкой в браузерах. Чего уж говорить про какой-нибудь :out-of-range, если даже :active достаточно странно работает в нашем любимом ИЕ.

В ячейке указано либо нет (совсем нет), либо версия или билд, начиная с которого псевдокласс поддерживается.

Gecko
(Firefox)
Trident
(IE)
Webkit
(Chrome/Safari)
Presto
(Opera)
:link 1.0 3.0 85 7.0
:visited 1.0 3.0 85 7.0
:active 1.0 Нет 85 7.0
:hover 1.0 7.0 419.3 7.0
:focus 1.0 8.0 Yes 7.0
:first-child 1.0 7.0 85 7.0
:lang() 1.2 8.0 525 7.5
:root 1.0 Нет 85 9.5
:not() 1.0 Нет 85 9.5
:empty 1.8 Нет 412 9.5
:first-of-type 1.9.1 Нет 525 9.5
:last-child 1.0 Нет 525 9.5
:last-of-type 1.9.1 Нет 525 9.5
:only-child 1.8 Нет 525 9.5
:only-of-type 1.9.1 Нет 525 9.5
:nth-child 1.9.1 Нет 525 9.5
:nth-last-of-type 1.9.1 Нет 525 9.5
:nth-last-child 1.9.1 Нет 525 9.5
:nth-of-type 1.9.1 Нет 525 9.5
:target 1.3 Нет 525 Частично
:enabled 1.8 Нет 525 9.0
:disabled 1.8 Нет 525 9.0
:checked 1.0 Нет 525 9.0
:indeterminate 1.9.2 Нет 522 Нет
:default 1.9 Нет Нет 9.0
:valid 1.8 Нет Нет 9.0
:invalid 1.8 Нет Нет 9.0
:in-range 1.8 Нет Нет 9.0
:out-of-range 1.8 Нет Нет 9.0
:required Нет Нет Нет 9.0
:optional Нет Нет Нет 9.0
:read-only Нет Нет Нет Нет
:read-write Нет Нет Нет Нет

Вот так, весь кайф обламали ;-(

Хотя, никто же не запрещает вам использовать псевдоклассы. Просто делайте ваши стили так, что если браузер пользователя не поддерживает тот или иной псевдоселектор, он (пользователь) не страдал от этого, то есть все жизненно важные для пользования сайтом вещи должны работать как часы и без псевдоклассов.

Как работают псевдоклассы в CSS. Подробное объяснение с примерами и диаграммами

Наверняка каждый, кто работал с CSS, не раз впадал в отчаяние. Например, когда пытался отцентрировать дочерний элемент по отношению к родительскому, что является весьма нетривиальной задачей. В этой статье мы рассмотрим ещё более сложную тему — псевдоклассы, один из видов селекторов.

Прим. перев. Псевдоклассы предназначены для изменения стиля существующих элементов страницы в зависимости от их динамического состояния, например, при работе со ссылками ( :link , :visited , :hover , :active , :focus ).

В этой статье мы познакомимся с двумя типами псевдоклассов:

Иногда сложно понять, что такое псевдоклассы и как они работают. Главная сложность состоит в том, что они представлены в абстрактном виде. Поэтому для упрощения восприятия использованы схемы с DOM-деревьями.

Разметка и DOM-дерево

Обратите внимание на HTML-код, представленный ниже. Он будет использоваться во всех примерах в этой статье.

А теперь давайте преобразуем этот код в нечто, понятное визуально и интуитивно — в DOM-дерево.

Давайте рассмотрим подробнее элемент body . В нём расположено 3 дочерних элемента: main и два элемента .

На схеме представлено отношение между body и дочерними элементами.

Важен порядок, в котором дочерние элементы размещаются в дереве. В коде дочерние элементы располагаются сверху вниз, а в дереве — слева направо.

«КРОК», Москва, Троицк, Санкт-Петербург, Нижний Новгород, Самара, Иркутск, Пермь, Краснодар, Воронеж, Челябинск, от 120 000 до 240 000 ₽

Теперь давайте посмотрим на div-контейнер с классом main :

Псевдокласс only-of-type (единственный из выбранного типа)

Для всех псевдоклассов действует один и тот же формат:

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

В приведённом выше фрагменте кода выбираемый элемент — тег , а его селектор — one-of-type .

Данный пример можно изучить в работе на codepen.io. Уберите символы комментариев, чтобы посмотреть, как работает тот или иной селектор, а лучше продолжите чтение статьи, чтобы не запутаться.

Начнём с того, что выберем всё, что есть в DOM, а затем отфильтруем.

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

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

Теперь мы завершаем часть работы, связанную с выбираемым элементом, и приступаем к фильтрации.

Only-of-type проходит через все секции, выбирая только те элементы , которые являются единственными для своей секции.

Псевдокласс first-of-type (первый из выбранного типа)

Давайте продолжим с того, на чём остановились — с выбираемого элемента (речь идёт об -теге).

Селектор first-of-type выбирает каждый первый элемент в секции.

Код, который выполняет условия приведённой выше схемы:

Вы можете посмотреть как работает этот код в браузе на codepen.io.

Псевдокласс last-of-type (последний из выбранного типа)

Last-of-type — полная противоположность псевдокласса first-of-type . Этот селектор выбирает последние элементы во всех секциях.

Псевдокласс nth-of-type (n-й из выбранного типа)

Теперь переходим к наиболее интересной части статьи. Рассмотрим простой CSS с элементами математики из школьной программы.

Давайте определим следующий стиль, чтобы посмотреть на селектор в действии:

Вместо nth подставьте число из скобок в порядковой форме, чтобы прочитать правильно селектор.

Итак, давайте вернёмся к селектору. a:nth-of-type(1) может читаться точно так же, как и a:first-of-type . В данном случае эти селекторы работают одинаково: каждый из них выбирает только те элементы , которые являются первыми в своих секциях.

А теперь давайте попробуем кое-что другое:

А если мы пойдём немного глубже и напишем следующее условие:

то селектор выберет каждый второй элемент в первой и во второй секциях.

Для полного понимания картины приведу ещё один пример:

В этом случае будет выбран третий (не перепутайте с a:last-of-type ) элемент во второй секции, так как эта секция — единственная, в которой есть три элемента .

Достаточно просто, не так ли? Но вставлять в скобки вы можете не только числа, но и формулы. Например, (a*n)+b (то же самое, что и an + b ), где a и b константы, а n значение, которое больше или равно нулю. Не переживайте, если вам что-то непонятно, сейчас я всё объясню.

Для начала применим следующий стиль:

Формула, переданная в селектор выглядит следующим образом: (1 * n) + 0 [=n] , где а = 1 , b = 0 , n — переменная. Теперь давайте разберёмся, что идёт дальше. Значение n последовательно вставляется в формулу, начиная с 0, после этого селектор делает выбор. Поэтому a:nth-of-type можно представить следующим образом:

В соответствии с данными результатами и будет выбран элемент .

Давайте приведём ещё один пример:

При постепенном заполнении значений n с нуля будут генерироваться следующие селекторы:

Помимо чисел и формул, генерирующих числа, вы можете также выбирать чётные или нечётные номера элементов. Even выбирает все чётные номера элемента в соответствующих секциях. Предположим, что у нас есть секция с 4-мя элементами . Из этой секции селектор выберет второй и четвёртый элементы . Аналогичным образом селектор работает с нечётными числами, только следует заменить even на odd a:nth-of-type(odd)

Псевдокласс nth-last-of-type (n-й с конца из выбранного типа)

Этот селектор работает точно так же, как и предыдущий, но с небольшим отличием:

На этом часть статьи о селекторах *-of-type подходит к концу. Надеюсь, что вам понравилось. Мы проделали большой путь от only-of-type до nth-last-of-type , углубившись в first-of-type , last-of-type и nth-of-type . Если где-то в середине вы что-то не до конца поняли, то предлагаю вам поэкспериментировать в codepen и перечитать эту часть.

Настало время перейти к новой категории псевдоклассов — *-child . В этой части статьи мы рассмотрим и попытаемся понять, как работает эта категория селекторов. После того, как вы изучили предыдущие селекторы, эта категория псевдоклассов не покажется вам трудной. Давайте начнём!

Псевдокласс only-child (единственный из выбранного типа дочернего элемента)

Примените следующий стиль к HTML-коду, который дан в самом начале .

Псевдокласс first-child (первый дочерний элемент)

Примените следующий стиль:

Псевдокласс last-child (последний дочерний элемент)

Думаю, что после всего материала, который мы изучили, вы примерно понимаете, как работает этот селектор. Если нет — объясняю: last-child выбирает последний элемент в каждой секции. Правило прежнее: -элемент должен быть именно первым в списке всех дочерних элементов, иначе он не будет выбран.

Обратите внимание на схему после кода.

Псевдокласс nth-child (n-й дочерний элемент)

Надеюсь, вы усвоили небольшой урок математики в первой части статьи. Потому что сейчас это произойдёт снова, но с небольшими изменениями.

Обратите внимание на следующий пример:

Всё работает так же, как и с селектором nth-of-type .

Чтобы начать использовать nth-child , нужно повторить все те действия, которые мы произвели с селектором nth-of-type — поместить в скобки любое число. В примере выше селектор сработает точно так же, как и first-child — выберет все первые элементы в секциях.

Итак, давайте перейдём к новому примеру:

Постепенно добавляем значения n в формулу начиная с 0, и это даёт нам понять, что селектор сверху во многом схож тем, что ниже.

Если селектор получает числа, выходящие за пределы секторов (как -1, 5, 6), он просто их игнорирует.

На схеме ниже показано действие селектора a:nth-child(2n-1) :

На сайте CSS Tricks вы сможете найти очень полезную и исчерпывающую статью о селекторе :nth-child .

А пока что давайте перейдём к последнему селектору в нашем руководстве.

Псевдокласс nth-last-child (n-й дочерний элемент с конца)

Этот селектор работает точно так же, как и :nth-child , за исключением одной тонкости: он видит и читает дерево DOM в обратном направлении — справа налево.

Дочерние элементы в каждой секции для этого селектора выстраиваются в ряд справа налево.

Обратите внимание на то, как расположены и выбраны дочерние элементы на схеме:

Как видите, всё довольно просто — выбор элемента происходит с конца.

Заключение

На этом наше знакомство с псевдоклассами окончено. Но вы всегда можете найти полезный материал по CSS у нас на сайте. Желаем вам удачи в освоении CSS!

Понравилась статья? Поделиться с друзьями:
Кодинг, CSS и SQL