Основы CSS — расширенные селекторы

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

Комбинаторы

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

Потомок (пробел)

Стилизует все соответствующие теги в указанном элементе. Например,

div p {
}

стилизует все теги абзаца внутри элементов div. Это также работает с классами и идентификаторами, стилизуя тег-потомок внутри соответствующего класса или идентификатора.

Ребенок (›)

Подобно селектору потомков, но более специфично.

div > p {
}

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

Смежный брат и сестра (+)

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

div + p {
}

будет применяться только к тегу абзаца, который является первым родственным элементом после div, например:

<div></div>
<p>This paragraph gets styled.</p>
<p>This one doesn’t.</p>

Общий брат и сестра (~)

Как соседний брат, но более снисходительный.

div ~ p {
}

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

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

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

element:hover {
}

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

Другое распространенное применение этих типов селекторов определяет итерацию элемента. Например -

.container:nth-child(4) p {
}

будет стилизовать абзацы, которые являются потомками четвертого элемента класса «контейнер». Селектор «p», который я добавил, должен был держать вас в напряжении и представляет собой смесь этого типа селектора псевдокласса и селектора-комбинатора потомков, описанного выше. Не обязательно, просто можно!

Некоторые HTML-элементы имеют разные применимые псевдоклассы, так что ознакомьтесь с тем, что возможно здесь.

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

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

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

::before — вставляет содержимое перед соответствующим тегом.

::after - как ::before, но после…

::marker — стилизует маркеры элементов списка — ‹li›

::first-letter и ::first-line — стилизует первую букву или строку соответствующего текста. Ограничены определенными стилями, такими как ::selection (хотя и со многими другими доступными стилями), и применяются только к тексту. Полный список применимых стилей см. подробнее здесь.

Атрибуты

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

Следующий div имеет класс, идентификатор и атрибут:

<div class=”container” id=”controller” target=”blank”>

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

[атрибут] — выбирает все элементы с атрибутом.

[attribute="value"] — выбирает элементы со связанным атрибутом и значением.

[attribute~="value"] — выбирает элементы с атрибутом, содержащим значение в целом. Если целевой атрибут имеет значения «пусто» и «верх», то значение селектора «верх» все равно будет применяться, даже если «пусто» не было включено.

[attribute|=”value”] — выбираются все элементы со значениями атрибута, точно совпадающими со значением, или с дефисом — если значение было "top", то элементы со значением "top-text" все равно выберут.

[attribute^="value"] — выбираются все элементы со значениями атрибутов, начинающимися со значением.

[attribute$="value"] — выбираются все элементы со значениями атрибутов, оканчивающимися значением.

[attribute*="value"] — выбирает все элементы со значениями атрибутов, содержащими значение, даже частично. Если бы значение было «b», то элементы со значением атрибута «пусто» были бы стилизованы.

Бонусный раздел –

Помните, как у входных данных формы есть элемент [type], который определяет версию ввода? Это атрибут! И его тоже можно стилизовать!