Эта статья – простой и удобный справочник по селекторам CSS. В ней перечислены и новые селекторы из (CSS3).
- Универсальный селектор: *. Выбирает все.
- Селектор корневого элемента: :root. Выбирает корневой элемент. Корневой элемент – это родительский элемент всех остальных элементов, он почти всегда ссылается на <html>.
- Селектор типа: h2. Выбирает все элементы указанного типа.
- Селектор идентификатора: #myEl. Выбирает элемент по предоставленному идентификатору.
- Селектор класса: .btn-xl. Выбирает все элементы с указанным классом.
Селекторы атрибутов
- Простой селектор атрибутов: [target]. Выбирает элементы, имеющие указанный атрибут.
- [target=“_blank”] – селектор атрибутов и значений. Выбирает элементы, которые содержат заданный атрибут и значение.
- Атрибут и одно из многих значений: [class~=“large”]. Выбирает элемент с заданным атрибутом, если его значение отвечает одному из значений, перечисленных в списке. Значения в списке разделяются пробелами.
- Атрибут и начало значения: [target^=«_b»]. Выбирает элементы, значение атрибута которых начинается с заданной строки.
- Атрибут и конец значения: [target$=“nk”]. Выбирает элементы, значение атрибута которых заканчивается указанной строкой.
- Атрибут и часть значения: [target*=“lan”]. Выбирает элементы, значение атрибута которых содержит предоставленную подстроку.
- [lang|=“zu”] – селектор атрибутов, который учитывает часть значения из списка значений, разделенных дефисом. Он выбирает те элементы, значение которых совпадает с левой частью списка.
- Селектор потомков: h2 span. Выбирает элемент, представленный справа, если он является потомком элемента слева.
- Селектор дочерних элементов: div > p. Выбирает элемент, объявленный справа, если он является прямым дочерним элементом элемента слева.
- Селектор смежных элементов (братьев и сестер): div + p. Выбирает элемент справа, если элемент слева непосредственно предшествует ему.
- Общий селектор родственных элементов: div ~ p. Выбирает элемент справа, если ему предшествует элемент слева.
- Селектор отрицания: :not(.first-par). Выбирает элементы, которые не соответствуют простому селектору, указанному в скобках.
Псевдоэлементы
- ::before. Пример: p::before. Сгенерированный контент перед элементом.
- ::after. Пример: p::after. Сгенерированный контент после элемента.
- ::first-letter. Пример: p::first-letter. Первая буква элемента.
- ::first-line. Пример: p::first-line. Первая строка элемента.
Структурные псевдоклассы
- nth-child(n). Пример: span:nth-child(5). Выбирает n-ый родственный элемент, если он отвечает заявленному типу.
- nth-last-child(n). Пример: p:nth-last-child(4). Считая от последнего дочернего элемента, выбирает n-ый родственный элемент, если он отвечает заявленному типу.
- nth-of-type(n). Пример: span:nth-of-type(2). Выбирает n-ый родственный элемент, учитывая только элементы того же типа.
- nth-last-of-type(n): span:nth-last-of-type(3). Псевдокласс выбирает n-й родственный элемент, считая от последнего дочернего элемента и учитывая только указанный тип.
- first-child. Пример: span:first-child. Выбирает первый дочерний элемент, тип которого соответствует требованиям.
- last-child. Пример: span:last-child. Выбирает последний дочерний элемент, тип которого соответствует требованиям.
- first-of-type. Пример: span:first-of-type. Выбирает первый элемент объявленного типа в родительском элементе.
- last-of-type. Пример: span: last-of-type. Выбирает последний элемент объявленного типа в родительском элементе.
- only-child. Пример: span:only-child. Выбирает элемент, если это единственный дочерний элемент заданного родителя.
- only-of-type. Пример: span:only-of-type. Выбирает элемент, если это единственный элемент такого типа внутри родительского элемента.
- empty. Пример: div:empty. Выбирает элементы без дочерних элементов.
Псевдоклассы ссылок
- Ссылка: a:link. Ссылка, которую не посещали.
- Посещенная ссылка: a:visited. Ссылка, которая была посещена.
Псевдоклассы действий
- a:active. Выбирает активные элементы.
- a:hover. Отслеживает наведение (когда указывающее устройство пользователя находится поверх элемента).
- a:focus. Определяет фокус элемента (например, когда пользователь кликает внутри поля ввода, поле получает фокус).
- Целевой псевдокласс: p:target. Используется, когда элемент слева является текущей целью, как определено URL-адресом.
- lang. Например: :lang(en). Выбирает элемент(ы) с указанным атрибутом lang.
Псевдоклассы состояний пользовательского интерфейса
- :enabled. Применяется к элементам, указанным слева, когда они включены.
- :disabled. Применяется к элементам, указанным слева, когда они отключены.
- :checked. Применяется к элементам интерфейса, таким как переключатели (checkbox) и флажки (radio), когда они включены.
Дополнительные рекомендации
Помните, что для выбора нескольких селекторов в одном объявлении CSS между селекторами нужно поставить запятую. В следующем примере выбираются все элементы <p>, у которых нет класса article-par, а также выбираются все элементы <h2>:
p:not(.article-par), h2 {
font-weight: bold;
}
Кроме того, если вы хотите выбрать элемент, ориентируясь на комбинацию нескольких классов и/или идентификаторов, вы можете просто отметить несколько классов и/или идентификаторов, не ставя пробел между ними. Например, если вы хотите выбрать элемент с классами btn и btn-large, используйте:
.btn.btn-large {
font-weight: bold;
}
Как мы видим в приведенном выше примере, мы не можем использовать селектор .btn .btn-large (с пробелом), потому что тогда он выбрал бы элементы .btn-large, которые являются потомками элементов .btn.
Теперь предположим, что элемент, который нам нужно выбрать, также имеет идентификатор #main-btn:
#main-btn.btn.btn-large {
font-weight: bold;
}
Читайте также: