WordPress как на ладони
Недорогой хостинг для сайтов на WordPress: wordpress.jino.ru Получай пассивный доход от сайта с помощью браузерных PUSH уведомлений

Селекторы в CSS

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

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

Смотрите также: Функции CSS.

Оглавление:

CSS Приоритеты и каскадность

CSS — это каскадные таблицы стилей (Cascading Style Sheets). Каскадность — это главный принцип css — это приоритет одних правил/стилей над другими. Это когда одни стили перебивают другие.

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

Таблица веса (числа) для каждого селектора:

Тип селектора Описание селектора Вес (число)
* универсальный селектор 0
div тег 1
:first-letter псевдо-элемент 1
.text класс 10
:hover псевдо-класс 10
[атрибут="значение"] селектор атрибута 10
#content селектор по id 100
style="color:red;" стили в style атрибуте 1000
!important суффикс увеличения веса 10000

Из правил с одинаковым весом выбираются те, которые ближе к концу HTML страницы (ниже в коде).

Пример подсчета веса (вес представляет из себя число):

#content .text p { color:red; } /* 100 + 10 + 1 = 111 */
.text p { color:blue; }         /* 10 + 1 = 11 */

Тег <p> внутри элемента .text получит стиль color:red;, а не color:blue;, потому что число 111 больше чем 11.

Теперь давайте посчитаем веса на примере:

* {}                        /* =   0 */
li {}                       /* =   1 */
li::first-line {}           /* =   2 */
ul li {}                    /* =   2 */
ul ol + li {}               /* =   3 */
ul li.red {}                /* =  12 */
li.red.level {}             /* =  21 */
li:not(.red){}              /* =  11 */
li:not(.red):not(.green){}  /* =  11 */

#t34 {}                     /* = 100 */

#content #wrap {}           /* = 200 */

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

Трюк с увеличением веса. Допустим у нас есть один селектор в правиле, но нам нужно увеличить приоритет стилей, при этом не добавляя каких-то дополнительных селекторов. Сделать это можно просто продублировав селектор или добавишь селектор атрибута или псевдо-класса:

.class.class { color:blue; } /* сильнее чем .class */
.class { color:red; }

img[src] {  } /* вес = 11 */
меню

Приоритет @media

Медиа правила @media ( max-width:500px ){ } не участвуют в подсчете приоритета (веса).

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

Правильно:

.section { width:100%; }

@media ( max-width:500px ) {
	.section { width:50%; }
}

Неправильно:

@media ( max-width: 500px ) {
	.section { width:50%; }
}

.section { width:100%; }

CSS селекторы

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

Такие селекторы указываются в 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.
меню

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

Селектор Пример Описание примера
* * Все элементы.
#id #firstname Элемент с id="firstname".
.class .intro Все элементы с class="intro".
.class1.class2 .name1.name2 Все элементы с class="name1 name2".
.class1 .class2 .name1 .name2 Все элементы с class="name2" у которых родитель с class="name1".
tag p Все <p> элементы.
tag.class p.intro Все <p> элементы с class="intro".
tag, tag div, p Все <div> и все <p> элементы.
tag tag div p Все <p> внутри всех <div>.
tag > tag div > p Все <p> прямой родитель которых <div>.
tag + tag div + p <p> который находятся сразу после <div>.
tag ~ tag div ~ p Все <p> которые находятся после <div>.
[attribute] [target] Все элементы с target="что-либо".
[attribute = value] [target=_blank] Все элементы с target="_blank".
[attribute ^= value] a[href^="https"] Каждый <a> атрибут href которого начинается с "https".
[attribute $= value] a[href$=".pdf"] Каждый <a> атрибут href которого заканчивается ".pdf".
[attribute *= value] a[href*="w3schools"] Каждый <a> атрибут href которого содержит подстроку "w3schools".
[attribute ~= value] [title~=flower] Все элементы в атрибуте title которых есть слово "flower".
[attribute |= value] [lang|=en] Все элементы атрибут lang которых начинается с "en".
:active a:active Активная ссылка.
::after p::after Вставляет псевод-элемент в начале каждого <p> элемента.
::before p::before Вставляет псевод-элемент в конце каждого <p> элемента.
:checked input:checked Все выбранные <input type="checkbox"> элементы.
:default input:default Все <input> элементы.
:disabled input:disabled Все <input disabled> элементы.
:empty p:empty Все пустые <p>, в которых нет пробелом, текста или других элементов.
:enabled input:enabled Все активные (не disabled) элементы <input>.
:first-child p:first-child Первый элемент в списке родительского элемента.
:first-of-type p:first-of-type Первый <p> элемент в списке родительского элемента.
::first-letter p::first-letter Первая буква каждого <p> элемента.
::first-line p::first-line Первая линия каждого <p> элемента.
:focus input:focus <input> в котором находится курсор.
:hover a:hover Сслыка на которую наведена мышка.
:in-range input:in-range Все <input> со значением в пределах указанного диапазона.
:indeterminate input:indeterminate Все <input> в статусе indeterminate.
:invalid input:invalid Все <input> с недопустимым значением.
:lang(language) p:lang(it) Все <p> с lang="it".
:last-child p:last-child Последний элемент в списке родительского элемента.
:last-of-type p:last-of-type Последний <p> в списке родительского элемента.
:link a:link Все непосещенные ссылки.
:not(selector) :not(p) Все не <p> элементы.
:not(:only-child) div:not(:only-child) Все <div> внутри которых больше одного элемента.
:nth-child(n) p:nth-child(2) Второй элемент в списке родительского элемента.
:nth-of-type(n) p:nth-of-type(2) Второй <p> в списке родительского элемента.
:nth-last-child(n) p:nth-last-child(2) Второй элемент в списке родительского элемента (счет идет с конца).
:nth-last-of-type(n) p:nth-last-of-type(2) Второй <p> в списке родительского элемента (счет идет с конца).
:only-child p:only-child Единственный <p> у родителя (других элементов быть не может).
:only-of-type p:only-of-type Один <p> у родителя (других элементы могут быть).
:optional input:optional Все <input> у которых нет артибута "required".
:required input:required Все <input> у которых указан атрибут "required".
:out-of-range input:out-of-range Все <input> со значением выходящим за указанный рэндж.
::placeholder input::placeholder Все <input> у которых указан атрибут "placeholder".
:read-only input:read-only Все <input> у которых указан атрибут "readonly".
:read-write input:read-write Все <input> у которых не указан атрибут "readonly".
:root :root Корен документа.
::selection ::selection Выберет текущее выделение текста мышкой.
:target #news:target Выберет элемент с id="news" когда к нему пришил по клику.
:valid input:valid Все <input> с валидным значением.
:visited a:visited Все посещенные ссылки.
меню

*

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

* { margin:0; padding:0; }

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

#container * { border: 1px solid black; }

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

.class

Выбирает элемент у которого есть атрибут class с указанным значением: class="myclass".

Название класса, может состоять из латинских букв (a-zA-Z), цифр (0-9), символа дефиса и подчеркивания (- _).

Следующий код устанавливает красный цвет текста для всех элементов с классом error -

<div class="error">
.error { color: red; }

У одного элемента может быть несколько классов (через пробел): <div class="error myclass">.

#id

Выбирает элемент у которого есть атрибут id с указанным значением: id="myid".

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

Идентификатор должен состоять из латинских букв (a-zA-Z), цифр (0-9), символа дефиса или подчеркивания: - _. Начинается он только с буквы!

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

<div id="container">
#container { width: 960px; margin: auto; }

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

меню

tag

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

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

a { color: red; }
ul { margin-left: 0; }

X, Y

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

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

h2,
li a { color: red; }

X Y

Выбирает элементы Y, которые являются дочерними к X. Может состоять из нескольких селекторов: X Y Z. Сначала обязательно указывается родитель, а после него дочерние элементы. Их количество может быть любым. Свойства стилей будут применены только к последнему элементу.

Например, следующий код выбирает любой элемент <а>, являющийся потомком элемента <li>: (<li><a href="ссылка">текст</a></li>):

li a { text-decoration: none; }

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

меню

Х > Y

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

Пример:

.parent > li{ border: 1px solid red; }

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

<ul class="parent">
	<li> список1
		<ul class="child">
			<li>список11</li>
			<li>список12</li>
		</ul>
	</li><!-- затронет -->
	<li>список2</li><!-- затронет -->
	<li>список3</li><!-- затронет -->
</ul>

Это правило не коснется <ul class="child">.

Демо >

меню

Х ~ Y

Выбирает все элементы Y, которые расположены после X (на том же уровне). По поведению похож на X + Y. Разница в том, что будут выбраны все следующие элементы, а не только первый.

Например, в указанном коде будут выбраны все элементы p, которые расположены после div:

div ~ p { color: red; }

Окрасит  "текст 2" и "текст 3":

<div>текст</div>
<p>текст 2</p><!-- color: red; -->
<p>текст 3</p><!-- color: red; -->

Демо →

Х + Y

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

Например, следующий код устанавливает красный цвет текста в абзаце p, который расположен сразу после div:

div + p { color: red; }

Получим:

<div>текст</div>
<p>текст 2</p><!-- color: red; -->
<p>текст 3</p>

Демо →

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

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

  • a:link — выбирает обычную (не посещенную) ссылку. Обычно этот селектор записывается просто как a.
  • a:visited — выбирает уже посещенную ссылку.
  • a:hover — выбирает ссылку на которую наведена мышка (под курсором).
  • a:active — выбирает активную ссылку (на которую был сделан клик, пока еще никуда не кликали или когда на ссылку переключились при передвижении табом с клавиатуры).
  • a:focus — выбирает активную ссылку (на которую кликнули, но еще не отпустили кнопку мышки).
a:link   { color: red; }    /* можно просто а{  } */ /* все не посещенные ссылки */
a:visted { color: purple; } /* все посещенные ссылки */
a:hover  { color: green; }  /* ссылка под курсором */
a:active { color: blue; }   /* нажатая ссылка */
a:focus  { color: dark; }   /* ссылка в момент нажатия */
меню

[attr]

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

a[title] { color: green; }

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

<a href="" title="описание">текст</a>
<a href="">текст 2</a>

[attr = value]

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

a[href="http://example.com"] { color: red; }

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

<a href="http://example.com">текст</a><!-- color: red; -->
<a href="http://example.com/article">текст 2</a>

[attr *= value]

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

a[href*="example"] { color: red; }

Окрасит "текст" и "текст 2":

<a href="http://example.com">текст</a><!-- color: red; -->
<a href="http://example.com/article">текст 2</a><!-- color: red; -->
<a href="http://xxx.ru/article">текст 2</a>

[attr ^= value]

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

a[href^="http"] {
   background: url(path/to/external/icon.png) no-repeat;
   padding-left: 10px;
}

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

<a href="http://example.com">текст</a>
<a href="/article">текст 2</a>

[attr $= value]

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

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

a[href$=".jpg"] { color: red; }

Выберет ссылки a, ссылающиеся на изображения формата .jpg. Окрасит только "текст":

<a href="http://example.com/foto.jpg">текст</a>
<a href="http://example.com/foto2.png">текст 2</a>

[attr ~= value]

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

Он чем-то похож на *=, разница вот в чем:

  • *= — ищет home в любом месте значения. Найдет homeland.
  • ~= — ищет home разделеный пробелом. Найдет home land.
a[data-info ~= "external"] { color: red; }

a[data-info ~= "image"] { border: 1px solid black; }

Отработает так:

<a href="http://example.com" data-info="external">текст</a><!-- окрасит в красный -->

<a href="http://nettuts.com">текст 2</a><!-- не тронет -->

<a href="http://example.com" data-info="external image">текст 3</a><!-- окрасит и установит рамку -->

<a href="http://example.com" data-info="image">текст 4</a><!-- установит рамку -->

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

меню

[attr |= value]

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

Пример: [lang |= ru] - элементы с атрибутом lang, значение которого равно ru или начинается с ru-, например "ru-RU". Но он практически не используется и его заменяет комбинация: [lang = ru], [lang ^= ru-].

:target

Выделяет активный якорь в HTML. Допустим у нас ссылка ссылается на внутренний якорь <a href="#anchor"> на странице, тогда при клике по этой ссылке этот селектор выделить элемент имеющий атрибут id="anchor".

:target { color: red; }

Получим:

<a href="#anchor1">Перейти на якорь 1</a>
<a href="#anchor2">Перейти на якорь 2</a>

<!-- При клике по этим ссылкам выберется соответствующий элемент ниже -->

<p id="anchor1">Элемент 1</p>
<p id="anchor2">Элемент 2</p>

смотрите пример >

меню

:checked

Стилизует выбранные radio / checkbox. Может использоваться с тегом input или option или без них: input:checked, option:checked или :checked.

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

input[type=radio]:checked { border:1px solid black; }

:default

Выбирает элемент формы, который считается элементом по умолчанию. Работает с тегами <button>, <input>, <option>.

<form>
	<input type="submit"><!-- будет выбран -->
	<input type="submit">
	<input type="reset">
</form>
  • <option> считается дефолтным (:default), если это элемент с атрибутом selected или первый enabled (NOT disabled) элемент по порядку DOM элементов. Для <select multiple> каждый selected элемент будет считаться дефолтным.

  • <input type="checkbox"> и <input type="radio"> считаются дефолтными, если они выбраны (имеют атрибут checked).

  • <button> считается дефолтной, если это базовая кнопка сабмита формы (<form>) — это первая в форме кнопка по порядку DOM элементов. Это также справедливо и для типов <input type="submit">.
меню

:disabled

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

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

Примеры

Установим цвет фона для всех отключенных полей формы с типом text: <input type="text">:

<form action="#">
	<legend>Shipping address</legend>
	<input type="text" placeholder="Name">
	<input type="text" placeholder="Address">
	<input type="text" placeholder="Zip Code">
</form>
input[type="text"]:disabled {
	background: #dddddd;
}

Установим цвет фона элементов <select class="country" disabled> — все отключенные элементы SELECT с классом COUNTRY:

select.country:disabled {
	background: #dddddd;
}
меню

:enabled

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

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

Примеры

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

<form action="#">
	<legend>Shipping address</legend>
	<input type="text" placeholder="Name" disabled="disabled">
	<input type="text" placeholder="Address">
	<input type="text" placeholder="Zip Code">
</form>
input[type="text"]:enabled {
	background: #fff;
}

input[type="text"]:disabled {
	background: #dddddd;
}
меню

:empty

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

.box {
	background: red;
	height: 200px;
	width: 200px;
}

.box:empty {
	background: lime;
}
<div class="box"><!-- пустой --></div>
<div class="box">Я буду красным</div>
<div class="box">
	<!-- Я буду красным, так как перед комментарием стоят пробелы -->
</div>

::before

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

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

li:before {
	content: '-';
	display: inline-block;
	margin-right: .5em;
}

Получим:

    • элемент 1
    • элемент 2

Когда-то все браузеры реализовали эти псевдо-элементы с одним двоеточием: :after :before. Но стандарт с тех пор изменился и сейчас все, кроме IE8, понимают также современную запись с двумя двоеточиями. Для IE8 нужно по-прежнему одно.

меню

::after

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

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

.clear:after {
	content: '';
	display: table;
	clear: both;
}

:hover

Срабатывает при наведении мышки на элемент, когда курсор над элементом. Может применяться для любых элементов (div, span) не только ссылок <a>.

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

a:hover {  border-bottom: 1px solid black; }

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

div:hover { background: #e3e3e3; }

:not(selector)

Выбирает элементы, которые не содержат указанного селектора. Вместо "selector" может быть любой селектор, кроме псевдо-элементов (:first-letter). Двойное отрицание запрещено: :not(:not(...)).

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

*:not(p) { color: green; }

В этом примере выбираются все элементы li, у которых нет класса .last:

ul li:not(.last) { color: blue; }

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

<ul>
	<li>элемент 1</li>
	<li>элемент 2</li>
	<li class="last">элемент 3</li>
</ul>
меню

::first-line, ::first-letter

  • ::first-line стилизует начальную (первую) строку.
  • ::first-letter стилизует начальную (первую) букву. Изменяются только шрифт, цвет текста, фон и т.д. привязан к множеству параметров: ширина окна браузера, язык, шрифт и т.п.

Эти селекторы принято записывать с двойным двоеточием ::first-line, но можно и с одним :first-line.

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

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

p::first-letter {
	float: left;
	font-size: 2em;
	font-weight: bold;
	font-family: cursive;
	padding-right:2px;
}

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

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

p::first-line {
	font-weight: bold;
	font-size: 1.2em;
}
меню

: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) считает только элементы типа Х находящиеся на одном уровне. Например:

<h1>Заголовок</h1>
<p>Первый параграф.</p><!-- p:nth-child(2) -->
<p>Второй параграф.</p><!-- p:nth-of-type(2) -->

n может быть:

  • odd — нечетные.
  • even — четные.
  • число — порядковый номер с 1.
  • выражение с n an+ba и b целые числа, n — счетчик от 0 до 999...
  • смотреть на примере >

n = odd / even

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

p:nth-child( odd ) {
	background: red;
}
p:nth-child( even ) {
	background: blue;
}

Получим:

<h1>Заголовок</h1>
<p>Первый параграф.</p><!-- blue -->
<p>Второй параграф.</p><!-- red -->
<p>Третий параграф.</p><!-- blue -->

n = число

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

p:nth-child(2) { color: red; }

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

<h1>Заголовок</h1>
<p>Первый параграф.</p><!-- red -->
<p>Второй параграф.</p>
<p>Третий параграф.</p>

n = выражение

Формула выражения: an + b. Где a - это число, которое будет умножаться на n, n - это счетчик от 0-999, b - это число, отступ. { an + b; n = 0, 1, 2, ... }

  • в селекторе :nth-child(2) указана только "а".
  • :nth-child(odd) можно заменить на :nth-child(2n+1) - 1, 3, 5, 7 ...
  • :nth-child(even) можно заменить на :nth-child(2n) - 2, 4, 6, 8 ...
  • :nth-child(3n+4) - 4, 7, 10, 13 ...
  • :first-child можно заменить на :nth-child(0n+1) или :nth-child(1)

смотреть пример →

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

p:nth-child(3n) { background: red; }

Получим:

<h1>Заголовок</h1>
<p>Параграф 1</p>
<p>Параграф 2</p><!-- background: red -->
<p>Параграф 3</p>
<p>Параграф 4</p>
<p>Параграф 5</p><!-- background: red -->
<p>Параграф 6</p>
<p>Параграф 7</p>
<p>Параграф 8</p><!-- background: red -->
<p>Параграф 9</p>
меню

:nth-last-child(n)

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

n может быть:

  • odd — нечетные.
  • even — четные.
  • число — порядковый номер с 1.
  • выражение с n an+ba и b целые числа, n — счетчик от 0 до 999...
  • смотреть на примере >

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

li:nth-last-child(2) { color: red; }

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

<h1>Заголовок</h1>
<p>Первый параграф.</p>
<p>Второй параграф.</p><!-- red -->
<p>Третий параграф.</p>

Еще примеры смотрите в предыдущем селекторе :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) считает все элементы всех типов на одном уровне, не важно какой тип указан в Х. Например:

<h1>Заголовок</h1>
<p>Первый параграф.</p><!-- p:nth-child(2) -->
<p>Второй параграф.</p><!-- p:nth-of-type(2) -->

n может быть:

  • odd — нечетные.
  • even — четные.
  • число — порядковый номер с 1.
  • выражение с n an+ba и b целые числа, n — счетчик от 0 до 999...
  • смотреть на примере >

#1 n = add / even

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

p:nth-of-type(odd)  { background: red; }
p:nth-of-type(even) { background: blue; }

Получим:

<h1>Заголовок</h1>
<p>Первый параграф.</p><!-- red -->
<p>Второй параграф.</p><!-- blue -->
<p>Третий параграф.</p><!-- red -->

#2 n = число

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

li:nth-of-type(2) { color: red; }

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

<h1>Заголовок</h1>
<p>Первый параграф.</p>
<p>Второй параграф.</p><!-- red -->
<p>Третий параграф.</p>

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

Формула выражения: an + b, где "a" - число, которое будет умножаться на n, "n" - счетчик от 0-999, "b" - число, отступ. { an + b; n = 0, 1, 2, ... }

  • в селекторе :nth-of-type(2) указана только "а".
  • :nth-of-type(odd) можно заменить на :nth-of-type(2n+1) - 2, 4, 6, 8 ...
  • :nth-of-type(even) можно заменить на :nth-of-type(2n) - 1, 3, 5, 7 ...
  • :nth-of-type(3n+4) - 4, 7, 10, 13 ...
  • :first-of-type можно заменить на :nth-of-type(0n+1) или просто :nth-of-type(1)

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

p:nth-of-type(3n) { background: red; }

Получим:

<h1>Заголовок</h1>
<p>Параграф 1</p>
<p>Параграф 2</p>
<p>Параграф 3</p><!-- background: red -->
<p>Параграф 4</p>
<p>Параграф 5</p>
<p>Параграф 6</p><!-- background: red -->
<p>Параграф 7</p>
<p>Параграф 8</p>
<p>Параграф 9</p><!-- background: red -->
меню

:nth-last-of-type(n)

Выбирает элемент по номеру указанному в n. X:nth-last-of-type(n) Начинает отсчет от последнего элемента X находящегося на одном уровне.

Это такой же селектор как и :nth-of-type(n) только считает наоборот - с конца.

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

 p:nth-last-of-type(3n) { background: red; }

Получим:

<h1>Заголовок</h1>
<p>Параграф 1</p><!-- background: red -->
<p>Параграф 2</p>
<p>Параграф 3</p>
<p>Параграф 4</p><!-- background: red -->
<p>Параграф 5</p>
<p>Параграф 6</p>
<p>Параграф 7</p><!-- background: red -->
<p>Параграф 8</p>
<p>Параграф 9</p>

Еще примеры смотрите в предыдущем селекторе :nth-of-type(n).

меню

:first-child

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

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

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

#container div:first-child{ color:red; }

Получим:

<div id="container">
	<div>элемент 1</div><!-- color:red; -->
	<div>элемент 2</div>
</div>

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

<div id="container">
	<h1>Заголовок</h1>
	<div>элемент 1</div><!-- не выделит -->
	<div>элемент 2</div>
</div>

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

:first-child иногда используется для обнуления свойства border на граничных элементах списка. Следущий код обнулит значение верхней границы элемента li, являющимся дочерним по отношению к элементу ul.

ul li:first-child { border-top: none; }
меню

:last-child

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

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

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

 #container div:last-child{ color:red; }

Получим:

<div id="container">
	<div>элемент 1</div>
	<div>элемент 2</div><!-- color:red; -->
</div>

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

<div id="container">
	<div>элемент 1</div>
	<div>элемент 2</div><!-- не выделит -->
	<p>параграф</p>
</div>

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

ul > li:last-child { color: green; }

Получим:

<ul>
	<li>список 1</li>
	<li>список 2</li>
	<li>список 3</li><!-- color: green; -->
</ul>
меню

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

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

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

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

#container div:first-of-type{ color:red; }

Получим:

<div id="container">
	<h1>Заголовок</h1>
	<div>элемент 1</div><!-- color:red; -->
	<div>элемент 2</div>
</div>

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

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

ul li:first-of-type { border-top: none; }

Получим:

<ul>
	<span>текст</span>
	<li>элемент 1</li><!-- border-top: none; -->
    <li>элемент 2</li>
	<li>элемент 3</li>
</ul>
меню

:only-child

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

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

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

p:only-child { background: red; }

Получим:

<div>
	<p>параграф</p><!-- background: red; -->
</div>

<div>
	<span>параграф</span><!-- не выберет, потому что X=p а не span -->
</div>

<div>
	<p>текст</p><!-- не выберет, потому что на этом уровне 2 элемента -->
	<span>параграф</span>
</div>
меню

:not(:only-child)

:only-child с отрицанием :not() - это комбинация двух псевдо-селекторов.

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

li:not(:only-of-type) {
  font-size: 1.25em;
}

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

<ul>
	<li></li><!-- не будет выбран -->
</ul>

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

<ul>
	<li></li><!-- будет выбран -->
	<li></li><!-- будет выбран -->
</ul>

:only-of-type

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

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

Например:

p:only-of-type { background: red; }

Получим:

<div>
	<p>параграф</p><!-- background: red; -->
</div>

<div>
	<span>параграф</span><!-- не выделится, потому что X=p а не span -->
</div>

<div>
	<span>параграф</span>
	<p>текст</p><!-- background: red; -->
</div>

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

ul > li:only-of-type { font-weight: bold; }

Другой вариант: можно ul > li:only-child, потому что обычно в списках ul находятся только li теги.

меню

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

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

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

<div>
	<p>параграф</p>
	<ul>
       <li>Список 1 </li>
       <li>Список 2 </li>
	</ul>

	<ul>
       <li>Список 3 </li>
       <li>Список 4 </li>
	</ul>
</div>

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

Решение 1
ul:first-of-type > li:nth-child(2) { font-weight: bold; }

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

Решение 2

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

p + ul li:last-child { font-weight: bold; }

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

Решение 3

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

ul:first-of-type li:nth-last-of-type(1) { font-weight: bold; }

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

меню

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

Чтобы быстро и точно понять как работают псевдо-селекторы типа :first-child. Я создал спец. страницу. Там же можно подобрать нужный для себя селектор этого типа, под конкретную задачу.

Смотреть «Наглядное пособие»

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

Полезная статья на Хабре - количественные CSS селекторы, учит считать элементы с помощью nth-child. Например, нужно выделить первый элемент, только, если в блоке 6 элементов указанного типа. Или, нужно выделить все элементы блока, если в блоке всего 6 элементов.

Диапазон элементов в селекторе

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

ol li:nth-child(n+7):nth-child(-n+14) {
  background: lightpink;
}

Видео на десерт: CSS селекторы

25 комментов
Полезные 4 Все
    Войти