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


Содержание

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

Псевдокласс :only-of-type (от англ. only of type – только указанного типа) позволяет выбрать дочерние элементы требуемого типа, которые являются единственными дочерними элементами для своего родительского элемента данного типа (при этом дочерние элементы других типов могут присутствовать). Например, если задано правило span:only-of-type <блок объявлений>, то в документе будут выбраны все дочерние элементы ‘span’ , которые являются единственными дочерними элементами данного типа для своего родительского элемента.

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

Как работают псевдоклассы в 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: nth-child и nth-of-type

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

В этой статье мы рассмотрим:

  • различные способы использования :nth-child ;
  • более гибкий селектор :nth-of-type ;
  • и связанные с ними селекторы :nth-last-child и :nth-last-of-type .

:nth-last-of-type

:nth-last-of-type выбирает дочерние элементы, если их позиция в документе совпадает с шаблоном, описываемым алгебраическим выражением.

Селектор :nth-last-of-type выглядит примерно так:

« Выражение » может быть представлено ключевыми словами even или odd , целым числом или формулой по типу an+b , где a и b — целые числа, положительные или отрицательные.

Поскольку псевдокласс CSS nth child может использоваться для выбора диапазона различных элементов. Давайте рассмотрим несколько примеров, чтобы стало понятнее.

У меня есть маркированный список из 12 элементов. Посмотрим, как можно использовать :nth-child для выбора определенного элемента или набора элементов по шаблону:

Чтобы выбрать третий элемент списка, нужно указать li:nth-child(3) . Чтобы выбрать все четные элементы, можно использовать ключевое слово even. И наоборот, можно использовать :nth-child(odd) , чтобы выбрать все элементы с нечетным номером.

CSS nth child каждый 3 й — указываем li:nth-child(3n) . Чтобы выбрать первые четыре элемента, используем li:nth-child(-n+4) . Чтобы выбрать все, кроме первых четырех элементов, можно использовать li:nth-child(n+5) .

Выражение an + b

Альтернативой использованию ключевого слова odd является использование выражения 2n+1 . Но как это работает?

Когда выражение в формате an+b содержит отличные от ноля значения a и b , дочерние элементы разбиваются на группы. Если это выражение 2n+1 , дочерние элементы разбиваются на группы по два. Каждому элементу в группе присваивается индекс, начиная с 1 . Соответствующий элемент в каждой группе — это индекс номер b . В нашем примере это будет первый элемент.

Если выражение 3n+2 , элементы группируются по три элемента, и второй элемент в каждой группе соответствует выражению.

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

Ключевое слово even в CSS nth child может быть выражено как 2n . В этом случае у нас нет значения b , поэтому выбирается каждый элемент группы с индексом a ; 2n выбирает каждый второй элемент, 3n — каждый третий, 4n — каждый четвертый и так далее.

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

Мне больше нравится концепция поиска каждого n-ного элемента — каждого 2-го, 3-го или 4-го и т.д. А потом мне проще представить, что вторая часть выражения — это смещение.

В случае 2n+1 я читаю это выражение следующим образом: « Найти каждый второй элемент и переместить выделение вниз на 1 ».

Если выражение 3n-5 , оно будет читаться так: « Найти каждый третий элемент и переместить выделение вверх на 5 ».

Другие селекторы :nth-child

:nth-child имеет соответствующий ему псевдокласс :nth-last-child , который работает наоборот.

li:nth-last-child(3n) начинает с последнего дочернего элемента и обрабатывает их в обратном направлении, сопоставляя каждый третий элемент с конца списка.

Этот псевдокласс менее распространен. Тем не менее, часто необходимо выбрать первый или последний дочерний элемент. Это можно сделать с помощью :nth-child(1) или :nth-last-child(1) , но этот метод встречается не так часто, как псевдоклассы :first-child и :last-child . При этом только :first-child работает в IE8 , а :last-child и :nth-селекторы — нет.

:nth-of-type

Что меня часто не удовлетворяет, так это то, что псевдокласс CSS nth child отбирает дочерние элементы по индексу и не учитывает тип элемента.

Рассмотрим следующий пример.

Есть раздел с заголовком, подзаголовком и несколькими абзацами. Я хочу, чтобы первый абзац немного выделялся с помощью увеличенного размера шрифта 1.5em .

Можно попробовать применить код section p:first-child , так как нужно задать дополнительный стиль для первого абзаца в этом разделе. Но это не сработает, поскольку первый дочерний элемент раздела — h1 . В этом случае необходимо использовать селектор :first-of-type .

Существует целый ряд селекторов этого типа — :first-of-type , :last-of-type , :nth-of-type и :nth-last-of-type . Они ведут себя так же, как :nth-child , но отбирают n-ые экземпляры элементов определенного типа.

Эти селекторы довольно сложны, но они предоставляют большие возможности. Они поддерживаются всеми браузерами, начиная с IE9 , в IE8 поддерживается только :first-child . В прошлом они не раз помогли мне решить несколько сложных задач.

Данная публикация представляет собой перевод статьи « AtoZ CSS Screencast: nth-child and nth-of-type » , подготовленной дружной командой проекта Интернет-технологии.ру

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

Всем привет. В самом начале своей работы в веб-дизайне, я изучал все тяжелым способом: методом проб и ошибок. Тогда не было Smashing Magazine, Can I Use, CodePen и прочих волшебных вещей, окружающих нас сегодня. Если бы раньше кто-либо показал мне азы веб дизайна, особенно по части CSS, это было бы невероятно полезно.

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

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

Илон Маск рекомендует:  Что такое код ora_parse

Перед тем как погрузиться в вопрос, разберемся с терминами — если в названии есть псевдоклассы и псевдоэлементы, то что значит часть слова “псевдо”? Вот что говорит dictionary.com:

прилагательное 1. Ненастоящий, но похожий внешне; притворяющийся; ложный или мнимый 2. Почти такой же или пытающийся быть таким же

Не перегружаясь техническим определением W3C, псевдокласс можно определить, как фантомное состояние или специфическую характеристику элемента, которая может быть выделена с помощью CSS. Наиболее распространенные псевдоклассы это :link , :visited , :hover , :active , :first-child и :nth-child . Существуют и другие псевдоклассы, им мы тоже уделим внимание.

Псевдоклассы в стилях всегда выделяются предшествующим двоеточием ( : ), затем идет название псевдокласса и иногда значение в скобках.

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

Наиболее распространенные псевдоэлементы это :after , :before и :first-letter , мы рассмотрим их в конце статьи.

Одно или два двоеточия ставить перед псевдоэлементами?

Короткий ответ для большинства случаев — без разницы.

Двойное двоеточие ( :: ) было добавлено в CSS3, чтобы дифференцировать для различения псевдоэлементов типа ::before и ::after от псевдоклассов, таких как :hover и :active . Все браузеры поддерживают двойное двоеточие, кроме Internet Explorer (IE) 8 и ниже.

При этом некоторые псевдоэлементы, например, ::backdrop работают только с двойным двоеточием.

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

Вы можете выбрать любой вариант, здесь нет однозначного “за” или “против”.

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

Не забывайте, что в CSS3 псевдоэлементы выделяются двойным двоеточием, типа a::after < … >, для их отличия от псевдоклассов. Вы можете иногда это видеть в CSS. При этом CSS3 также позволяет использовать одно двоеточие ради обратной совместимости и в настоящее время мы рекомендуем придерживаться этого синтаксиса.

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

Когда использовать и не использовать генерируемый контент в CSS

Генерируемый контент в CSS реализуется с помощью комбинации свойства content с псевдоэлементами :before или :after .

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

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

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

Используйте генерируемый контент для декорации и незначительного текста, но убедитесь, что он правильно обрабатывается скрин-ридерами, чтобы использующие эту технологию не отвлекались на него. Основывайтесь на методике “прогрессивного улучшения”, когда собираетесь использовать генерируемый контент.

На Smashing Magazine есть отличная статья Габриеля Романато об использовании генерируемого контента.

Экспериментальные псевдоклассы и псевдоэлементы

Экспериментальными называют те псевдоклассы и псевдоэлементы, чья спецификация еще не стабильна и не окончательна. Их синтаксис и поведение еще могут измениться.

Однако мы можем использовать экспериментальные псевдоклассы и псевдоэлементы с помощью вендорных префиксов; о поддержке вы можете узнать с помощью Can I Use, а для удобства работы есть такие инструменты как -prefix-free или Autoprefixer.

В этой статье у всех экспериментальных псевдоклассов и псевдоэлементов будет соответствующая пометка.

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

Мы начнем с псевдоклассов для определенных состояний.

Псевдоклассы состояний

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

Итак, рассмотрим их.

Псевдокласс :link представляет нормальное состояние ссылок и используется для выделения ссылок, которые до сих пор не посещены. В стилях рекомендуется объявлять этот псевдокласс перед всеми остальными классами этой категории. Полный порядок псевдоклассов такой: :link , :visited , :hover и :active .

Этот псевдокласс можно пропустить:

:visited

Псевдокласс :visited используется для стилизации ссылок, уже посещенных пользователем. В стилях он указывается вторым, после псевдокласса :link :

:hover

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

:active

Псевдокласс :active используется для стилизации “активированных” элементов, путем нажатия мыши или касания к экрану. Активация также может производиться и с клавиатуры, также как в случае с псевдоклассом :focus .

Он и работает аналогично :focus , с единственной разницей, что псевдокласс :active фиксирует событие между нажатием и отпусканием клавиши мыши.

Оно следует четвертым в стилях (после :hover ).

:focus

Псевдокласс :focus используется для стилизации элемента, получившего фокус с помощью курсора, касания или нажатия на клавиатуре. Он часто используется в элементах форм.

Бонус: миксин Sass для ссылок

Если вы используете препроцессоры CSS, типа Sass, этот раздел должен заинтересовать вас. Если вы их не используете (не бойтесь, это нормально), вы можете пропустить его.

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

Идея миксина состоит в отсутствии настроек по умолчанию в качестве аргументов, мы просто декларируем все 4 состояния ссылок.

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

Учтите, этот миксин может быть применен к любому элементу HTML, не только к ссылкам. Вот он:

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

Структурные псевдоклассы направлены на дополнительные данные в дереве документа или DOM и не могут быть заменены другим типом селекторов или их комбинацией.

:first-child

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

В следующем примере только первый элемент li будет выделен оранжевым текстом.

:first-of-type

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

В следующем примере первый элемент li и первый элемент span будут выделены оранжевым цветом.

:last-child

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

В следующем примере, последний элемент li будет выделен оранжевым цветом.

:last-of-type

Псевдокласс :last-of-type выделяет последний элемент своего типа в родительском контейнере.

В следующем примере, текст в последнем li и последнем span будет оранжевым.

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

В следующем примере, псевдокласс :not выберет все элементы, не подпадающее под селектор-аргумент. Оранжевым будет весь текст, кроме элемента li с классом .first-item :

Теперь попробуем сделать цепочку из двух псевдоклассов :not . У всех элементов будет черный цвет и желтый фон, кроме элемента li с классом .first-item и последнего li в списке.

Демо

:nth-child

Псевдокласс :nth-child выделяет один или более элементов в зависимости от их порядкового номера в разметке.

Это один из самых универсальных и надежных псевдоклассов в CSS.

Все псевдоклассы :nth принимают аргумент в виде формулы в скобках. Формула может быть просто целым числом, может структурироваться в виде an+b или использовать ключевое слово odd или even .

  • a это целое число;
  • n это литерал (т.е. мы просто используем букву n внутри формулы);
  • + это оператор (это может быть как + , так и — );
  • b это целое число, используемое только при использовании оператора.

Вот список с греческим алфавитом, на базе которого мы сделаем несколько примеров:

Выделим второй элемент в списке, только “Beta” будет оранжевой:

Теперь выделим все элементы с порядковыми номерами, кратными двум. Оранжевыми будут “Beta,” “Delta,” “Zeta,” “Theta” и “Kappa”:

Те же самые четные элементы можно выделить и с помощью ключевого слова even :

А теперь выберем все элементы кратные двум, начиная с шестого. Итак, оранжевыми будут “Zeta,” “Theta” и “Kappa”.

Демо

:nth-last-child

Псевдокласс :nth-last-child работает аналогично :nth-child , но выбирает элементы не с начала, а с конца.

Продолжим мучать греческий алфавит. Выберем второй элемент с конца — оранжевой у нас будет только “Iota”:

Теперь выберем все дочерние элементы по порядковому номеру с конца, кратному двум. Это будут Iota,” “Eta,” “Epsilon,” “Gamma” и “Alpha”:

Теперь выделим их же с помощью ключевого слова:

И, наконец. выберем все элементы с конца кратные двум начиная с шестого. “Epsilon,” “Gamma” и “Alpha”!

:nth-of-type

Псевдокласс :nth-of-type схож с :nth-child с той разницей, что он обладает большей специфичностью, так как выбирает конкретный тип элемента внутри родительского контейнера.

В следующем примере, оранжевый цвет будет у второго параграфа.

:nth-last-of-type

Псевдокласс :nth-last-of-type делает то же, что и :nth-of-type , но отсчитывая с конца.

В следующем примере мы будем выбирать второй параграф с конца (это будет первый параграф в статье):

Дополнительные ресурсы по классам семейства :nth

:only-child

Псевдокласс :only-child выбирает единственного потомка родительского элемента.

В следующем примере, в первом ul есть только один элемент, который будет выделен оранжевым. В следующем ul несколько потомков, поэтому их этот селектор не затронет.

:only-of-type

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

В следующем примере в первом ul только один элемент списка, который и будет выделен оранжевым.

:target

Псевдокласс :target выбирает элемент, ID которого используется в качестве хэша в URL.

В следующем примере, статья с ID target будет выделяться, когда URL в адресной строке будет завершаться на #target .

URL: http://awesomebook.com/#target


Совет: короткая запись background в стилях успешно заменяет background-color .

Псевдоклассы валидации

Формы всегда были ядом веб-дизайна и веб-разработки. С помощью псевдоклассов валидации, мы можем сделать процесс заполнения форм более плавным и приятным.

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

:checked

Псевдокласс :checked выбирает радиокнопки, чекбоксы и опции, которые были отмечены пользователем.

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

Демо

:default

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

В случае, если вам надо выбрать кнопку по умолчанию в форме с незаданным классом, вы можете использовать псевдокласс :default .

Учитывайте, что наличие кнопки “Reset” или “Clear” в форме создает проблемы с юзабилити. Подробнее об этом можно прочитать в следующих статьях.

Демо

:disabled

Псевдокласс :disabled выбирает отключенный элемент формы (элемент, который пользователь не может выделить, отметить, активировать или перенести на него фокус).

В следующем примере поле ввода name , поэтому оно будет выведено наполовину прозрачным.

Совет: в разметке не обязательно писать disabled=»disabled» , того же результата можно достичь просто использовав атрибут disabled . Однако полная запись необходима в XHTML.

Демо:

:empty

Псевдокласс :empty выбирает элементы, в которых нет никакого содержимого. Если в элемент есть другой элемент HTML, символ или пробел, элемент не считается пустым.

Вот более полные определения:

Нет содержимого или каких-либо символов. Комментарии HTML содержимым не считаются.

Не пустой элемент

В элементе есть какие-либо символы, даже невидимые, например, пробел.

В следующем примере:

  • В верхнем контейнере есть текст, поэтому у него будет оранжевый фон;
  • Во втором контейнере есть пробел, который считается контентом, его фон также будет оранжевым;
  • В третьем контейнере нет ничего — он пустой и поэтому у него желтый фон.
  • В последнем контейнере есть комментарий HTML, который не считается контентом и поэтому у контейнера желтый фон.

Демо:

:enabled

Псевдокласс :enabled выбирает элементы, включенные для пользователя; по умолчанию все элементы формы включены, если в разметке им не задан атрибут disabled .

Мы можем использовать комбинацию :enabled и :disabled , чтобы обеспечить визуальную обратную связь, улучшая тем самым пользовательский опыт.

В следующем примере, ранее отключенное поле ввода name включено, к нему добавлена однопиксельная граница зеленого цвета и полная непрозрачность.

Совет: использование в разметке enabled=»enabled» не требуется, достаточно просто enabled ; исключением является только XHTML.

Демо:

:in-range

Псевдокласс :in-range выбирает элементы, которым задан диапазон и значение, которых входит в этот диапазон.

В следующем примере поле ввода поддерживает диапазон между 5 и 10, все значения между ними вызовут измение цвета границы поля на зеленый.

Демо:

:out-of-range

Псевдокласс :out-of-range выбирает элемент, у которого есть диапазон и значение которого не входит в этот диапазон

В следующем примере поле ввода поддерживает диапазон от 1 до 12 — для всех остальных значений будет задан оранжевый цвет границы поля.

Демо:

:indeterminate

Псевдокласс :indeterminate выбирает элементы ввода типа радиокнопок и чекбоксов, которые не выделены или выделение которых снято после загрузки страницы.

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

Демо:

:valid

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

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

:invalid

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

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

Демо:

:optional

Псевдокласс :optional выбирает поля ввода, которые не являются обязательными. Другими словами, любой элемент input без атрибута required будет выбран псевдоклассом :optional .

В следующем примере поле ввода опционально — у него нет атрибута required и поэтому текст в этом поле будет серым.

:read-only

Псевдокласс :read-only выбирает элемент, которые не может быть отредактирован пользователем. Он похож на :disabled — и выбор между ними зависит от использованного атрибута в разметке.

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

В следующем примере у элемента input есть атрибут readonly . Мы выделим этот элемент серым цветом благодаря псевдоклассу :read-only .

Демо:

:read-write

Псевдокласс :read-write выбирает элементы, которые могут редактироваться пользователем. Он может работать со всеми элементами HTML с атрибутом contenteditable .

Этот псевдокласс можно сочетать с псевдоклассом :focus для улучшения пользовательского опыта в определенных ситуациях.

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

Демо:

:required

Псевдокласс :required выбирает поля ввода, которым задан атрибут required .

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

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

Демо:

:scope (эксп.)

Псевдокласс :scope имеет смысл, когда он привязан к HTML-атрибуту scoped тега style .

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

В следующем примере, у блока HTML есть стили с атрибутом scoped , поэтому весь текст второго элемента section будет выделен курсивом.

Демо:

Псевдоклассы, связанные с языком страницы

Языковые псевдоклассы связаны с текстом, содержащимся на странице. Они не работают с медиа-контентом типа изображений или видео.

:dir (эксп.)

Псевдокласс :dir выбирает элемент, направленность текста в котором определена в документе. Другими словами, чтобы использовать этот псевдокласс, нам надо в разметке у соответствующего элемента добавить атрибут dir .

На данный момент поддерживается два направления текста: ltr (слева направо) и rtl (справа налево).

На момент написания статьи только Firefox (с префиксом -moz-dir() ) поддерживается псевдокласс :dir . В будущем префикс, скорее всего, будет не нужен, поэтому в примерах селектор задан как с префиксом, так и без него.

Примечание: Сочетание префиксной и безпрефиксной версий в одном правиле не работает. Надо создавать два отдельных правила.

В следующем примере оранжевым цветом будет выделен параграф на арабском (как известно, текст в нем пишется справа налево).

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

Демо:

Псевдокласс :lang выбирает элемент с указанным языком. Язык может быть задан с помощью атрибута lang=»» , соответствующего элемента meta или же в HTTP-заголовках.

Атрибут lang=»» обычно используется с тегом html , но он также может применяться и к любому другому тегу.

Для чего этом можно использовать? Например, общей практикой является использование традиционных для каждого языка кавычек с помощью свойства CSS quotes . Однако большинство браузеров (включая IE9 и выше) способны добавлять нужные кавычки автоматически, если они не объявлены в CSS.

Илон Маск рекомендует:  uKit – продвинутый инструмент для создания бизнес-сайтов

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

Вот, например, немецкие кавычки, добавленные браузером:

Однако, в большинстве случаев, немецкие кавычки добавленные в CSS выглядят так:

Верными являются оба варианта. Поэтому решение остается за вами — отдать ли выбор кавычек на усмотрение браузера или использовать псевдокласс :lang и свойство CSS quotes .

Давайте добавим кавычки с помощью CSS.

Демо:

Остальные псевдоклассы

Теперь перейдем к оставшемся псевдоклассам и их функциональности

Псевдокласс :root ссылается на высший родительский элемент в документе.

Виртуально во всех случаях в роли :root будет элемент html . Однако это может быть и другой элемент, если используется другой язык разметки, такой как SVG или XML.

Давайте добавим фоновый цвет к элементу html .

Примечание: мы можем добиться того же эффекта, использовав в качестве селектора html . Но так как :root псевдокласс у него большая специфичность, чем у селектора элемента.

:fullscreen (эксп.)

Псевдоклассс :fullscreen выбирает элемент, выведенный на всю ширину экрана.

Однако, он не рассчитан на работу при нажатии пользователем F11 и переходе браузера в полноэкранный режим. Он скорее ориентирован на работу с JavaScript Fullscreen API, предназначенном для изображений, видео и игр, выполняющихся в родительском контейнере.

О переходе в полноэкранный режим выводится сообщение в верхней части браузера, вернуться из него можно нажав клавишу Escape . Мы сталкиваемся с этим при просмотре видео в максимальном размере на YouTube или Vimeo.

Если вы собираетесь использовать псевдокласс :fullscreen , учитывайте, что стили браузеров в этом режиме очень различны. И вам придется использвать браузерные префиксы не только в CSS, но и в JavaScript. Я рекомендую использовать библиотеку Эрнан Райчерта screenfull.js, решающую большую часть проблем с кроссбраузерными глюками.

Рассмотрение Fullscreen API находится за пределами этой статьи, вот сниппет, который будет работать в браузерах на движках WebKit и Blink.

Демо:

Псевдоэлементы

Как упоминалось в начале статьи, псевдоэлементы можно сравнить с виртуальными элементами, которые можно обрабатывать как обычные элементы HTML. Они не существуют в дереве документа или в DOM, это значит, что мы их создаем с помощью CSS.

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

::before/:before

Псевдоэлемент :before , также как и его сосед :after добавляет содержимое (текст или форму) к другому элементу HTML. Еще раз отмечу, что этого контента нет в DOM, но им можно манипулировать, как будто он есть. Свойство content надо добавлять в CSS.

Запомните, что добавленный в псевдоэлемент текст нельзя выделить.

В результате будет выведено:

Примечание: Обратили внимание на пробел после “Hello ”? Да, о пробелах надо позаботиться самостоятельно.

::after/:after

Псевдоэлемент :after также используется для добавления содержимого (текста или формы) к другому элементу HTML. Этот контент отсутствует в DOM, но им можно манипулировать, как будто он есть; свойство content надо добавлять в CSS. Текст, добавленный в псевдоэлемент, нельзя выделить.

В результате будет выведено:

::backdrop (эксп.)

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

Примечание: для псевдоэлемента ::backdrop обязательно двойное двоеточие, иначе он не работает.

Разовьем наш пример с псевдоклассом :fullscreen :

Демо:

::first-letter/:first-letter

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

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

Совет: этот псевдоэлемент способен захватывать первую букву, сгенерированного контента в :before , несмотря на его отсутствие в DOM.

::first-line/:first-line

Псевдоэлемент :first-line выбирает первую строку в элементе. Он не работает со строчными элементами, только с блочными.

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

::selection

Псевдоэлемент ::selection используется для стилизации выделенного текста. Браузеры на движке Gecko пока используют версию с префиксом ::-moz-selection .

Примечание: сочетание в одном правиле синтаксиса с префиксом и без префикса не работает, надо создавать два отдельных правила.

::placeholder (эксп.)

Псевдоэлемент ::placeholder выбирает текст, добавленный в качестве заглушки в элементы формы с помощью атрибута placeholder .

Его также можно указывать как ::input-placeholder , этот синтаксис фактически и используется в CSS.

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

В некоторых браузерах (IE 10 и Firefox до версии 18), псевдоэлемент ::placeholder реализован как псевдокласс, но во всех остальных браузерах это псевдоэлемент, поэтому если вы не поддерживаете старые версии Firefox и IE 10, вы будете писать примерно такой код:

Заключение

Итак, похоже, это все.

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

Тщательно тестируйте код. Хорошо реализованные псевдоклассы и псевдоэлементы должны пройти долгий путь.

CSS — Селекторы

На этом уроке мы изучим основные виды селекторов, и научимся их использовать на практике.

Что такое CSS селекторы?

Селекторы — это один из фундаментальных механизмов CSS. Именно они определяют то, к каким элементам будут применены стили, указанные в фигурных скобках.

Пример CSS правила:

В этом CSS правиле, p — это селектор , в данном случае — это селектор элемента . Это CSS правило устанавливает стили (CSS свойства, описанные в нём) для всех элементов p на странице.

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

Базовые селекторы

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

Селектор по элементу (тегу)

Селектор по элементу предназначен для выбора элементов по имени тега.

Пример задания правила для всех элементов p на странице:

Селектор по классу

Селектор по классу предназначен для выбора элементов по классу (значению атрибута class ).

Пример задания правила для всех элементов, имеющих класс center :

Селектор по идентификатору (id)

Селектор по идентификатору предназначен для выбора элемента по идентификатору (значению атрибута id ).

Пример задания правила для элемента, имеющего в качестве значения атрибута id значение footer :

Универсальный селектор

Универсальный селектор (селектор звёздочка) предназначен для выбора всех элементов.

Пример задания правила для всех элементов на странице:

CSS селекторы по атрибуту

Селекторы по атрибуту предназначены для выбора элементов по имени атрибута и (или) его значению.

Типы селекторов по атрибуту:

  • [attr] – по имени атрибута;
  • [attr=value] – по имени и значению атрибута;
  • [attr^=value] – по имени и значению, с которого оно должно начинаться;
  • [attr|=value] – по имени атрибута и его значению, которое равно value или начинается со value- ;
  • [attr$=value] – по имени атрибута и значению, на которое оно должно заканчиваться;
  • [attr*=value] – по указанному атрибуту и значению, которое должно содержать value ;
  • [attr

=value] – по имени атрибута и значению, которое содержит value отделённое от других с помощью пробела.

Пример задания правила для всех элементов на странице, имеющих атрибут target :

[attr=value]

Пример задания правила для всех элементов на странице, имеющих атрибут rel со значением nofollow :

[attr^=value]

Пример задания правила для всех элементов на странице, имеющих атрибут class , значение которого начинается с col :

[attr|=value]

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

[attr$=value]

Пример задания правила для всех элементов на странице, имеющих атрибут class , значение которого заканчивается на color :

[attr*=value]

Пример задания правила для всех элементов на странице, имеющих атрибут href , значение которого содержит подстроку youtu.be (например будет выбран элемент, если атрибут href у него равен https://youtu.be/TEOSuiNfUMA ):

Пример задания правила для всех элементов на странице, имеющих атрибут data-content , значение которого содержит news , отделённое от других с помощью пробела (например будет выбран элемент, если у него атрибут data-content равен hot-news news news-football ):

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

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

Псевдоклассы — это дополнение к основному селектору, которое позволяет выбрать элемент в зависимости от его особого состояния. Добавляется он к селектору c помощью символа : , т.е. так селектор:псевдокласс .

Псевдоклассы для выбора элементов в зависимости от их состояния

К этой группе псевдоклассов можно отнести псевдоклассы: :link , :visited , :hover , :active и :focus .

Псевдоклассы :link и :visited предназначены исключительно для ссылок (элементов a с атрибутом href ).

Псевдоклассы :hover , :active и :focus могут применяться не только к ссылкам, но и к другим элементам.

Псевдокласс :link предназначен для выбора не посещённых ссылок.

Пример задания правила для всех элементов a с классом external , которые пользователь ещё не посетил:

Псевдокласс :visited

Псевдокласс :visited предназначен для выбора посещённых ссылок.

Пример задания правила для всех элементов a , расположенных в .aside , пользователь которые уже посетил:

Псевдокласс :active

Псевдокласс :active предназначен для выбора элементов в момент когда они активируются пользователем. Например, когда пользователь нажал левой кнопкой мышкой на ссылку, но её ещё не отпустил. В основном данный класс применяется для ссылок ( a ) и кнопок ( button ), но может также использоваться и для других элементов.

Пример задания CSS правила для всех элементов a когда они активируются пользователем:

Псевдокласс :hover

Псевдокласс :hover предназначен для выбора элементов при поднесении к ним курсора (при наведении на них).

Пример задания CSS правила для всех элементов .btn-warning при поднесении к ним курсора:

При задании CSS-правил для ссылок с использованием псведоклассов :link , :visited , :hover и :active , их следует распологать в следеующем порядке:

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

Псевдокласс :focus

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

Пример задания CSS правила для элемента input[type=»text»] при нахождении его в фокусе:

По расположению среди соседей

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

Псевдоклассы, предназначенные для этого: :first-child , :last-child , :only-child , :nth-child(выражение) , :nth-last-child(выражение) .

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

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

Пример задания CSS правила для элементов li являющимися первыми дочерними элементами своего родителя:

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

Псевдокласс :last-child применяется для выбора элементов, которые являются последними дочерними элементами своего родителя.

Пример задания CSS правила для элементов .alert-warning , которые являются последними дочерними элементами своего родителя:

Псевдокласс :only-child

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

Селектор h2:only-child выберет все элементы h2 , если они являются единственными дочерними элементами своего родителя.


Действие аналогичное :only-child можно выполнить с помощью псевдоклассов :first-child и :last-child . Например селектор h2:only-child можно ещё реализовать так: h2:last-child:first-child .

Псевдокласс :nth-child(выражение)

Псевдокласс :nth-child() применяется для выбора элементов по их порядковому номеру в родителе. В качестве выражения можно использовать число, формулу или ключевые слова odd или even . Отсчёт элементов в родителе начинается с 1.

Формула имеет следующую запись: An + B . A и B — это числа, а n — счетчик, принимающий целые значения, начиная с 0 (т.е. 0, 1, 2, 3 . ).

Например, формула вида 3n + 2 будет определять элементы с порядковыми номерами (2, 5, 8, . ). Т.е. 3 * 0 + 2 , 3 * 1 + 2 , 3 * 2 + 2 , .

А например, формула вида 5n будет определять элементы с порядковыми номерами (0, 5, 10, . ). Т.е. 5 * 0 , 5 * 1 , 5 * 2 , .

Псевдокласс :nth-last-child(выражение)

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

По расположению среди соседей с учётом типа элемента

В CSS имеются псевдоклассы аналогичные :first-child , :last-child и т.д. Они отличаются от них только тем, что выполняют это с учётом типа элемента.

Список псевдоклассов, предназначенных для этого: :first-of-type , :last-of-type , :only-of-type , :nth-of-type(выражение) , :nth-last-of-type(выражение) .

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

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

Например, выберем все элементы p , которые являются первыми элементами указанного типа у своего родителя:

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

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

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

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

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

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

Псевдокласс :nth-of-type(выражение)

Данный псевдокласс предназначен для выбора элементов по их порядковому номеру в родителе с учетом их типа.

Псевдокласс :nth-of-type(выражение) похож на :nth-child(выражение) с разницей лишь а том, что он учитывает тип элемента. В качестве выражения также можно использовать число, формулу или ключевые слова odd или even . Отсчёт элементов в родителе начинается с 1.

Селектор p:nth-child(2) выберет второй по счёту элемент, если он является p , а селектор p:nth-of-type(2) веберет второй дочерний элемент p среди дочерних p .

Псевдокласс :nth-last-of-type(выражение)

Псевдокласс :nth-last-of-type(выражение) аналогичен классу :nth-of-type(выражение) с разницей в том, что отсчёт дочерних элементов ведётся с конца.

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

К этой группе можно отнести псевдоклассы :enabled , :disabled и :checked .

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

Псевдокласс :checked

Псевдокласс :checked предназначен для выбора элементов radio , checkbox и option внутри select , которые находятся во включенном состоянии.

В этом примере фон элемента label при отмеченном checkbox выделяется цветом. Выбор включенного чекбокса выполняется с помощью псевдокласса :checked .

Псевдокласс :enabled

Псевдокласс :enabled предназначен для выбора включенных элементов формы, с которыми пользователь может взаимодействовать, например, нажать на него или внести текст.

Пример, в котором установим для всех включенных элементов input фон:

Псевдокласс :disabled

Элементы формы могут кроме включенного состояния находиться ещё в отключенном.

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

Например, выберем все отключенные элементы input :

Остальные псевдоклассы

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

Псевдокласс :not() предназначен для выбора элементов, которые не содержат указанный селектор.

В качестве селектора можно указывать селекторы по тегам, классам, атрибутам, использовать псевдоклассы, т.е. всё кроме псведокласса :not() , несколько сгруппированных селекторов, псевдоэлементы, дочерние и вложенные селекторы:

При необходимости можно использовать несколько псевдоклассов :not() .

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

Псевдокласс :empty

Псевдокласс :empty предназначен для выбора пустых элементов (т.е. элементов, у которых нет дочерних узлов, в том числе текстовых).

Селектор div:empty выберет все пустые элементы div на странице.

Псевдокласс :root

Псевдокласс :root предназначен для выбора корневого элемента документа. В HTML документе данным элементом является . В отличие от селектора по тегу html данный псевдокласс имеет более высокий приоритет.

Применять :root можно например для объявления CSS переменных:

Псевдокласс :target

Псевдокласс :target предназначен для выбора элемента, идентификатор которого соответствует хэшу в URL-адресе.

В этом примере стили будут применены к элементу с , если хэш URL страницы будет равен #header-1 . Если же хэш будет равен #header-2 , то псевдокласс :target соответственно выберет элемент с и стили уже будут применены к нему.

Группировка селекторов

Для задания правил нескольким селекторам одновременно их необходимо перечислить через запятую.

Синтаксис: селектор1, селектор2, .

Пример задания правила для всех элементов h3 и h4 на странице:

Комбинирование селекторов

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

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

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

Селекторы отношений

В HTML документе каждый элемент всегда связан с другими элементами.

Виды отношений между HTML элементами:

  • родитель – элемент, непосредственно в котором находится рассматриваемый элемент;
  • предок – это элемент, который расположен на одном из уровней иерархии элементов, до которого можно дойти двигаясь от рассматриваемого элемента к его родителю, от его родителя к родителю его родителя и т.д.
  • дети – это элементы, непосредственно расположенные в текущем рассматриваемом элементе;
  • потомки (дочерние элементы) – это любые элементы, которые находятся в текущем элементе вне зависимости от уровня иерархии, в котором они расположены;
  • соседи (сиблинги) – это элементы, расположенные на том же уровне вложенности (иерархии), что и рассматриваемый элемент; или другими словами — это все другие элементы, которые имеют того же родителя что и текущий рассматриваемый элемент.

Более наглядно про отношения элементов приведено на рисунке. На этом рисунке отношения рассмотрены относительно элемента выделенного синим цветом.

В CSS имеется 4 вида селекторов отношений.

Первые два из них X Y и X > Y относятся к вложенным селекторам. Они предназначены для поиска элементов в зависимости от их нахождения внутри других.

Остальные два X + Y и X

Y являются CSS селекторами для выбора соседних элементов.

Эти селекторы называют составными или комбинацией селекторов. Так как они на самом деле состоят из нескольких селекторов, разделённых между собой с помощью специальных символов (комбинаторов). Всего различают 4 символа: пробел, знак > (больше), знак + и

Селектор X Y (для выбора вложенных или дочерних элементов)

Селектор X Y (предок потомки) предназначен для выбора элементов Y , находящихся в X .

Другими словами, селектор X Y предназначен для выбора элементов Y , являющихся потомками элементов определяемым селектором X .

Селекторы X Y называют контекстными или вложенными.

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

Селектор X > Y

Селектор X > Y (родитель > дети) предназначен для выбора элементов, определяемым селектором Y непосредственно расположенных в элементе, определяемым селектором X .

По другому можно сказать, что селектор X > Y предназначен для выбора Y , у которых родителем является элемент, определяемым X .

Например, комбинация селекторов li > ul выберет все элементы ul , которые непосредственно расположены в li .

Селектор X + Y

Селектор X + Y предназначен для выбора элементов Y , каждый из которых расположен сразу же после X . Элементы определяемым селектором X и Y должны находиться на одном уровне вложенности, т.е. быть по отношению друг к другу соседями (сиблингами).

Например, комбинация селекторов input + label выберет все элементы label , которые расположены сразу же за элементом input , и являющиеся друг по отношению к другу соседями (сиблингами).

Селектор X

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

span выберет все элементы span , расположенные после элемента p на том же уровне вложенности.

Приоритет селекторов

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

Специфичность селекторов удобно представлять в виде 4 чисел: 0,0,0,0 .

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

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

Как считать эти цифры? Каждый селектор в зависимости от типа имеет вес:

  • универсальный селектор (не добавляет вес) – 0,0,0,0 ;
  • селекторы по тегу, псевдоэлемент добавляют единичку к четвёртой цифре – 0,0,0,1 ;
  • селекторы по классу и по атрибуту, псевдоклассы добавляют единичку ко третьей цифре – 0,0,1,0 ;
  • селектор по идентификатору добавляют единичку ко второй цифре – 0,1,0,0 ;

Стили, расположенные в атрибуте style элемента, являются более специфичными по сравнению с селекторами. Вес этих стилей определяется единицей в первой цифре – 1,0,0,0 .

  • * – 0,0,0,0 ;
  • li – 0,0,0,1 ;
  • li::before – 0,0,0,2 ;
  • ul > li – 0,0,0,2 ;
  • div input+label – 0,0,0,3 ;
  • h1 + div[data-target] – 0,0,1,2 ;
  • .btn.show – 0,0,2,0 ;
  • ul li a.item – 0,0,1,3 ;
  • #aside div.show – 0,1,1,1 ;
  • style=». » – 1,0,0,0 ;

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

В этом примере элементу будет установлен тот фон к которому добавлено слово !important . !important перебивает любой вес.

Интересный случай, когда нужно определить какое значение CSS-свойства будет применено к элементу, если !important добавлено к нескольким из них.

В этом случае будет применено то значение CSS-свойства c !important у которого больше вес селектора.

К примеру, если добавить !important к CSS-свойству расположенному в style , то получим максимальную возможную специфичность, которую уже никак не перебьёшь.

В этом примере к элементу #message будет применено CSS-свойство font-size со значением 20px, т.к. хоть у каждого из них имеется состояние !importants , но специфичность style ( 1,0,0,0 ) больше чем у селектора p#message ( 0,1,0,1 ).

Каких селекторов нет в CSS?

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

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

Дата публикации: 2020-03-06

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

Как создать сайт самому?

Какие технологии и знания необходимы сегодня, чтобы создавать сайты самостоятельно? Узнайте на интенсиве!

:first-child и :last-child

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

Рассмотрим 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. На скриншоте ниже показан результат.

: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 ниже присваивает четным строкам в таблице светлый синевато-серый фон, результат можно посмотреть на скриншоте ниже:

One more step

Please complete the security check to access codepen.io

Why do I have to complete a CAPTCHA?

Completing the CAPTCHA proves you are a human and gives you temporary access to the web property.

What can I do to prevent this in the future?

If you are on a personal connection, like at home, you can run an anti-virus scan on your device to make sure it is not infected with malware.

If you are at an office or shared network, you can ask the network administrator to run a scan across the network looking for misconfigured or infected devices.

Another way to prevent getting this page in the future is to use Privacy Pass. You may need to download version 2.0 now from the Chrome Web Store.

Cloudflare Ray ID: 5341ecb91fc78f67 • Your IP : 188.64.174.135 • Performance & security by Cloudflare

Псевдокласс :nth-child

Псевдокласс :nth-child нужен для формирования красивого маркированного списка. Его возможности распространяются не только на тег (список), но и на другие теги.

Где VALUE может принимать следующие выражения:

  • odd — нечетные номера элементов
  • even — четные номера элементов
  • число — номер, который нужно выделить относительно своего родителя
  • выражение — вида (an+b), где a и b целые числа, такое задание позволяет задать практически любую последовательность

Пример №1. Красивая таблица

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

На странице преобразуется в следующее

Название Столбец 1 Столбец 2 Столбец 3
Строка 1 Элемент 1,1 Элемент 1,2 Элемент 1,3
Строка 2 Элемент 2,1 Элемент 2,2 Элемент 2,3
Строка 3 Элемент 3,1 Элемент 3,2 Элемент 3,3
Строка 4 Элемент 4,1 Элемент 4,2 Элемент 4,3
Строка 5 Элемент 5,1 Элемент 5,2 Элемент 5,3
Строка 6 Элемент 6,1 Элемент 6,2 Элемент 6,3
Строка 7 Элемент 7,1 Элемент 7,2 Элемент 7,3

Примечание 1
Важно отметить, что на конечный результат оказывает влияние в какой последовательности будут написаны tr:nth-child(1) и tr:nth-child(2n+1) . Если поменять их местами, то первая строка будет выделена серым цветом, а не черным, как предполагалось.

Примечание 2
Вместо аргумента (2n+1) в tr:nth-child(2n+1) можно было написать значение odd .

Пример №2. Последовательность одинаковых ячеек

Все строки начиная с 5ой строки будут выделены серым фоном. Для этого нужно написать запись nth-child(n+5) .

На странице преобразуется в следующее

Название Столбец 1 Столбец 2 Столбец 3
Строка 1 Элемент 1,1 Элемент 1,2 Элемент 1,3
Строка 2 Элемент 2,1 Элемент 2,2 Элемент 2,3
Строка 3 Элемент 3,1 Элемент 3,2 Элемент 3,3
Строка 4 Элемент 4,1 Элемент 4,2 Элемент 4,3
Строка 5 Элемент 5,1 Элемент 5,2 Элемент 5,3
Строка 6 Элемент 6,1 Элемент 6,2 Элемент 6,3
Строка 7 Элемент 7,1 Элемент 7,2 Элемент 7,3

Примечание
Если нужно задать первые элементы, то нужно написать nth-child(-n+5) , т.е. n с минусом.

Разница nth-child и nth-of-type

Псевдокласс nth-of-type делает практически то же самое, что и nth-child , то есть если бы мы в рассматриваемых примерах выше писали его, то ничего бы не изменилось.

Синтаксис nth-of-type такой же:

В чем же разница?

Псевдокласс nth-of-type ведет отчет количества элементов конкретного типа. Например

В случае первого варианта, будет выделен цветом Первый абзац.

Во втором варианте все более предсказуемо, будет выделен цветом второй абзац. Все дело в подсчете. nth-of-type считает количество тега

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

Притормози, дружище

Проходить главу «Селекторы, часть 2» можно после оформления подписки.

Консультация по телефону 8 800 555-86-28 .

Курсы

Профессии

Информация

Услуги

Остальное

Регистрация

Нажимая кнопку «Зарегистрироваться», вы даёте своё согласие на обработку персональных данных в соответствии с «Политикой конфиденциальности» и соглашаетесь с «Условиями оказания услуг».

Восстановление доступа

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

Забыли привязать эл. почту к профилю? Напишите нам, мы поможем.

Часть 3. Дочерние селекторы CSS. Дополнительные псевдоклассы

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

Дочерние селекторы CSS

В предыдущей статье мы рассказывали о родственных связях между элементами HTML-документа, в том числе и о дочерних элементах. Давайте посмотрим на примере, как эти связи можно использовать в CSS.

Представьте, что вам нужно присвоить стиль только тем тегам

, которые являются дочерними по отношению к , не затрагивая остальные

, дочерние по отношению к

Обратите внимание на символ > после body . С помощью него вы указываете, что стиль применяется исключительно для дочерних тегов

родителя . Если символ убрать, то стиль применится абсолютно ко всем тегам

, которые находятся внутри тега , хотя они могут и не являться для него дочерними.

Дополнительные псевдоклассы

В CSS3 существует ряд псевдоклассов для работы с дочерними элементами. Ниже приведено описание каждого из них, примеры использования, а также отличия между псевдоклассами вида «child» и «of-type».

  • :first-child – с помощью этого псевдокласса можно применить стиль к указанному элементу веб-страницы, при условии, что он является первым дочерним элементом своего родителя;
  • :last-child – стиль применяется к указанному элементу веб-страницы при условии, что он является последним дочерним элементом своего родителя;
  • :nth-child – позволяет выбрать четные (even) и нечетные (odd) дочерние элементы; также с помощью данного псевдокласса можно стилизовать чередующиеся дочерние элементы, используя выражения вида an+b и числа;
  • :only-child – применяется к дочернему элементу при условии, что тот является единственным ребенком у родителя;
  • :first-of-type – стиль применяется к первому элементу указанного типа (даже если этот элемент не является первым дочерним для своего родителя и над ним находятся другие дочерние элементы других типов);
  • :last-of-type – работает точно так же, как и предыдущий псевдокласс, с той лишь разницей, что стиль применяется к последнему элементу указанного типа;
  • :nth-of-type – по принципу работы похож на :nth-child , но ориентируется на тип элемента;
  • :only-of-type – применяется к дочернему элементу указанного типа при условии, что тот является у родителя единственным ребенком своего типа.

Пример использования :first-child, :last-child и :nth-child

Скриншот: применение :first-child, :last-child и :nth-child

Мы написали CSS стиль для дочерних элементов простого HTML-документа, где тег

,

. Разберем CSS по порядку.

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

), то стиль p:first-child уже не будет отображаться, поскольку

перестанет быть первым дочерним тегом. В данном случае первым дочерним элементом будет h2 .

Всё то же самое происходит и с правилом p:last-child – стиль CSS будет применен к тегу

лишь тогда, когда он будет являться последним дочерним элементом своего родителя. Добавьте после

любой другой тег отличного типа и вы увидите, что правило p:last-child перестанет применяться.

Правило p:nth-child(3) работает для третьего дочернего тега

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

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

Пример использования :first-of-type, :last-of-type, :nth-of-type и :only-of-type

Скриншот: применение :first-of-type, :last-of-type, :nth-of-type и :only-of-type

Первое правило CSS, которое вы видите – это p:first-of-type . Что оно делает? Оно выбирает дочерний элемент типа p , который первым встречается у родителя. И не важно, на каком месте среди элементов других типов находится данный тег – на первом, втором или десятом. В этом и заключается отличие между псевдоклассами :first-child и :first-of-type .

Второе правило – p:last-of-type – применяет стиль к последнему дочернему элементу типа p . Как видно из HTML-кода, после последнего тега

, присутствие которого никак не влияет на выполнение CSS-правила (в отличие от варианта с :last-of-child ).

Следующее правило – p:nth-of-type(3) – изменяет цвет шрифта на красный. Применяется этот стиль к тегу

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

, который по факту является пятым ребенком тега

с красным шрифтом находится на третьем месте (среди тегов своего типа). Таким образом работает данное правило.

Правила p:nth-of-type(even) и p:nth-of-type(odd) работают аналогично: поскольку перед двоеточием указано имя p , то выбираются четные и нечетные дочерние элементы типа p и окрашиваются в заданные цвета. Остальные элементы пропускаются.

Последнее правило – h3:only-of-type – применяется к содержимому тега

, делая текст подчеркнутым. Данный стиль работает лишь потому, что тег

является единственным дочерним элементом своего типа. Если в HTML-код добавить еще один тег

, стиль не будет применён.

Выводы

Дочерний селектор CSS позволяет изменить стиль дочернего элемента HTML-документа, исходя из того, кто является его родителем.

С помощью дополнительных псевдоклассов :first-child, :last-child, :nth-child, :only-child можно стилизовать дочерние элементы HTML-документа, ориентируясь на их местоположение, нумерацию в дереве элементов.

Псевдоклассы :first-of-type, :last-of-type, :nth-of-type, :only-of-type позволяют применять стиль к дочерним элементам HTML-документа, ориентируясь на их тип, а также на нумерацию в дереве элементов.

Илон Маск рекомендует:  Шаблон сайта шопинг-тур HTML, CSS, Photoshop (psd), 2 страницы
Понравилась статья? Поделиться с друзьями:
Кодинг, CSS и SQL