WordPress как на ладони
Недорогой хостинг для сайтов на WordPress: wordpress.jino.ru

Типы CSS селекторов и их объединение

Разберем на какие общие типы можно разделить все CSS селекторы.

Ищем WP-разработчика! Фулл-тайм, удаленка, хорошая зарплата, соц. пакет. Подробности.
Компания Boosta.

Смотрите также:

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

Такие селекторы указываются в HTML документе (их можно увидеть в исходном коде страницы). Поддержка браузерами - 98.75%.

* Универсальный селектор
Выбирает все элементы.
Синтаксис: * ns|* *|*
Пример: * будет соответствовать всем элементам на странице.
tag Селекторы по типу элемента (по тегу)
Этот базовый селектор выбирает тип элементов.
Синтаксис: элемент
Пример: input выберет все элементы <input>.
.class Селекторы по классу
Этот базовый селектор выбирает элементы, основываясь на значении их атрибута class.
Синтаксис: .имяКласса
Пример: .index выберет все элементы <input class="index">.
#id Селекторы по id
Этот базовый селектор выбирает элементы, основываясь на значении их id атрибута. Идентификатор должен быть уникальным, т.е. используется только для одного элемента в HTML-документе.
Синтаксис: #имяИдентификатора
Пример: #index выберет элемент <input id="index">.
[attr] Селекторы по атрибуту
Этот селектор выбирает все элементы, имеющие данный атрибут или атрибут с определённым значением.
Синтаксис: [attr] [attr=value] [attr~=value] [attr|=value] [attr^=value] [attr$=value] [attr*=value].
Пример: [autoplay] выберет все элементы <input autoplay="index"> (независимо от его значения).

Селекторы Псевдо

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

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

Псевдо-классы ссылок:  
a:link Все не посещенные ссылки.
a:visited Все посещенные ссылки.
a:active Все активные ссылки.
a:hover Элемент над которым проходит указатель мыши.
Псевдо-классы на одном уровне:  
*:first-child Любой первый элемент в блоке.
*:last-child Любой последний элемент в блоке.
*:only-child Любой элемент в блоке, если там всего один элемент.
*:nth-child(2) Любой второй элемент в блоке.
*:nth-child(2n) Любые элементы в блоке по счету: 2, 4, 6, … (чётные).
*:nth-child(even) Любые элементы в блоке по счету: 2, 4, 6, … (чётные).
*:nth-child(2n+1) Любые элементы в блоке по счету: 1, 3, 5, … (нечётные).
*:nth-child(odd) Любые элементы в блоке по счету: 1, 3, 5, … (нечётные).
*:nth-child(3n+2) Элементы номер 2, 5, 8 и так далее.
*:nth-last-child(2) Любой второй элемент в блоке с конца.
Псевдо-классы на одном уровне с тем же тегом:  
p:first-of-type Выбор первого дочернего элемента <p>.
p:last-of-type Выбор последнего дочернего элемента <p>.
p:only-of-type Выбор дочернего элемента <p>, если у родителя элемент <p> всего один.
p:nth-of-type(2) Выбор второго дочернего элемента <p>.
p:nth-last-of-type(2) Выбор второго дочернего элемента <p> с конца.
Псевдо-классы Поля форм:  
input:enabled Выбор включенного <input>. Обычно :enabled просто не пишется.
input:disabled Выбор выключенного <input>.
input:focus Выбор <input>, который находится в фокусе (в который установлен курсор).
input:checked Выбранный элемент <input> типа radio или checkbox.
Остальные Псевдо-классы:  
:root Выбор корневого элемента в документе.
p:empty Пустой элемент <p>, в котором нет ни текста ни элементов.
p:lang(ru) Выбор элемента <p> с атрибутом lang, значение которого начинается с ru.
:target Выбор активного элемента на странице, который имеет якорную ссылку.
:not(p) Выбор всех элементов, кроме <p>.
Псевдоклассы: наглядное пособие
:: Псевдо-элементы

Знак :: позволяет выбрать элементы, которых нет в HTML. Можно и с одинарного :.

Для различия, Псевдо-элементы принято помечать двойным двоеточием ::, а псевдо-классы одинарным :. Но это лишь рекомендация, на деле можно все помечать одинарным :.

   
p::first-letter Выбирает первую букву элемента <p>.
p::first-line Выбирает первую строку элемента <p>.
p::before Вставляет указанное в content:'' содержимое в начало <p>.
p::after Вставляет указанное в content:'' содержимое в конец <p>.
p::selection Оформит выделенный (мышкой) текст внутри <p>.

Объединение селекторов

Чтобы объединить несколько отдельных селекторов в один, скажем так, сложный селектор нужно использовать символы комбинаторы - это: ,   > ~ +.

, Комбинатор запятая
A, B — Это способ группировки, он выбирает все совпадающие узлы.
  Комбинатор потомков (пробел)
A B — Выбирает элементы, которые находятся внутри указанного элемента (вне зависимости от уровня вложенности).
> Комбинатор дочерних селекторов
A > B — В отличие от пробела выбирает только прямых потомков - это только дочерними элементы первого уровня.
~ Комбинатор всех следующих элементов
A ~ B — Выбирает все элементы, которые идут после указанного элемента и находятся на том же уровне вложенности (с тем же родителем).
+ Комбинатор первого следующего элемента

A + B — Выбирает элемент, который находится непосредственно после указанного элемента, если у них общий родитель.

Примеры комбинаторов  
div, span Выберет оба элемента - и <div> и <span>.
div span Все <span> внутри <div>.
div > span Все <span>, у которых родитель <div>.
div ~ p Все элементы <p>, которые находятся сразу после <div>.
div + p Один элемент <p>, который находится сразу после <div>.
.c1.c2 Элементы одновременно с двумя классами c1 и c2.
Комментариев нет
    Войти