Что такое селекторы в html

Селекторы CSS

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

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

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

В CSS селекторы определяются в спецификации CSS-селекторов; как и другие части CSS, нужно поддерживать их работу в браузерах. Большинство селекторов, которые вы встретите, определены в Спецификации селекторов 3 уровня, где вы сможете найти всю информацию о поддержке селекторов в браузерах.

Несколько селекторов

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

Пробел можно вставлять до или после запятой. Ещё удобнее писать каждый селектор с новой строки:

В упражнении ниже объедините два селектора в одном правиле. Результат должен остаться таким же.

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

В примере ниже правило для селектора класса не будет работать, в то время как h1 будет стилизован.

Типы селекторов

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

Селекторы тегов, классов и идентификаторов

К этой группе относятся селекторы HTML-элементов, таких как

К группе относятся и селекторы классов:

или селекторы идентификаторов (ID):

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

Эта группа селекторов позволяет выбирать селекторы, основываясь на наличии у них конкретного атрибута элемента:

или основываясь на значении атрибута:

Псевдоклассы, псевдоэлементы

К группе ещё относятся псевдоэлементы, которые выбирают определённую часть элемента (вместо целого элемента). Например, ::first-line всегда выбирает первую строку внутри элемента (абзаца

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

Комбинаторы

И последняя группа селекторов: она позволяет объединять селекторы, чтобы было легче находить конкретные элементы внутри документа. В следующем примере мы отыскали дочерний элемент с помощью комбинатора дочерних элементов ( > ):

Продолжение

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

Справка о селекторах

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

Источник

селекторы

Комплексные селекторы

Очередная глава из книги Шэя Хоу с продвинутыми уроками по HTML и CSS. На этот раз посвящена разным селекторам, псевдоклассам и псевдоэлементам.

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

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

Для обозначения универсального селектора применяется символ звёздочки ( * ) и в общем случае синтаксис будет следующий.

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

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

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

Пример 12.1. Вложенность элементов в документе

HTML5 CSS 2.1 IE Cr Op Sa Fx

Соседние селекторы

Соседними называются элементы веб-страницы, когда они следуют непосредственно друг за другом в коде документа. Рассмотрим несколько примеров отношения элементов.

Lorem ipsum dolor sit amet.

В этом примере тег является дочерним по отношению к тегу

, поскольку он находится внутри этого контейнера. Соответственно

выступает в качестве родителя .

Контекстные селекторы

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

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

Идентификаторы

Идентификатор (называемый также «ID селектор») определяет уникальное имя элемента, которое используется для изменения его стиля и обращения к нему через скрипты.

Синтаксис применения идентификатора следующий.

Классы

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

Селекторы тегов

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

Источник

Селекторы CSS. Виды, группировка и специфичность

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

[attr&#93

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

[attr=value&#93

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

[attr^=value&#93

[attr|=value&#93

[attr$=value&#93

[attr*=value&#93

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Селектор X > Y

Селектор X + Y

Селектор X

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

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

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

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

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

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

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

Источник

CSS селекторы. Простые селекторы

Запись правил CSS

Записываются правила css внутри фигурных скобок в виде пар свойство: значение свойства, разделенных точкой с запятой. Причем блок с фигурными скобками всегда «принадлежит» какому-либо селектору.

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

Это селектор, который задает форматирование для всех элементов страницы, включая html и body. Записывается так:

Этим правилом мы сказали, что все элементы с текстом на странице будут иметь шрифт семейства Tahoma, Verdana, sans-serif и размер шрифта в 14px.

Этот селектор имеет невысокий приоритет, равный 0 и правила, заданные в нем, могут быть переопределены любым другим селектором. Тем не менее он может быть очень полезен для задания таких свойств, как box-sizing или margin для всех элементов сразу.

Селектор элемента (или типа)

Этот селектор предполагает, что мы назначаем правила форматирования для всех однотипных элементов (или тегов) на странице (или на всем сайте). В любом браузере для всех тегов есть своя css-таблица, которая отображает внешний вид элементов в соответствии с рекомендациями W3C, но поскольку между разными браузерами все же существуют некоторые отличия в css-правилах для элементов + каждый сайт в соответствии с разработанным дизайном может требовать внесения изменений в эти правила, используют селектор элементов довольно часто. Для этого в css записывают название тега без всяких угловых скобок. Например,

Эти правила отменяют жирный по умолчанию шрифт для заголовков второго уровня и увеличивают размер шрифта.

«Вес» этого селектора равен единице.

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

Т.е. данным селектором определяется, что любому элементу с классом someclass будут заданы внешние и внутренние отступы и рамка. Это могут быть и блочные div, и p, и blockquote, и h2, и даже строчный span.

Есть разновидность этого селектора, которая говорит о том, что форматирование назначается для определённого элемента с таким классом. Так, например, селектор

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

Приоритет этого селектора выражается цифрой 10.

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

А в css правила могут быть заданы следующим образом:

Т.е. между названиями 2-х классов нет пробелов, а точка ставится перед именем каждого класса. Учтите, что такой вариант предусматривает наличие обоих классов у элемента, для того чтобы к нему применилось соответствующее форматирование. Если элементу назначен только класс about или только класс container, правила НЕ применятся.

На практике к такому элементу с 2-мя классами чаще всего применяется форматирование, описанное для каждого класса в отдельности, например, так:

В том случае правила из разных классов как бы «складываются» и применяются в совокупности. Если же какие-то правила повторяются и в том, и в другом классе, то важен порядок их следования в CSS:

В данном примере класс content имеет красный цвет фона и шрифт с засечками, а класс about имеет розовый цвет фона и шрифт без засечек. И поскольку он записан в css-стилях ниже правил для класса content, то в какой бы последовательности мы не ставили эти классы в html-коде, у нас все равно будет блок с розовым фоном и шрифтом без засечек. Т.е. правила класса about перечеркивают соответствующие правила класса content. Посмотрите, как это выглядит в Инспекторе свойств (F12 или Ctrl+Shift+I):

Material confined likewise it humanity raillery an unpacked as he. Three chief merit no if. Now how her edward engage not horses. Oh resolution he dissimilar precaution to comparison an. Matters engaged between he of pursuit manners we moments. Merit gay end sight front. Manor equal it on again ye folly by match. In so melancholy as an sentiments simplicity connection. Far supply depart branch agreed old get our.

Use securing confined his shutters. Delightful as he it acceptance an solicitude discretion reasonably. Carriage we husbands advanced an perceive greatest. Totally dearest expense on demesne ye he. Curiosity excellent commanded in me. Unpleasing impression themselves to at assistance acceptance my or. On consider laughter civility offended.

Material confined likewise it humanity raillery an unpacked as he. Three chief merit no if. Now how her edward engage not horses. Oh resolution he dissimilar precaution to comparison an. Matters engaged between he of pursuit manners we moments. Merit gay end sight front. Manor equal it on again ye folly by match. In so melancholy as an sentiments simplicity connection. Far supply depart branch agreed old get our.

Any delicate you how kindness horrible outlived servants. You high bed wish help call draw side. Girl quit if case mr sing as no have. At none neat am do over will. Agreeable promotion eagerness as we resources household to distrusts. Polite do object at passed it is. Small for ask shade water manor think men begin.

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

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

Источник

Список всех Селекторов в CSS

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

CSS селектор — это то что позволяет выбирать нужный элемент в HTML документе, чтобы потом применить к этому элементу CSS стили (полный список CSS стилей).

CSS селекторы (список)

элементы. tag.classp.introВсе

элементы. tag tagdiv pВсе

прямой родитель которых

который находятся сразу после

которые находятся после

=flower]Все элементы в атрибуте title которых есть слово «flower». [attribute |= value][lang|=en]Все элементы атрибут lang которых начинается с «en». :activea:activeАктивная ссылка. ::afterp::afterВставляет псевод-элемент в начале каждого

элемента. ::beforep::beforeВставляет псевод-элемент в конце каждого

элемента. :checkedinput:checkedВсе выбранные элементы. :defaultinput:defaultВсе элементы. :disabledinput:disabledВсе элементы. :emptyp:emptyВсе пустые

элемент в списке родительского элемента. ::first-letterp::first-letterПервая буква каждого

элемента. ::first-linep::first-lineПервая линия каждого

элемента. :focusinput:focusв котором находится курсор. :focus-visiblea:focus-visibleФокус сработает, только если на кнопку перешли с клавиатуры через TAB. :focus-withindiv:focus-withinСработает на блоке, когда его внутренний элемент находится в фокусе. :hovera:hoverСслыка на которую наведена мышка.:in-rangeinput:in-rangeВсе со значением в пределах указанного диапазона.:indeterminateinput:indeterminateВсе в статусе indeterminate.:invalidinput:invalidВсе с недопустимым значением.:lang(language)p:lang(it)Все

в списке родительского элемента. :linka:linkВсе непосещенные ссылки. :not(selector):not(p)Все не

элементы. :not(:only-child)div:not(:only-child)Все

внутри которых больше одного элемента. :nth-child(n)p:nth-child(2)Второй элемент в списке родительского элемента. :nth-of-type(n)p:nth-of-type(2)Второй

в списке родительского элемента. :nth-last-child(n)p:nth-last-child(2)Второй элемент в списке родительского элемента (счет идет с конца). :nth-last-of-type(n)p:nth-last-of-type(2)Второй

в списке родительского элемента (счет идет с конца). :only-childp:only-childЕдинственный

у родителя (других элементов быть не может). :only-of-typep:only-of-typeОдин

у родителя (других элементы могут быть).:optionalinput:optionalВсе у которых нет артибута «required».:requiredinput:requiredВсе у которых указан атрибут «required».:out-of-rangeinput:out-of-rangeВсе со значением выходящим за указанный рэндж.::placeholderinput::placeholderВсе у которых указан атрибут «placeholder».:read-onlyinput:read-onlyВсе у которых указан атрибут «readonly».:read-writeinput:read-writeВсе у которых не указан атрибут «readonly».:root:rootКорен документа.::selection::selectionВыберет текущее выделение текста мышкой. :target#news:targetВыберет элемент с id=»news» когда к нему пришил по клику.:validinput:validВсе с валидным значением. :visiteda:visitedВсе посещенные ссылки.

меню

Описание CSS селекторов

Выбирает абсолютно все элементы. Например, такой код обнуляет внутренние и внешние отступы у всех элементов на странице:

* можно использовать в связке с другими селекторами. Например, выделим все дочерние элементы #container сплошной черной рамкой шириной 1px.

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

.class

У одного элемента может быть несколько классов (через пробел):

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

Следующий код устанавливает ширину и отступ элемента с идентификатором:

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

Селектор HTML тега. Применяться ко всем указанным элементам в документе. Часто используется для задания цвета, фона, шрифта и др.

Следующий код задает цвет текста для всех ссылок и отступы для UL списков:

Объединяет несколько селекторов, так чтобы указать всем выбранным селекторам одинаковые стили.

Следующий код задает цвет текста для заголовков h2 и ссылок в теге LI:

Это правило можно сочетать с идентификаторами и классами: body.opera a < color:blue; >.

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

Добавит отступ для li первого уровня, т.е. тех который является прямым потомком элемента ul :

Это правило не коснется

.

Окрасит «текст 2» и «текст 3»:

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

a:link, a:visited, a:hover, a:active, a:focus

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

Выбирает элементы, которые содержат указанный атрибут. Селектор атрибутов.

Окрасит только «текст»:

[attr = value]

Выбирает элементы, у которых есть атрибут с указанным значением. Селектор атрибутов с точным значением.

Окрасит только «текст»:

[attr *= value]

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

Окрасит «текст» и «текст 2»:

[attr ^= value]

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

Установит фоновую картинку только для «текст»:

Выбирает элементы, у которых значение атрибута заканчивается на указанную строку. Селектор атрибутов со значением в конце.

Например, выберем элементы, которые ссылаются на файлы определенного расширения.

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

Об этом селекторе не многие знают, а ведь он иногда очень удобен.

[attr |= value]

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

:target

:checked

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

:default

считается дефолтным ( :default ), если это элемент с атрибутом selected или первый enabled (NOT disabled) элемент по порядку DOM элементов. Для каждый selected элемент будет считаться дефолтным.

и считаются дефолтными, если они выбраны (имеют атрибут checked ).

Установим цвет фона элементов — все отключенные элементы SELECT с классом COUNTRY:

:enabled

Выбирает включенный (активный) элемент.

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

Примеры

Установим белый цвет фона для всех активных (enabled) элементов и серый для всех неактивных (disabled):

:empty

Выбирает любой пустой элемент. Пустой значит в нём не должно быть ничего (ни одной node): ни пробелов, ни текста, ни других элементов. HTML комментарии, CSS код не повлияют на то что элемент будет считать не пустой.

::before

X::before добавляет псевдо-элемент в начало X (внутрь тега). Работает вместе со свойством X::before < content:'' >, которое указывает содержание добавленного элемента. content нужно указывать даже если содержание пустое ( content:» ), т.к. элемент должен хоть что-то содержать.

Например с помощью таких стилей, можно указать значок для LI списка:

::after

X:after добавляет псевдо-элемент в конец X (внутрь тега). Работать только совместно со свойством X::after < content:'' >, которое указывает содержание добавленного элемента. content нужно указывать даже если содержание пустое ( content:» ), т.к. элемент должен хоть что-то содержать.

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

:focus

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

В этом примере при перемещении курсора в поле его фон будет изменен на желтый:

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

В этом примере при перемещении курсора в поле его ширина будет постепенно увеличиваться со 100 до 250 пикселей:

:focus-visible

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

:focus-within

Этот селектор полезен, например, для выделения всего контейнера

:hover

В следующем примере при наведении мышкой под ссылкой будет появляться черная линия толщиной 1px (замена свойству underline):

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

:not(selector)

Следующий код выбирает для стилизации все элементы, кроме элемента p :

Выберет «элемент 1» и «элемент 2»:

::first-line, ::first-letter

#1 Выбираем первую букву в параграфе

Применит указанные стили для всех начальных букв всех абзацев в документе.

#2 Выбираем первую строку в абзаце

Применит указанные стили для всех начальных строк всех абзацев в документе.

:nth-child(n)

X:nth-child(n) выбирает каждый «n-ый» элемент Х, который находится на одном уровне с X. Считает все элементы на уровне X (неважно какой у элемента тег, т.е. любой тип, а не только тип X). Под типом подразумевается именно тег элемента (div, span, li), а не его класс или что-то еще.

Заметка: Есть такой же селектор :nth-of-type(n) разница между ними в том, что X:nth-child(n) считает все элементы на одном уровне, не важно какой тип указан в Х, а Х:nth-of-type(n) считает только элементы типа Х находящиеся на одном уровне. Например:

n = odd / even

Раскрасим четные и нечетные параграфы в разные цвета:

n = число

Установит красным цветом второй элемент:

Окрасит «Второй параграф.»:

n = выражение

Обратимся к каждому третьему элементу на текущем уровне, где расположены p:

:nth-last-child(n)

Выбирает начиная с конца. Работает точно также как и :nth-child(n) только отсчет идет не сверху, а снизу.

Следующий код установит красным цветом второй с конца параграф:

Окрасит «Второй параграф.»:

:nth-of-type(n)

Выбирает элемент по номеру указанному в «n». X:nth-of-type начинает отсчет от первого элемента типа X находящегося на одном уровне. Под типом подразумевается именно тег элемента (div, span, li), а не его класс.

Заметка: есть такой же селектор :nth-child(n) разница между ними в том, что X:nth-of-type(n) выберет только элементы типа Х находящиеся на одном уровне, а X:nth-child(n) считает все элементы всех типов на одном уровне, не важно какой тип указан в Х. Например:

#1 n = add / even

Раскрасим четные и нечетные параграфы в разные цвета. Считает именно параграфы без h1, как это делает :nth-child :

#2 n = число

Установит красным цветом второй элемент:

Окрасит «Второй параграф.»:

#3 n = выражение

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

:nth-last-of-type(n)

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

:first-child

X:first-child Выбирает первый элемент который находится на одном уровне с Х. Отсчет начинается с любого элемента не обязательно Х.

X:first-child это тоже самое что X:nth-child(1)

#1 Пример: обратимся к первому элементу в блоке #container

А вот так не выделит ничего:

#2 Обнуление границы

:last-child

X:last-child Выбирает первый с конца элемент который находится на одном уровне с Х. Отсчет начинается с любого элемента не обязательно X.

X:last-child это тоже самое что X:nth-last-child(1)

#1 Пример: обратимся к первому с конца элементу в блоке #container

А вот так ничего не выделит:

#2 Покрасим последний элемент li в списке ul в зеленый:

:first-of-type, :last-of-type

X:first-of-type это тоже самое что X:nth-of-type(1)

#1 Пример: обратимся к первому элементу div в блоке #container

#2 Обнуление границы

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

:only-child

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

Другими словами: выбирает дочерние элементы X только, когда у родителя количество всех дочерних элементов (неважно какой тип) равно 1.

Выберем элемент, если он единственный в блоке:

:not(:only-child)

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

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

А если больше одного, то будут выбраны все:

:only-of-type

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

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

#1 Выберем ul только с одним элементом в списке.

Немного практики

#1 Сложное выделение

У нас есть такой код:

Как обратиться к «Список 2»?

Решение 1

Код находит первый список, затем находит его прямого наследника и у которого порядковый номер в списке равен 2.

Решение 2

Использование соседних селекторов.

Браузер находит ul, следующий сразу за p, затем находит его последний дочерний элемент.

Решение 3

Это решение пожалуй самое правильное, потому что если между ul или li попадут другие теги, этот пример все равно будет выбирать нужный нам li:

Браузер выбирает первый ul (именно ul), затем находит первый с конца элемент li (именно li).

Наглядное пособие по селекторам типа :nth-child

Считаем элементы в блоке с помощью nth-child

Выбор диапазона элементов

Допустим, у вас есть список из 20 элементов и нужно выбрать элементы с 7 по 14 включительно. Это можно сделать вот так:

Источник