Псевдоселекторы, псевдоэлементы и псевдоклассы в CSS
Псевдоклассы — это селекторы, которые определяют элементы на странице не по классам, прописанным разработчиком, а по специфическому состоянию HTML-элементов. Например, когда на элемент страницы наводится курсор мыши, он переходит в специфическое состояние. Чтобы задать обычный стиль этому элементу, мы используем какой-нибудь основной селектор, а чтобы задать стиль при наведении курсора на него, мы используем псевдокласс. При описании стилей псевдокласса его селектор всегда начинается с «двоеточия»:
:<имя псевдокласса> {
<описываем стили>
}
Псевдоклассы бывают разные. Одни могут отвечать за действия пользователя на странице, а другие — за расположение дочернего элемента относительно родительского.
Псевдоклассы CSS, которые отвечают за действия пользователя
Псевдоклассы, которые «включаются» при определенных действиях пользователя:
«:hover». Этот псевдокласс используется, когда мы хотим задать стили элементу, на который навели курсор. В этом случае синтаксис селектора будет таким: « :hover».
«:focus»
Этот псевдокласс помогает задать стиль элементу, на котором сфокусировано внимание пользователя. Например, пользователь заполняет какую-то форму на сайте
В момент заполнения формы ее можно как-то выделить при помощи данного псевдокласса.
«:link» и «visited». Эти псевдоклассы применяются исключительно к ссылкам. Первый задает стили ссылке, которую еще не посетили, а второй — ссылке, которую уже посетили.
«:active». Этот псевдокласс используется в тот момент, когда пользователь активно взаимодействует с элементом страницы. Например, пользователь только нажал на ссылку или кнопку, но еще не отпустил их.
Псевдоклассы, которые определяют «соседство» html-элементов
Псевдоклассы, которые отвечают за расположение дочернего элемента в родительском, иногда называю псевдоклассами «соседства».
Псевдоклассы «соседства»:
-
«:first-child». Этот псевдокласс всегда определяет первый элемент собственного родителя. Например, у нас есть большой текст, и мы хотим выделить в нем стилями первый абзац. В этом случае мы к тексту применяем данный псевдокласс и описываем стили. Псевдокласс «привязывается» не к конкретному элементу, а лишь к его расположению. Например, в начале нашего текста добавляем новый абзац — теперь он будет попадать под действие этого псевдокласса.
-
«:last-child». Работает точно так же, как и первый псевдокласс, но только с последними дочерними элементами родителя.
-
«:only-child». Этот псевдокласс определяет все дочерние элементы родительского класса, при условии что они являются единственными у своего родителя.
-
«:nth-child(номер элемента)». Этот псевдокласс позволяет обратиться к конкретному номеру элемента своего родителя. Например, у вас на сайте реализован список, вы хотите выбрать конкретный пункт списка и выделить его стилями — тогда вам поможет данный псевдокласс.
Это не все псевдоклассы. Если в описанных выше псевдоклассах заменить слово «child» на «of-type», тогда мы получим серию псевдоклассов, которые будут определять дочерний элемент по его типу, а не место расположения. Например, у вас есть некий блок, внутри которого много разных элементов:
<section>
<h2>…</h2>
<p>…</p>
<form>…</form>
<h3>…</h3>
<p>…</p>
<p>…</p>
</section>
Если прописать псевдокласс «p: first-child», тогда в этом случае ни один элемент не будет выбран, потому что первым дочерним элементом не является абзац. Но если прописать псевдокласс «p:first-of-type», тогда будет выбран «первый абзац», хотя фактически он является вторым дочерним элементом. В остальном «child» и «of-type» работают идентично. Но и на этом псевдоклассы не заканчиваются. Мы привели лишь те, которые наиболее часто применяются.
Псевдоэлементы CSS
Псевдоэлементы работают по похожему принципу, как и псевдоклассы, однако они работают так, будто на странице добавлен новый элемент, а не применены стили к существующему элементу. Каждый псевдоэлемент обозначается с использованием 2-х двоеточий:
::<имя псевдоэлемента>
Несколько основных псевдоэлементов, которые наиболее часто используются
-
«::after». Определяет псевдоэлемент, который появится после существующего, родительским элементом.
-
«::before». Определяет псевдоэлемент, который появляется перед существующим, родительским элементом.
Эти два псевдоэлемента используются наиболее часто в таблицах стилей. Есть еще несколько, но они используются в специфичных случаях и крайне редко.
Пример 1: Эффект при нахождении указателя над ссылкой
Эффекты для положения указателя мыши над ссылкой стали уже общим местом. Мы
рассмотрим несколько дополнительных примеров для псевдокласса .
Пример 1a: Расстояние между буквами
Как вы помните из Урока 5, расстояние между
символами можно установить свойством . Это можно
применить для ссылки:
Показать пример
Пример 1b: UPPERCASE и lowercase
В Уроке 5 мы рассмотрели свойство ,
которое может переключать символы с верхнего на нижний регистр. Это также можно
использовать для создания эффектов на ссылке:
Показать пример
Эти два примера показывают почти безграничные возможности комбинирования
различных свойств. Вы можете создавать свои собственные эффекты — попробуйте!
Селектор псевдокласса :where()
Селектор псевдокласса почти идентичен , за исключение одного критического отличия: он всегда будет иметь нулевую специфичность. Это имеет невероятные последствия для людей, создающих фреймворки, темы и дизайн-системы. Используя селектор псевдокласса , автор может установить значения по умолчанию, а последующие разработчики могут включать переопределения или расширения без противоречий в специфичности.
Рассмотрим следующий набор стилей . Используя , даже с селектором с более высокой специфичностью, специфичность остаётся нулевой. Как вы думаете, какой цвет рамки будет у изображения в следующем примере?
Первое правило имеет нулевую специфичность, поскольку содержится в селекторе псевдокласса. Итак, против второго правила — победит второе. Введя селектор в качестве последнего правила, оно побеждает благодаря каскаду. Это потому, что оно будет вычисляться с той же специфичностью, что и правило , поскольку часть не увеличивает специфичность.
Использование селектора псевдокласса вместе с резервными вариантами немного сложнее из-за нулевой специфичности, поскольку вероятно, это является причиной почему вы используете его вместо . И если вы добавите резервные правила, они, вероятно, превзойдут в силу его природы. У него лучшая поддержка чем у , поэтому попытка использовать его для создания запасного варианта вряд ли принесёт большой выигрыш. По сути, помните о невозможности правильно создать резервные правила для и внимательно проверьте свои собственные данные, чтобы определить для вашей уникальной аудитории.
Вы можете сами протестировать с правилами указанными выше:
Допустимые значения для пользовательских свойств
У обычного CSS-свойства можно задать только разрешенные по стандарту значения. Согласно стандарту пользовательских свойств, в качестве значения можно использовать любое существующее корректное CSS-значение. Например, как у всех следующих пользовательских свойств:
.element::before {
—color: rgba(0, 0, 0, 1);
—hex: #000000;
—value: 20px;
—number: 3;
—text: «Hey, what’s up?»;
—keyword: currentColor;
}
Для примера зададим рамку с цветом #800080 для кнопки:
button {
—netologyBrandColor: #800080;
border-width: 2px;
border-style: solid;
border-color: var(—netologyBrandColor);
}
Помимо стандартных значений, можно задать одно пользовательское свойство в качестве значения для другого.
button {
—netologyBrandColor: #800080;
—buttonBorderColor: var(—netologyBrandColor);
border-width: 2px;
border-style: solid;
border-color: var(—buttonBorderColor);
}
Результат ничем отличается от предыдущего, и у кнопки все так же рамка с цветом #800080.
Если у пользовательского свойства —netologyBrandColor будет некорректное значение для свойства border-color, например 18px, то рамка станет черной.
button {
—netologyBrandColor: 18px;
—buttonBorderColor: var(—netologyBrandColor);
border-width: 2px;
border-style: solid;
border-color: var(—buttonBorderColor);
}
Дело в том, что прежде чем браузер применит значение пользовательского свойства для встроенного свойства, он проверит его на корректность. Если значение доступно для встроенного свойства, то браузер применит его. А если нет, то установит для встроенного свойства значение по умолчанию.
В нашем случае 18px некорректное значение для встроенного свойства border-color, и поэтому браузер установит значение по умолчанию, т.е currentColor. Это очень легко проверить, задав для свойства color значение #800080:
button {
—netologyBrandColor: 18px;
—buttonBorderColor: var(—netologyBrandColor);
border-width: 2px;
border-style: solid;
border-color: var(—buttonBorderColor);
color: #800080;
}
Как видим, браузер применил значение #800080 для рамки. В этом примере я использовал полный синтаксис, чтобы установить рамку. Но мы можем использовать краткий, а именно свойство border.
button {
—netologyBrandColor: 18px;
—buttonBorderColor: var(—netologyBrandColor);
border: 2px solid var(—buttonBorderColor);
color: #800080;
}
Здесь нас ожидает еще один нюанс. В стандарте есть отдельный раздел, в котором описано поведение пользовательских свойств в такой ситуации. Согласно ему, если пользовательское свойство имеет некорректное значение для встроенного свойства, то это пользовательское свойство является невалидным, поэтому браузер проигнорирует встроенное свойство.
В нашем примере у встроенного свойства border в качестве одного из значений установлено пользовательское свойство —buttonBorderColor с некорректным значением 18px. Согласно описанному алгоритму, браузер просто проигнорировал свойство border, поэтому у элемента пропала рамка.
Interactive states #
The following pseudo-classes apply due to an interaction a user has with your page.
Browser support
- Chrome 1, Supported 1
- Firefox 1, Supported 1
- Edge 12, Supported 12
- Safari 2, Supported 2
If a user has a pointing device like a mouse or trackpad, and they place it over an element, you can hook on to that state with to apply styles. This is a useful way to hint that an element can be interacted with.
Browser support
- Chrome 1, Supported 1
- Firefox 1, Supported 1
- Edge 12, Supported 12
- Safari 1, Supported 1
This state is triggered when an element is actively being interacted with— such as a click—before click is released. If a pointing device like a mouse is used, this state is when the click starts and hasn’t yet been released.
, , and
Browser support
- Chrome 1, Supported 1
- Firefox 1, Supported 1
- Edge 12, Supported 12
- Safari 1, Supported 1
If an element can receive focus—like a — you can react to that state with the pseudo-class.
You can also react if a child element of your element receives focus with .
Focusable elements, like buttons, will show a focus ring when they are in focus—even when clicked. In this sort of situation, a developer will apply the following CSS:
This CSS removes the default browser focus ring when an element receives focus, which presents an accessibility issue for users who navigate a web page with a keyboard. If there is no focus style, they won’t be able to keep track of where focus currently is when using the tab key. With you can present a focus style when an element receives focus via the keyboard, while also using the rule to prevent it when a pointer device interacts with it.
Browser support
- Chrome 1, Supported 1
- Firefox 1, Supported 1
- Edge 12, Supported 12
- Safari 1.3, Supported 1.3
The pseudo-class selects an element that has an matching a URL fragment. Say you have the following HTML:
You can attach styles to that element when the url contains .
This is useful for highlighting areas that might have been specifically linked to, such as the main content on a website, via a skip link.
Типы ссылок
Каждая ссылка может находиться в разных состояниях, причём можно отдельно установить стиль ссылки для каждого состояния. Итак, у любой ссылки есть следующие состояния, которые управляются соответствующими псевдоклассами:
- :link — ссылка с атрибутом href, по которой пока не переходили;
- :active — активная ссылка (по ней щёлкнули, но кнопку мыши не отпустили);
- :visited — посещённая ссылка (по которой уже щёлкали) и сохранённая в истории браузера;
- :hover — ссылка, на которую навели курсор мыши;
- :focus — ссылка, получившая фокус (это происходит, если перейти к ссылке, нажимая клавишу Tab на клавиатуре).
Псевдоклассы, определяющие состояние элементов
К этой группе относятся псевдоклассы, которые распознают текущее состояние элемента и применяют стиль только для этого состояния.
:active
Происходит при активации пользователем элемента. Например, ссылка становится активной, если навести на неё курсор и щёлкнуть мышкой. Несмотря на то, что активным может стать практически любой элемент веб-страницы, псевдокласс :active используется преимущественно для ссылок.
:link
Применяется к непосещенным ссылкам, т. е. таким ссылкам, на которые пользователь ещё
не нажимал. Браузер некоторое время сохраняет историю посещений, поэтому
ссылка может быть помечена как посещенная хотя бы потому, что по ней был зафиксирован
переход ранее.
Запись A {…} и A:link
{…} по своему результату равноценна, поскольку в браузере даёт один
и тот же эффект, поэтому псевдокласс :link можно
не указывать. Исключением являются якоря, на них действие :link не распространяется.
:focus
Применяется к элементу при получении им фокуса. Например, для текстового поля
формы получение фокуса означает, что курсор установлен в поле, и с помощью клавиатуры
можно вводить в него текст (пример 15.1).
Пример 15.1. Применение псевдокласса :focus
HTML5CSS 2.1IECrOpSaFx
Результат примера показан ниже (рис. 15.1). Во второй строке находится курсор, поэтому текстовое поле получило фокус.
Рис. 15.1. Изменение стиля текста при получении фокуса
В данном примере в текстовом поле содержится предварительный текст, он определяется
значением атрибута value тега <input>.
При щелчке по элементу формы происходит получение полем фокуса, и цвет текста
меняется на красный. Достаточно щёлкнуть в любом месте страницы (кроме текстового
поля, естественно), как произойдет потеря фокуса и текст вернётся к первоначальному
чёрному цвету.
Результат будет виден только для тех элементов, которые могут
получить фокус. В частности, это теги <a>, <input>, <select> и <textarea>.
:hover
Псевдокласс :hover активизируется, когда курсор
мыши находится в пределах элемента, но щелчка по нему не происходит.
:visited
Данный псевдокласс применяется к посещённым ссылкам. Обычно такая ссылка меняет
свой цвет по умолчанию на фиолетовый, но с помощью стилей цвет и другие параметры
можно задать самостоятельно (пример 15.2).
Пример 15.2. Изменение цвета ссылок
HTML5CSS 2.1IECrOpSaFx
Результат примера показан на рис. 15.2.
Рис. 15.2. Вид ссылки при наведении на неё курсора мыши
В данном примере показано использование псевдоклассов совместно со ссылками.
При этом имеет значение порядок следования псевдоклассов. Вначале указывается :visited, а затем идёт :hover,
в противном случае посещённые ссылки не будут изменять свой цвет при наведении
на них курсора.
Селекторы могут содержать более одного псевдокласса, которые перечисляются подряд через двоеточие, но только в том случае, если их действия не противоречат друг другу. Так, запись A:visited:hover является корректной, а запись A:link:visited — нет. Впрочем, если подходить формально, то валидатор CSS считает правильным любое сочетание псевдоклассов.
Браузер Internet Explorer 6 и младше позволяет использовать псевдоклассы :active и :hover только
для ссылок. Начиная с версии 7.0 псевдоклассы в этом браузере работают и для других элементов.
Псевдокласс :hover не обязательно должен применяться к ссылкам, его можно добавлять и к другим элементам документа. Так, в примере 15.3 показана таблица, строки которой меняют свой цвет при наведении
на них курсора мыши. Это достигается за счёт добавления псевдокласса :hover к селектору TR.
Пример 15.3. Выделение строк таблицы
HTML5CSS 2.1IECrOpSaFx
Результат примера показан ниже (рис. 15.3).
Рис. 15.3. Выделение строк таблицы при наведении на них курсора мыши
:first-line, :first-letter
Этот селектор немного отличается от описанных выше, но если его использовать с
умом, он может очень пригодиться при проектировании внешнего вида контента и
поможет улучшить его эстетические качества. Приём выделения первой буквы или
строки применяется в дизайне печатных изданий уже много лет, взгляните на эти
. Вам также стоит ознакомится со статьей Джона Тена (Jon
Tan) под названием «12 примеров типографики абзацев», написанной еще
в 2008, в которой описано как можно получить красивые эффекты полагаясь
исключительно на селекторы.
Также вас может заинтересовать «Буквица: история применения и передовой опыт
современности в CSS», целая статья от Лауры Франц (Laura Franz),
посвященная буквице.
Структурные псевдклассы CSS
Итак, предположим, у нас на сайте есть блок, внутри которого расположены другие элементы. Это могут быть отдельные блоки, пункты списка, абзацы, ссылки и так далее.
Если нам нужно каким-то образом изменить оформление первого элемента внутри этого блока, то мы можем использовать псевдокласс first-child.
Давайте разберём пример с таким кодом страницы:
PHP
<div class=»iw-blocks»>
<div class=»block»>
Январь
</div>
<div class=»block»>
Февраль
</div>
<div class=»block» lang=»en»>
March
</div>
…
<div class=»block»>
Декабрь
</div>
</div>
</div>
|
1 |
<div class=»iw-blocks»> <div class=»block»> Январь <div> <div class=»block»> Февраль <div> <div class=»block»lang=»en»> March <div> … <div class=»block»> Декабрь <div> <div> <div> |
У нас есть блок с классом iw-blocks, внутри которого находится несколько блоков с одинаковыми классами. Так же у них может не быть этих классов, и, тем не менее, мы сможем обратиться к любому из них, и дописать нужные CSS-свойства.
Чтобы дописать CSS свойства только для первого элемента нам нужно:
- 1.Сначала указываем класс или идентификатор родительского блока, того элемента, к которому нам нужно обратиться. В данном случае это класс iw-blocks.
- 2.Далее пишем тег или класс одного из нескольких повторяющихся элементов. В данном случае у нас повторяются несколько блоков с классом block. Поэтому мы можем использовать либо название класса, либо же просто написать тег div.
- 3.Через двоеточие пишем название псевдокласса CSS, которое мы будем использовать::first-child
-
4.В фигурных скобках зададим ему CSS-свойства. Например, изменим цвет фона и цвет текста.
PHP
.iw-blocks .block:first-child {
background:#034B85;
color:#fff;
}1
2
3
4.iw-blocks.blockfirst-child{
background#034B85;
color#fff;
}
После сохранения изменений и обновления страницы дописанные CSS-свойства сработают только для первого блока с классом block.
Бывают ситуации, когда нам нужно обратиться к элементу, стоящему внутри блока, к которому мы применяем псевдокласс.
PHP
<div class=»iw-blocks»>
<div class=»block»>
<p>Декабрь</p>
<p>Январь</p>
<p>Февраль</p>
</div>
…
</div>
|
1 |
<div class=»iw-blocks»> <div class=»block»> <p>Декабрь<p> <p>Январь<p> <p>Февраль<p> <div> … <div> |
В этом случае пишем так:
PHP
. iw-blocks .block:first-child p {
background:#ccc;
}
|
1 |
.iw-blocks.blockfirst-childp{ background#ccc; } |
Также вместо :first-child мы можем использовать любой из указанных ниже псевдоклассов CSS.
:nth-last-child – применяет стили для последнего дочернего элемента.
Например:
PHP
<ul class=”my-list”>
<li>Январь</li>
<li>Февраль</li>
<li>Март</li>
</ul>
|
1 |
<ul class=”my-list”> <li>Январь<li> <li>Февраль<li> <li>Март<li> <ul> |
CSS:
PHP
. my-list li:last-child {
background:#ccc;
}
|
1 |
.my-listlilast-child{ background#ccc; } |
- :nth-last-child(3) – применяет стили для третьего дочернего элемента с конца. Вместо значения 3 может стоять любое число.
- :nth-child(2) — применяет стили для второго дочернего элемента по порядку. В скобках может стоять любое другое число.
- :nth-child(2n) — этот псевдокласс применяет стили для каждого второго дочернего элемента по порядку.
:nth-child(even) — срабатывает для элементов с чётными порядковыми номерами.
:nth-child(odd) — срабатывает для элементов с нечётными порядковыми номерами.
.block span:first-of-type — применяется для первого тега span, стоящего внутри тега с классом block. Вместо span может указываться любой тег.
.block span:nth-last-of-type – срабатывает для последнего span в теге с указанным классом.
.block span:nth-of-type(3) —стили применятся для третьего тега span внутри тега с классом block.
Так же есть и другие структурные псевдоклассы CSS, но они используются значительно реже.
- :only-child — сработает, если элемент является единственным дочерним.
- :only-of-type — применяет слили для единственного элемента указанного типа в родительском блоке.
- :empty — сработает для элемента, который не имеет вложенных тегов.
- :root – корневой элемент на странице.
Псевдоэлементы
Псевдоэлементы — разновидность специальных селекторов, привязывающих стиль к определенному фрагменту элемента Web-страницы, а также они могут генерировать содержимое, которого нет в исходном html коде. Таким фрагментом может быть первый символ или первая строка в абзаце.
Псевдоэлементы используются не сами по себе, а только в совокупности с основными селекторами:
<основной селектор>:<псевдоэлемент> { <стиль> }
Вначале следует имя основного селектора, затем пишется двоеточие, после которого идёт имя псевдоэлемента.
Далее рассмотрим некоторые псевдоэлементы и их свойства.
:first-letter
Привязывает стиль к первой букве текста в элементе web-страницы, если ей не предшествует встроенный элемент, не являющийся текстом, например, изображение. Это позволяет создавать в тексте буквицу (увеличенная первая буква, базовая линия которой ниже на одну или несколько строк базовой линии основного текста) и выступающий инициал (увеличенная прописная буква, базовая линия которой совпадает с базовой линией основного текста).
Рассмотрим применение first-letter на примере создание выступающего инициала:
<style>
P {
font-family: Helvetica, sans-serif; /* Гарнитура шрифта основного текста */
font-size: 100%; /* Размер шрифта */
color: black; /* Черный цвет текста */
}
P:first-letter {
font-family: 'Times New Roman', Times, serif; /* Гарнитура шрифта первой буквы */
font-size: 200%; /* Размер шрифта первого символа */
color: red; /* Красный цвет текста */
}
</style>
...
<p>Добро пожаловать на наш автомобильный сайт. Здесь Вы найдете много интересных и полезных статей об автомобилях, об их технических характеристиках и особенностях.</p>
И результат примера:
Как видно на скриншоте, первая буква абзаца стала в два раза больше и изменила цвет на красный.
:first-line
Псевдоэлемент :first-line привязывает стиль к первой строке текста в элементе веб страницы. Посмотрим действие псевдоэлемента :first-line на абзац текста:
<style>
P:first-line {
font-style: bold; /* жирный текст */
color: red; /* Красный цвет текста */
}
</style>
...
<p>Добро пожаловать на наш автомобильный сайт. Здесь Вы найдете много интересных и полезных статей об автомобилях, об их технических характеристиках и особенностях.</p>
Результат:
:after и :before
Псевдоэлементы after и before применяется для вставки контента после и перед содержимым элемента. Эти псевдоэлементы работают совместно со стилевым свойством content, которое определяет содержимое для вставки.
Рассмотрим пример:
<style>
P:after {
content: ' webcodius.ru!';
}
</style>
...
<p>Добро пожаловать на наш автомобильный сайт. Здесь Вы найдете много интересных и полезных статей об автомобилях, об их технических характеристиках и особенностях.</p>
<p>Научным языком <strong>автомобиль</strong> это: <em>Механическое моторное безрельсовое дорожное транспортное средство минимум с 4 колёсами</em>.</p>
Смотрим результат:
Как видим в конце каждого абзаца вставлен текст «webcodius.ru», как и прописано в css правиле в свойстве «content». Если в место «after» поставить «before», то текст вставиться в начале абзаца.
Селекторы отношений
В HTML документе каждый элемент всегда связан с другими элементами.
Виды отношений между HTML элементами:
- родитель – элемент, непосредственно в котором находится рассматриваемый элемент;
- предок – это элемент, который расположен на одном из уровней иерархии элементов, до которого можно дойти двигаясь от рассматриваемого элемента к его родителю, от его родителя к родителю его родителя и т.д.
- дети – это элементы, непосредственно расположенные в текущем рассматриваемом элементе;
- потомки (дочерние элементы) – это любые элементы, которые находятся в текущем элементе вне зависимости от уровня иерархии, в котором они расположены;
- соседи (сиблинги) – это элементы, расположенные на том же уровне вложенности (иерархии), что и рассматриваемый элемент; или другими словами — это все другие элементы, которые имеют того же родителя что и текущий рассматриваемый элемент.
Более наглядно про отношения элементов приведено на рисунке. На этом рисунке отношения рассмотрены относительно элемента выделенного синим цветом.
В CSS имеется 4 вида селекторов отношений.
Первые два из них и относятся к вложенным селекторам. Они предназначены для поиска элементов в зависимости от их нахождения внутри других.
Остальные два и являются CSS селекторами для выбора соседних элементов.
Эти селекторы называют составными или комбинацией селекторов. Так как они на самом деле состоят из нескольких селекторов, разделённых между собой с помощью специальных символов (комбинаторов). Всего различают 4 символа: пробел, знак (больше), знак и (тильда).
Селектор X Y (для выбора вложенных или дочерних элементов)
Селектор (предок потомки) предназначен для выбора элементов , находящихся в .
Другими словами, селектор предназначен для выбора элементов , являющихся потомками элементов определяемым селектором .
Селекторы называют контекстными или вложенными.
Например, селектор дочерних элементов выберет все элементы , расположенные в .
Селектор X > Y
Селектор (родитель > дети) предназначен для выбора элементов, определяемым селектором непосредственно расположенных в элементе, определяемым селектором .
По другому можно сказать, что селектор предназначен для выбора , у которых родителем является элемент, определяемым .
Например, комбинация селекторов выберет все элементы , которые непосредственно расположены в .
Селектор X + Y
Селектор предназначен для выбора элементов , каждый из которых расположен сразу же после . Элементы определяемым селектором и должны находиться на одном уровне вложенности, т.е. быть по отношению друг к другу соседями (сиблингами).
Например, комбинация селекторов выберет все элементы , которые расположены сразу же за элементом , и являющиеся друг по отношению к другу соседями (сиблингами).
Селектор X ~ Y
Селектор предназначен для выбора элементов , которые расположены после . При этом элементы, определяемые селектором и , должны являться по отношению друг к другу соседями (сиблингами).
Например, выберет все элементы , расположенные после элемента на том же уровне вложенности.
Псевдоклассы и псевдоэлементы
Псевдокласс выбирает элементы, находящиеся в определённом состоянии или положении в иерархии DOM.
Вот несколько примеров таких состояний:
- на кнопку наведён курсор мыши;
- пользователь перешёл или не перешёл по ссылке;
- курсор установлен на поле ввода.
Например, так с помощью CSS можно увеличить размер ссылок, на которые пользователь навёл курсор:
Вот как это выглядит в браузере:
Изображение: Skillbox Media
А в следующем примере мы добавляем нижний отступ последнему параграфу-потомку контейнера («Параграф 3»).
CSS-код:
Если зайти в DevTools, то можно увидеть, что под третьим элементом p появилось поле margin (подсвечивается бежевым цветом):
Скриншот: Skillbox Media
Вот список основных псевдоклассов:
| Название | Состояние элемента |
|---|---|
| :hover | Наведён курсор |
| :focus | Элемент находится в фокусе (например, по нему кликнули мышью или его выбрали клавишей Tab) |
| :visited | Ссылка, которая была посещена |
| :active | Активный элемент (в промежутке времени между нажатием и отпусканием кнопки мыши) |
| :checked | Элементы radio, checkbox или option, которые были выбраны |
| :first-child | Первый потомок элемента |
| :last-child | Последний потомок элемента |
| :nth-child() | Каждый n-й потомок — число n передаётся в качестве аргумента |
| :last-nth-child() | Последние n потомков — число n передаётся в качестве аргумента |
| :read-write | Элементы, доступные для редактирования |