Мы принимаем к оплате:

«Подарочный сертификат» от нашего Учебного Центра – это лучший подарок для тех, кто Вам дорог! Оплате обучение и подарите Вашим родным и близким обучение по любому из курсов!!!

«Сертификат на повторное обучение» дает возможность повторно пройти обучение в нашем Учебном Центре со скидкой 1000 рублей!

А также:

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

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

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

Применяется к полям формы, у которых задан атрибут readonly.

Псевдокласс, с помощью которого задаётся стилевое оформление подсказывающего текста в Firefox.

Псевдокласс, с помощью которого задаётся стилевое оформление подсказывающего текста в Chrome.

Определяет стиль активной ссылки.

Применяется к элементам интерфейса, таким как переключатели (checkbox) и флажки (radio), когда они находятся в положение «включено»

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

Применяет стиль к заблокированным элементам форм.

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

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

Применяет стилевое оформление к первому дочернему элементу своего родителя.

Задает правила стилей для первого элемента в списке дочерних элементов своего родителя.

Определяет стиль для элемента получающего фокус.

Определяет стиль элемента при наведении на него курсора мыши, но при этом элемент еще не активирован.

Задает стиль для элементов форм, таким как флажки и переключатели, когда они находятся в неопределенном состоянии.

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

Задает стилевое оформление последнего элемента своего родителя.

Задает правила стилей для последнего элемента в списке дочерних элементов своего родителя.

Применяется к ссылкам, которые еще не посещались пользователем.

Задает правила стилей для элементов, которые не содержат указанный селектор.

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

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

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

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

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

Применяется к полям формы, доступных для изменения.

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

Определяет корневой элемент документа. В HTML этот селектор всегда соответствует элементу .

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

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

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

Pseudo-classes

A CSS pseudo-class is a keyword added to a selector that specifies a special state of the selected element(s). For example, :hover can be used to change a button's color when the user's pointer hovers over it.

/* Any button over which the user's pointer is hovering */ button:hover { color: blue; }

Pseudo-classes let you apply a style to an element not only in relation to the content of the document tree, but also in relation to external factors like the history of the navigator (:visited, for example), the status of its content (like :checked on certain form elements), or the position of the mouse (like :hover, which lets you know if the mouse is over an element or not).

Note: In contrast to pseudo-classes, pseudo-elements can be used to style a specific part of an element.

Syntax

selector:pseudo-class { property: value; }

Like regular classes, you can chain together as many pseudo-classes as you want in a selector.

Index of standard pseudo-classes

Specification Status Comment

Fullscreen API	Living Standard	Defined :fullscreen.
HTML Living Standard	Living Standard	Defines when particular selectors match HTML elements.
Selectors Level 4	Working Draft	Defined :any-link, :blank, :local-link, :scope, :drop, :current, :past, :future, :placeholder-shown, :user-invalid, :nth-col(), :nth-last-col(), :is() and :where(). Changed :empty to behave like :-moz-only-whitespace . No significant change for other pseudo-classes defined in Selectors Level 3 and HTML5 (though semantic meaning not taken over).
HTML5	Recommendation	Copies the relevant section from the canonical (WHATWG) HTML spec.
CSS Basic User Interface Module Level 3	Recommendation	Defined :default, :valid, :invalid, :in-range, :out-of-range, :required, :optional, :read-only and :read-write, but without the associated semantic meaning.
Selectors Level 3	Recommendation	Defined :target, :root, :nth-child(), :nth-last-of-child(), :nth-of-type(), :nth-last-of-type(), :last-child, :first-of-type, :last-of-type, :only-child, :only-of-type, :empty and :not(). Defined the syntax of :enabled, :disabled, :checked, and :indeterminate, but without the associated semantic meaning. No significant change for pseudo-classes defined in CSS Level 2 (Revision 1).
CSS Level 2 (Revision 1)	Recommendation	Defined :lang(), :first-child, :hover, and :focus. No significant change for pseudo-classes defined in CSS Level 1.
CSS Level 1	Recommendation	Defined :link, :visited and :active, but without the associated semantic meaning.

Tags:

CSS псевдоклассы и их применение в веб-разработке

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

Псвевдокласс – это стилевой класс элемента, который мы на самом деле не задавали сами, просто он есть сам по себе. Например, увидев в html такой код:

Абзац

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

Для ссылок

:visited – цвет посещенной ссылки (по которой уже кликали). :active – активная ссылка. Стиль применяется в то мгновение, когда происходит клик по ссылке.

Для полей ввода и ссылок

:focus – стиль применяется к элементу, который получает фокус ввода. На самом деле для полей ввода появилось очень много новых классных псевдоклассов, но все они впервые введены в CSS3, а в этой статье я хотел бы обсудить только самые простые. О CSS3 селекторах обязательно будет статья в дальнейшем.

Для всех элементов

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

Это не все псевдоклассы, но самые популярные и необходимые. О более специфических я обязательно напишу в будущем. Подписывайтесь на обновления, если не хотите пропустить. Собственно, все псевдоклассы помечаются в css одинаково, через двоеточие. К тому же можно комбинировать селекторы и получать интересные возможности: a:visited:active – стили для уже посещенной ссылки, на которую кликают. div:first-child:hover – стили для всех первых блоков в их родителях, на которые наводят курсор.

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

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

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

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

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

селекторы *-of-type;
селекторы *-child.

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

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

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

Внутренняя ссылка 1 Внутренняя ссылка 2

Элемент списка 1
Элемент списка 2

Внутренняя 3 Внешняя ссылка 1 Внешняя ссылка 2

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

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

... Внешняя ссылка 1 Внешняя ссылка 2

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

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

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

Внутренняя ссылка 1 Внутренняя ссылка 2

... Внутренняя ссылка 3

Контейнер с классом main имеет 4 дочерних элемента: сначала два элемента , затем элемент ненумерованного списка ul и снова -элемент. Аналогичным образом спускаемся вниз по схеме согласно порядку вложенности элементов, отрисовывая полноценное дерево HTML-кода. Внимательно изучите структуру DOM-дерева, чтобы легче воспринимать оставшуюся часть статьи.

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

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

выбираемый-элемент:селектор { /* стиль */ }

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

a:only-of-type { border: 2px solid black; }

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

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

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

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

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

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

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

Обратите внимание, что -элементы для первой и второй секций не были выбраны из-за того, что они не являются единственными для своих секций. Иначе говоря: одна секция — один элемент .

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

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

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

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

a:first-of-type { border: 2px solid black; }

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

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

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

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

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

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

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

a:nth-of-type(1) { border: 2px solid black; }

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

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

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

a:nth-of-type(0) { border: 2px solid black; }

Надеюсь, вы догадались, что произошло. Если нет, то объясняю: в этом случае ни один элемент не будет выбран, так как счёт начинается с 1, а не с 0. То же самое произойдёт, если вы напишете a:nth-of-type(5) или a:nth-of-type(6/7/8) вместо a:nth-of-type(0). Это легко можно объяснить: в DOM нет 5-го, 6-го, 7-го или 8-го элемента , поэтому в данном случае селектор ничего не выберет.

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

a:nth-of-type(2) { border: 2px solid black; }

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

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

a:nth-of-type(3) { border: 2px solid black; }

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

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

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

a:nth-of-type(n) { border: 2px solid black; }

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

a:nth-of-type(0) { border: 2px solid black; } // n = 0 a:nth-of-type(1) { border: 2px solid black; } // n = 1 a:nth-of-type(2) { border: 2px solid black; } // n = 2 a:nth-of-type(3) { border: 2px solid black; } // n = 3 a:nth-of-type(4) { border: 2px solid black; } // n = 4...

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

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

a:nth-of-type(2n + 1) { border: 2px solid black; }

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

// n = 0 подразумевает эту операцию: (2 * 0) + 1 = 1 a:nth-of-type(1) { border: 2px solid black; }// n = 1 подразумевает эту операцию: (2 * 1) + 1 = 3 a:nth-of-type(3) { border: 2px solid black; }// n = 2 подразумевает эту операцию: (2 * 2) + 1 = 5 – Но в данном случае ни один элемент выбран не будет, так как у нас нет 5-го элемента ни в одной из секций. a:nth-of-type(5) { border: 2px solid black; }...

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

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

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

a:nth-last-of-type(1) { border: 2px solid black; }

Обратите внимание, что в каждой секции нумерация элементов идёт справа налево. Это и есть единственное отличие от предыдущего селектора. В :last-of-type также можно использовать числа, формулы и выбор по чётным и нечётным номерам элементов. Главное запомнить, что для этого селектора работает обратный отбор, его следует читать справа налево. Иначе говоря, последний элемент превращается в первый, предпоследний превращается во второй и т. д.

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

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

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

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

a:only-child { border: 2px solid black; }

Как вы видите, селектор выбрал два -элемента, каждый из которых вложен в элемент «список» li. Почему так и как это работает: only child дословно переводится как «единственный ребёнок / единственный дочерний элемент», поэтому селектор выбирает только те -элементы, у которых родительский элемент имеет только один дочерний элемент —. В нашем случае каждый li имеет по одному родительскому и по одному дочернему элементу, поэтому они и были выбраны.

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

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

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

a:first-child { border: 2px solid black; }

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

Если вы не поняли, почему первый дочерний -элемент в body не был выбран, то сейчас объясню. Дело в том, что он является первым только среди дочерних -элементов в этой секции. Среди всех дочерних элементов он — второй, так как первый — это контейнер с классом main.

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

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

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

a:last-child { border: 2px solid black; }

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

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

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

a:nth-child(1) { border: 2px solid black; }

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

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

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

a:nth-child(2n - 1) { border: 2px solid black; }

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

// n = 0 Подразумевает эту операцию: (2 * 0) - 1 = 0 - 1 = -1 a:nth-child(-1) { border: 2px solid black; } | не выбирает ничего// n = 1 подразумевает эту операцию: (2 * 1) - 1 = 2 - 1 = 1 a:nth-child(1) { border: 2px solid black; }// n = 2 подразумевает эту операцию: (2 * 2) - 1 = 4 - 1 = 3 a:nth-child(3) { border: 2px solid black; }// n = 3 подразумевает эту операцию: (2 * 3) - 1 = 6 - 1 = 5 a:nth-child(5) { border: 2px solid black; } | не выбирает ничего

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

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

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

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

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

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

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

a:nth-last-child(1) { border: 2px solid black; }

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

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

Заключение

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

Перевод статьи «How CSS pseudo-classes work, explained with code and lots of diagrams»

Подобрали два теста для вас: — А здесь можно применить блокчейн? — Серверы для котиков: выберите лучшее решение для проекта и проверьте себя.