Селекторы css – Соседние (смежные) и родственные селекторы CSS — учебник CSS

Содержание

CSS селекторы

Селектор - это часть CSS-правила, которая сообщает браузеру, к какому элементу (или элементам) веб-страницы будет применён стиль.

Термин селектор может относиться к простому селектору (simple selector), составному селектору (compound selector), сложному селектору (complex selector) или списку селекторов.

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

  • селектор типа
  • универсальный селектор
  • селекторы атрибутов
  • селектор идентификатора
  • селектор класса
  • псевдо-классы
CSS селекторПримерОписаниеCSS
.class .myClass Выбирает все элементы с классом myClass (class="myClass"). 1
#id #main Выбирает элемент с идентификатором main (id="main"). 1
* * Выбор всех элементов.
2
элемент span Выбор всех элементов <span>. 1
элемент,элемент div,span Выбор всех элементов <div> и всех элементов <span>. 1
[атрибут] [title] Выбирает все элементы с атрибутом title. 2
[атрибут="значение"] [title="cost"] Выбирает все элементы с атрибутом title, значение которого в точности совпадает со значением указанным в селекторе (title="cost"). 2
[атрибут~="значение"] [title~="один"] Выбирает все элементы с атрибутом title, в значении которого (в любом месте) встречается подстрока (в виде отдельного слова) "один" (title="один и два"). 2
[атрибут|="значение"] [lang|="ru"] Выбор всех элементов с атрибутом lang, значение которого начинается с "ru". 2
[атрибут^="значение"] a[href^="https"] Выбор каждого элемента <a> с атрибутом href, значение которого начинается с "https". 3
[атрибут$="значение"] [src$=".png"] Выбирает все элементы с атрибутом src, значение которого оканчивается на ".png" (src="some_img.png"). 3
[атрибут*="значение"] [title*="один"] Выбирает все элементы с атрибутом title, в значении которого (в любом месте) встречается подстрока (в виде отдельного слова или его части) "один" (title="один и два"). 3

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


span[title].className
p.className1.className2#someId:hover

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

Список селекторов — это селекторы, перечисленные через запятую.

Комбинаторы

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

КомбинаторПримерОписаниеCSS
элемент элемент div span Выбор всех элементов <span> внутри <div>. 1
элемент>элемент div>span Выбирает все дочерние элементы <span>, у которых родитель - элемент <div>. 2
элемент+элемент div+p Выбирает все элементы <p>, которые расположены сразу после элементов <div>. 2
элемент1~элемент2 p~ol Выбор всех элементов <ol>, которым предшествует элемент <p>. 3

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

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

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

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

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

Псевдо-элементПримерОписаниеCSS
::first-letter p::first-letter Выбор первой буквы каждого элемента <p>. 1
::first-line p::first-line Выбор первой строки каждого элемента <p>. 1
::before p::before Добавляет элемент с содержимым перед содержимым каждого элемента <p>. 2
::after p::after Добавляет элемент с содержимым после содержимого каждого элемента <p>. 2

Селекторы, псевдоклассы и псевдоэлементы | CSS справочник

ПсевдоэлементПримерОписание
Chrome

Firefox

Opera

Safari

IExplorer

Edge
:activea:active Применяет стиль к активной ссылке. 4.02.09.63.17.012.0
:checkedinput:checked Применяется к элементам <input> (выбранные элементы type = "radio" или type = "checkbox") 4.03.59.63.29.012.0
:disabledinput:disabled Выбирает каждый отключенный элемент <input>. 4.03.59.63.29.012.0
:emptydiv:empty Выбирает каждый элемент <div>, который не содержит дочерних элементов (включая текст/ пробелы). 4.03.59.63.29.012.0
:enabledinput:enabled Применяется для выбора каждого элемента <input>, который не отключен. 4.03.59.63.29.012.0
:first-child
h3:first-child Выбирает любой тег <h3>, который является первым дочерним тегом своего родителя. 4.03.09.63.17.012.0
:first-of-typep:first-of-type Выбор каждого элемента <p>, который является первым из элементов своего родительского элемента. 4.03.59.63.29.012.0
:focusinput:focus Стилизует элемент <input>, который находится в фокусе. 4.02.09.63.18.012.0
:hovera:hover Стилизует ссылку (элемент <a>) при наведении указателя мыши. 4.02.09.63.17.012.0
:in-rangeinput:in-range Выбирает все элементы <input> со значением в указанном диапазоне. 10.028.011.05.2Нет13.0
:invalidinput:invalid Выбирает все элементы <input> в которых значение указано некорректно (не соответствует типу входных данных). 10.04.010.05.010.012.0
:lang(код языка)p:lang(es) Выбирает каждый элемент <p>, атрибут lang которого, содержит значение "es" (Español) 4.02.09.63.18.012.0
:last-childh3:last-child Выбирает любой тег <h3>, который является последним дочерним элементом своего родителя. 4.03.59.63.29.012.0
:last-of-typep:last-of-type Выбор каждого элемента <p>, который является последним из элементов своего родительского элемента. 4.03.59.63.29.012.0
:linka:link Задаёт стиль всем ссылкам, по которым пользователь не произвёл переход (не посещенные ссылки). 4.02.09.63.17.012.0
:not(селектор):not(h3) Задаёт стиль всем элементам, которые не являются элементом <h3> 4.03.59.63.29.012.0
:nth-child(n)tr:nth-child(2) Выбирает каждый элемент <tr>, который является вторым дочерним элементом своего родительского элемента. 4.03.59.63.29.012.0
:nth-last-child(n)p:nth-last-child(2) Выбирает каждый элемент <li>, который является вторым дочерним элементом своего родительского элемента (считая от последнего дочернего элемента). 4.03.59.63.29.012.0
:nth-last-of-type(n)p:nth-last-of-type(2) Выбирает каждый элемент <p>, который является вторым дочерним элементом своего родительского элемента (считая от последнего дочернего элемента). 4.03.59.63.29.012.0
:nth-of-type(n)img:nth-of-type(2) Выбор каждого элемента <img>, который является вторым дочерним элементом своего родительского элемента. 4.03.59.63.29.012.0
:only-childp:only-child Выбор каждого элемента <p>, который является единственным дочерним элементом своего родительского элемента (нет других элементов). 4.03.59.63.29.012.0
:only-of-typep:only-of-type Выбор каждого элемента <p>, который является единственным элементом <p> своего родительского элемента (нет других элементов <p>). 4.03.59.63.29.012.0
:optionalinput:optional Выбирает все элементы <input>, у которых не задан атрибут required (который указывает, что пользователь обязательно должен выбрать/добавить значение перед отправкой формы). 10.04.010.05.010.012.0
:out-of-rangeinput:out-of-range Выбирает все элементы <input>, которые находятся за пределами указанного диапазона (атрибуты min и max). 10.028.011.05.2Нет13.0
:read-onlyinput:read-only Выбирает все элементы <input> для которых указан атрибут readonly (только для чтения). Да -moz-ДаДаНет13.0
:read-writeinput:read-write Выбирает все элементы <input> для которых не указан атрибут readonly (только для чтения). Да -moz-ДаДаНет13.0
:requiredinput:required Выбирает все элементы <input>, у которых задан атрибут required (который указывает, что пользователь обязательно должен выбрать/добавить значение перед отправкой формы). 10.04.010.05.010.012.0
:root:root Определяет корневой элемент документа. 4.03.59.63.29.012.0
:target:target Стилизует целевой элемент на странице (на который был произведён переход по якорной ссылке). 4.03.59.63.29.012.0
:validinput:valid Выбирает все элементы <input> в которых значение указано корректно (соответствует типу входных данных). 10.04.010.05.010.012.0
:visiteda:visited Задаёт стиль всем ссылкам, по которым пользователь произвёл переход (посещенные ссылки). 4.02.09.63.17.012.0

Селекторы CSS | Учебные курсы

Поскольку мы не хотим стилизовать все наши элементы HTML одновременно, нам требуется возможность выбрать подмножество этих элементов.

Селекторы CSS определяют, к каким элементам мы хотим применить стиль.

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

Нацелиться на базовые теги HTML легко: просто используйте имя тега.

a { /* Ссылки */ }
p { /* Абзацы */ }
ul { /* Неупорядоченные списки */ }
li { /* Пункты списка */ }

Есть прямая связь между именем тега HTML и используемым селектором CSS.

Классы

Учитывая, что мы, вероятно, не желаем стилизовать все абзацы или все заголовки одинаково, нам надо их различать.

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

.date {
  color: red;
}

С другой стороны есть атрибут HTML class со значением date. Он должен совпадать с именем класса CSS.

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

Селектор класса .date будет нацелен на все элементы HTML с атрибутом. Таким образом, следующие элементы HTML все будут стилизованы:

<p>
  21 февраля, суббота
</p>
<p>
  Мероприятие произойдёт в <em>субботу</em>.
</p>

Имейте в виду, что имя тега не важно, учитывается только атрибут class.

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

Можно также использовать атрибут id в вашем HTML и определить его в вашем CSS с помощью решётки:

CSS

#tagline{ color: orange;}

HTML

<h2>Этот заголовок будет оранжевым.</h2>

Идентификаторы похожи на классы, так как они тоже основаны на атрибуте HTML.

Пример

HTMLВозможные селекторыЧто это значит
<p></p>
pКаждый <p>
<div></div>
div
.global
div.global
Каждый <div>
Каждый элемент с class=”global”
Каждый <div> с class=”global”
<ul>
#menu
ul#menu
Только элемент с id=”menu”
Только элемент <ul> с id=”menu”
<ol>
  <li>Un cobaye</li>
  <li>Des cobaux</li>
</ol>
li
ol li
.dico li
Каждый <li>
Каждый <li> внутри предка <ol>
Каждый <li> внутри предка с

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

Давайте воспользуемся нашим предыдущим примером, в котором мы хотим сделать наши даты красными:

<p>
  21 февраля, суббота
</p>
<p>
  Мероприятие произойдёт в <em>субботу</em>.
</p>

Если мы захотим вместо этого, чтобы наши даты внутри <em> отображались синим цветом? Мы можем добавить следующее правило CSS:

em.date {
  color: blue;
}

em.date объединяет в себе:

  • селектор тега em;
  • селектор класса .date.

Он будет применяться только к элементам <em></em>. Это не повлияет на другие .date или <em>.

Иерархия селекторов

Пробел в селекторе определяет отношение предок/потомок. Скажем, мы хотим, чтобы ссылки в нашем заголовке были красного цвета:

header a {
  color: red;
}

Это можно читать справа налево как: «выбрать все элементы <a>, которые находятся внутри элемента <header>». Это заставит все другие ссылки (которые не в заголовке) оставаться неизменными.

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

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

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

a {
  color: blue;
}
  
a:hover {
  color: red;
}

Перейти к заданиям

Учебник CSS 3. Статья "Селекторы. Часть 3"

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

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

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

Давайте рассмотрим следующий селектор и попробуем разобраться, что он значит:

img[title] { /* выбирает все элементы <img> с атрибутом title */
блок объявлений;
}

img в данной случае аналогичен селектору типа, т.е выбирает все элементы <img>, а в квадратных скобках мы задаем имя атрибута этого элемента. То есть происходит выборка всех элементов данного типа с определённым атрибутом, в нашем примере это глобальный атрибут title, определяющий текстовую подсказку о содержимом элемента.

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

.main[title] { /* выбирает все элементы с классом main и атрибутом title */
блок объявлений;
} 
#main[title] { /* выбирает элемент с идентификатором main и атрибутом title */
блок объявлений;
} 

В данном случае первый селектор выбирает все элементы, которые имеют значение глобального атрибута class равным main и глобальным атрибутом title. Второй селектор выбирает элемент, который имеют значение глобального атрибута id равным main и глобальным атрибутом title.

Рассмотрим следующий пример в котором, мы выберем все элементы <img>, у которых присутствует атрибут alt, который задает альтернативный текст для изображения.

<!DOCTYPE html>
<html>
<head>
	<meta charset = "UTF-8">
	<title>Пример использования селектора атрибутов</title>
<style>
img { /* выбираем все изображения */
width: 100px;  /* задаем ширину элемента */
height: 100px;  /* задаем высоту элемента */
}
img[alt] { /* выбираем все изображения с атрибутом alt */
border: 1px solid green; /* устанавливаем сплошную границу размером 1 пиксель зеленого цвета */
} 
</style>
</head>
	<body>
		<img src = "nich.jpg" alt = "nich">
		<img src = "nich.jpg"> <!-- элемент не будет стилизован (отсутствует атрибут alt) -->
		<img src = "nich.jpg" alt = "nich">
	</body>
</html>

Результат нашего примера:

Рис. 17г Пример использования селектора атрибутов.

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

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

<!DOCTYPE html>
<html>
<head>
	<meta charset = "UTF-8">
	<title>Селектор атрибута с указанным значением</title>
<style>
input[type=password] { /* выбираем все элементы <input>, атрибут type которых имеет значение password */
border: 1px dotted red; /* устанавливаем точечную границу размером 1 пиксель красного цвета */
} 
input[type=password]:focus { /* выбираем элемент <input>, атрибут type которого имеет значение password и который находится в фокусе */
border: 1px solid green; /* устанавливаем сплошную границу размером 1 пиксель зеленого цвета */
} 
</style>
</head>
	<body>
		<form>
			Login: <input type = "text" name = "login" placeholder = "Введите ваш логин"><br><br>
			Password: <input type = "password" name = "password" placeholder = "Введите ваш пароль"><br><br>
			<input type = "submit" name = "submit" value = "Далее">
		</form>
	</body>
</html>

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

Результат нашего примера:

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

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

[attribute ^ = value] {
блок объявлений;
}

Давайте рассмотрим пример в котором выберем на странице все абсолютные адреса внешних гиперссылок, которые начинаются с http://, либо https://:

<!DOCTYPE html>
<html>
<head>
	<meta charset = "UTF-8">
	<title>Селектор атрибута со значением, начинающимся с определённых символов</title>
<style> 
a[href ^ = "http://"], a[href ^ = "https://"] { /* групповой селектор атрибутов */
color: orange; /* устанавливаем цвет текста */
}
</style>
</head>
	<body>
		<p>Сайт компании доступен как по протоколу http, так и по протоколу https:</p>
			<ul>
				<li><a href = "http://сайткомпании.ссср">Адрес с http</a></li>
				<li><a href = "https://сайткомпании.ссср">Адрес с https</a></li>
			</ul>
		<p>Может вы настроите перенаправление?</p>
	</body>
</html>

Обратите внимание, что значение атрибута в этом случае мы указываем в кавычках, чтобы браузер не интерпретировал это как начало гиперссылки.


Результат нашего примера:

Рис. 17е Пример использования селектора атрибута со значением, начинающимся с определённых символов.

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

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

<!DOCTYPE html>
<html>
<head>
	<meta charset = "UTF-8">
	<title>Селектор атрибута со значением, заканчивающимся определёнными символами</title>
<style> 
a[href$=".doc"] { /* выбираем все элементы с атрибутом href, значение которого закачивается на .doc */
color: green; /* устанавливаем цвет текста */
background-color: lightblue; /* устанавливаем цвет заднего фона */
}
a[href$=".mp3"] { /* выбираем все элементы с атрибутом href, значение которого закачивается на .mp3 */
background-color: khaki; /* устанавливаем цвет заднего фона */
}
</style>
</head>
	<body>
		<a href ="http:/path.to/test.doc">Инструкция</a><br>
		<a href ="http:/path.to/test.mp3">Песня про зайцев</a>
	</body>
</html>

Обратите внимание, что значение атрибута в этом случае мы указываем в кавычках, чтобы браузер не интерпретировал это как разрешение файла.


Результат нашего примера:

Рис. 18 Пример использования селектора атрибутов со значением, заканчивающимся определёнными символами.

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

Следующий селектор позволит нам, к примеру, выбрать изображения, которые содержат в названии IMG_ (как правило такое наименование файлов использует компания Canon):

img [src*="IMG_"] { /* выбирает все элементы img, атрибут src, которых содержит символы "IMG_" */
блок объявлений;
}  
/* селектор выбирает элементы с такими значениями как "xxxIMG_", "IMG_xxxx" и "xxxIMG_xxxx" */

Браузер интерпретирует это как необходимость выбора всех изображений, атрибут src которых содержит IMG_ (в любом месте). Зачастую такой способ позволяет быстрее отформатировать необходимые элементы, по сравнению с созданием и присвоением стилевого класса для каждого элемента.

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

p[title ~="home"] { /* выбирает элементы <p>, которые содержат определенное слово */
блок объявлений;
}  

<p title = "go home">Абзац title="go home"</p> <!-- абзац будет стилизован (содержит home) -->
<p title = "home home" >Абзац title="home home"</p> <!-- абзац будет стилизован (содержит home) -->
<p title = "home-1" >Абзац title="home1"</p> <!-- абзац не будет стилизован -->
<p title = "homes" >Абзац title="homes"</p> <!-- абзац не будет стилизован -->
<p title = "shome">Абзац title="shome"</p> <!-- абзац не будет стилизован -->

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

[title | = home] { /* выбирает все элементы с атрибутом, значение которого начинается с определённого слова (после него не должно быть никаких символов, либо допускается продолжать значение через дефис, иначе выборка не будет произведена) */
блок объявлений;
}  

<p title = "home">Абзац title="home"</p> <!-- абзац будет стилизован (начинается с home) -->
<p title = "home-1" >Абзац title="home-1"</p> <!-- абзац будет стилизован (начинается с home после которого следует дефис) -->
<p title = "home home">Абзац title="home home"</p> <!-- абзац не будет стилизован -->
<p title = "not home">Абзац title="not home"</p> <!-- абзац не будет стилизован -->
<p title = "homes" >Абзац title="homes"</p> <!-- абзац не будет стилизован -->
<p title = "shome">Абзац title="shome"</p> <!-- абзац не будет стилизован -->
Обратите внимание, что условие выборки будет соблюдено если атрибут содержит значение, которое содержит только указанное слово, или если после указанного слова сразу следует дефис (значение продолжается через дефис).

Псевдокласс отрицания :not()

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


Что нельзя использовать с псевдоклассом :not():

  • Использовать в одном селекторе несколько псевдоклассов :not().
  • Использовать с псевдоэлементами (::first-letter, ::first-line и так далее).
  • Нельзя использовать с селекторами потомков (например, div ul a).
  • Использовать в групповых селекторах (комбинации из селекторов).

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

img { /* выбираем все изображения */
width: 100px; /* ширина элемента в пикселях */
height: 100px; /* высота элемента в пикселях */
}

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

.photo { /* выбираем все элементы с классом photo */
border: 2px solid orange; /* сплошная граница размером 2 пикселя оранжевого цвета */
}

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

img:not(.photo)  { /* выбираем все изображения, которые не имеют класса photo */
border: 2px dashed green; /* пунктирная граница размером 2 пикселя зеленого цвета */
}

Всё вместе и результат:

<!DOCTYPE html>
<html>
<head>
	<meta charset = "UTF-8">
	<title>Псевдокласс отрицания :not()</title>
<style>
img { /* выбираем все изображения */
width: 100px; /* ширина элемента в пикселях */
height: 100px; /* высота элемента в пикселях */
}
.photo { /* выбираем все элементы с классом photo */
border: 2px solid orange; /* сплошная граница размером 2 пикселя оранжевого цвета */
}
img:not(.photo)  { /* выбираем все изображения, которые не имеют класса photo */
border: 2px dashed green; /* пунктирная граница размером 2 пикселя зеленого цвета */
}
</style>
</head>
	<body>
		<img src = "nich.jpg" alt = "nich" class = "photo">
		<img src = "nich.jpg" alt = "nich" class = "photo"><br>
		<img src = "nich.jpg" alt = "nich"> 
		<img src = "nich.jpg" alt = "nich"> 
		<img src = "nich.jpg" alt = "nich">
	</body>
</html>

Как вы можете заметить на изображении ниже, мы справились с поставленной задачей и стилизовали с использованием псевдокласса отрицания :not() все изображения, отлично от изображений с классом photo:

Рис. 19 Пример использования псевдокласса отрицания :not() в CSS.

Селекторы дочерних элементов

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

Элемент, подчиненный другому элементу более высокого уровня, является дочерним. На изображении ниже оба элемента <h3> и <p> являются дочерними по отношению к <body>, но элемент <i> при этом не является дочерним для элемента <body>, так как он расположен внутри тега <p>, и является дочерним именно для него.


Рис. 20 Дочерние элементы в HTML документе.

Перед нами стоит задача стилизовать гиперссылку (элемент <a>), который выделен оранжевым цветом на изображении:


Рис. 20а Задача выбора элемента на странице.

При использовании селектора потомков body a приведет к выбору всех элементов <a>, так как они являются вложенными по отношению к элементу <body>, если мы используем селектор потомков p a, то это приведет к выбору двух элементов <a>, которые вложены внутри элементов <p>, так как они оба являются его потомками. Селекторы потомков мы с Вами рассматривали в статье "Селекторы. Часть 2".

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

p > a { /* выбирает любой элемент <a> дочерний по отношению к <p> */
блок объявлений;
}

Рассмотрим пример:

<!DOCTYPE html>
<html>
<head>
	<meta charset = "UTF-8">
	<title>Селектор дочерних элементов</title>
<style>
p>a { /* селектор дочерних элементов (выбираем дочерние <а>, вложенные в <p>) */
color: orange; /* устанавливаме цвет текста */
font-size: /* устанавливаме размер текста текста */
}
p a { /* селектор потомков (выбираем все потомки <a>, вложенные в <p>) */
text-decoration: none; /* убираем декорирование текста (нижнее подчеркивание) */
}
</style>
</head>
	<body>
		<p><a href = "https://ru.wikipedia.org/">Ссылка</a> внутри &amplt;p&ampgt;.</p>
		<a href = "https://ru.wikipedia.org/">Ссылка</a> внутри &amplt;body&ampgt;.
		<p><span><a href = "https://ru.wikipedia.org/">Ссылка</a></span> внутри элемента &amplt;p&ampgt;, вложенного в элемент &amplt;p&ampgt;.</p>
	</body>
</html>

В этом примере с использованием селектора дочерних элементов мы выбрали все дочерние <a>, вложенные в <p> (один элемент), а с помощью селектора потомков стилизовали все потомки <a>, вложенные в <p> (убрали декорирование текста у двух элементов).

Результат нашего примера:

Рис. 20б Пример использования селектора дочерних элементов.

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

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

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


Рис. 21 Выборка с использованием псевдокласса дочерних элементов.

Давайте рассмотрим пример, в котором перед Вами стоит задача изменить стиль для всех элементов, которые выделены оранжевым цветом на изображении:


Рис. 21а Пример выбора селектора дочерних элементов.

Что общего у элементов, выделенных на изображении? А общее у них то, что выделенные элементы <h3> и <li> являются первыми дочерними элементами своих родителей, и чтобы нам их стилизовать необходимо использовать псевдокласс :first-child.

Перейдем к примеру:

<!DOCTYPE html>
<html>
<head>
	<meta charset = "UTF-8">
	<title>Псевдокласс :first-child</title>
<style>
h3:first-child { /* выбираем каждый элемент <h3>, который является первым дочерним элементом своего родителя */
color: blue; /* устанавливаем цвет текста */
}
li:first-child{ /* выбираем каждый элемент <li>, который является первым дочерним элементом своего родителя */
color: red; /* устанавливаем цвет текста */
font-size: 24px; /* устанавливаем размер шрифта */
}
</style>
</head>
	<body>
		<h3>Первый заголовок h3 тега body</h3>
		<ul>
			<li>один</li>
			<li>два</li>
			<li>три</li>
		</ul>
		<h3>Второй заголовок h3 тега body</h3>
		<article>
			<h3>Первый заголовок h3 тега article</h3>
			<ul>
				<li>один</li>
				<li>два</li>
				<li>три</li>
			</ul>
		</article>
	</body>
</html> 

В этом примере с использованием псевдокласса :first-child мы стилизовали элементы <h3> и <li>, которые являются первыми дочерними элементами своих родителей.

Результат нашего примера:

Рис. 22 Пример использования псевдокласса :first-child.

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

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

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

Давайте рассмотрим пример, в котором перед Вами стоит задача изменить стиль для всех элементов, которые выделены оранжевым цветом на изображении:


Рис. 23 Пример выбора селектора дочерних элементов.

Что общего у элементов, выделенных на изображении? А общее у них то, что выделенные элементы <article> и <li> являются последними дочерними элементами своих родителей, и чтобы нам их стилизовать необходимо использовать псевдокласс :last-child.

Если вы сходу сможете ответить почему ни один элемент <h3> на изображении выше нельзя стилизовать с использованием псевдокласса :last-child, то можете сразу перейти к примеру, если нет, то внимательно изучите следующее изображение, оно поможет Вам до конца понять как работает псевдокласс :last-child:


Рис. 23а Схема работы псевдокласса :last-child.

Еще раз поясню, если вы создадите селектор h3:last-child, то браузер не найдет этот элемент по той причине, что нет элементов <h3>, которые являются последними дочерними элементами своего родителя, важно это понять, так как подобные вещи иногда ставят людей в ступор.

Перейдем к примеру:

<!DOCTYPE html>
<html>
<head>
	<meta charset = "UTF-8">
	<title>Псевдокласс :last-child</title>
<style>
article:last-child { /* выбираем каждый элемент <article>, который является последним дочерним элементом своего родителя */
background-color: orange; /* устанавливаем цвет фона */
}
li:last-child{ /* выбираем каждый элемент <li>, который является последним дочерним элементом своего родителя */
color: red; /* устанавливаем цвет текста */
font-size: 24px; /* устанавливаем размер шрифта */
}
</style>
</head>
	<body>
		<h3>Первый заголовок h3 тега body</h3>
		<ul>
			<li>один</li>
			<li>два</li>
			<li>три</li>
		</ul>
		<h3>Второй заголовок h3 тега body</h3>
		<article>
			<h3>Первый заголовок h3 тега article</h3>
			<ul>
				<li>один</li>
				<li>два</li>
				<li>три</li>
			</ul>
		</article>
	</body>
</html> 

В этом примере с использованием псевдокласса :last-child мы стилизовали элементы <article> и <li>, которые являются последними дочерними элементами своих родителей.

Результат нашего примера:

Рис. 23б Пример использования псевдокласса :last-child.

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

Стилизация по порядковому номеру

Ну что сказать, у нас остались неоконченные дела, которые касаются стилизации того самого неуловимого элемента <h3>, а на помощь в этом нам придет псевдокласс :nth-child.

Псевдокласс :nth-child позволяет выбрать дочерние элементы внутри родительского элемента в зависимости от их размещения (порядкового номера). Применение данного псевдокласса широко распространено, он позволяет чередовать стили строк в таблицах, списках, придать стиль сочетанию дочерних элементов и так далее.

Давайте рассмотрим пример, в котором перед Вами стоит задача изменить стиль для всех элементов, которые выделены оранжевым цветом на изображении:


Рис. 24 Пример выбора селектора дочерних элементов.

Что общего у элементов, выделенных на изображении? А общее у них то, что они выделены оранжевым цветом. Смешно? Не думаю. Общее у них все же есть, элементы <li> являются вторыми дочерними элементами своих родителей, а элемент <h3> тоже можно посчитать, и его порядковый номер будет третьим (третий дочерний элемент своего родителя <body>). Чтобы стилизовать эти элементы, нам необходимо использовать псевдокласс :nth-child.

Перейдем к примеру:

<!DOCTYPE html>
<html>
<head>
	<meta charset = "UTF-8">
	<title>Псевдокласс :first-child</title>
<style>
/* групповой селектор, который выбирает каждый третий дочерний элемент <h3> своего родителя
и каждый второй элемент <li> своего родителя  */
h3:nth-child(3), li:nth-child(2) { 
background-color: orange; /* устанавливаем цвет заднего фона */
}
</style>
</head>
	<body>
		<h3>Первый заголовок h3 тега body</h3>
		<ul>
			<li>один</li>
			<li>два</li>
			<li>три</li>
		</ul>
		<h3>Второй заголовок h3 тега body</h3>
		<article>
			<h3>Первый заголовок h3 тега article</h3>
			<ul>
				<li>один</li>
				<li>два</li>
				<li>три</li>
			</ul>
		</article>
	</body>
</html> 

В этом примере с использованием псевдокласса :nth-child мы стилизовали элементы <h3> и <li>, которые имеют определённый порядковый номер дочернего элемента внутри своих родительских элементов.

Результат нашего примера:

Рис. 24а Пример использования псевдоэлемента :last-child.

Продвинутое использование псевдокласса :nth-child

Стилизация по ключевому слову

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

  • even (четные элементы)
  • odd (нечетные элементы)

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

Давайте для примера создадим две простые таблицы с разными стилевыми классами и рассмотрим наглядно разницу в применении значений ключевых слов псевдокласса :nth-child для HTML элемента <tr>, который определяет строку таблицы:

<!DOCTYPE html>
<html>
<head>
	<meta charset = "UTF-8">
	<title>Стилизация четных и нечетных дочерних элементов</title>
<style>
.primer1 tr:nth-child(even)  { /* стилизация четных дочерних элементов */
background-color: #AAA; /* устанавливаем цвет заднего фона */
}
.primer2 tr:nth-child(odd)  { /* стилизация нечетных дочерних элементов */
background-color: #AAA; /* устанавливаем цвет заднего фона */
}
caption {/* селектор типа (выбираем HTML элемент <caption>) */
color: red; /* устанавливаем цвет текста */
}
</style>
</head>
	<body>
		<table class = "primer1">
			<caption>Значение even (четные)</caption>
			<tr>
				<th>1 строка</th><th>Позиция</th><th>Количество</th>
			</tr>
			<tr>
				<td>2 строка</td><td></td><td></td>
			</tr>
			<tr>
				<td>3 строка</td><td></td><td></td>
			</tr>
			<tr>
				<td>4 строка</td><td></td><td></td>
			</tr>
			<tr>
				<td>5 строка</td><td></td><td></td>
			</tr>
		</table>
		<table class = "primer2">
			<caption>Значение odd (нечетные)</caption>
			<tr>
				<th>1 строка</th><th>Позиция</th><th>Количество</th>
			</tr>
			<tr>
				<td>2 строка</td><td></td><td></td>
			</tr>
			<tr>
				<td>3 строка</td><td></td><td></td>
			</tr>
			<tr>
				<td>4 строка</td><td></td><td></td>
			</tr>
			<tr>
				<td>5 строка</td><td></td><td></td>
			</tr>
		</table>
	</body>
</html>

В этом примере с использованием псевдокласса :nth-child мы стилизовали четные строки первой таблицы (элементы <tr>) и нечетные во второй таблице.

Рис. 24б Пример стилизации четных и нечетных дочерних элементов.
Стилизация по простой математической формуле

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

td:nth-child(4n+2)  {
background-color: lightblue; /* устанавливаем цвет заднего фона */
}

Этот селектор означает, что каждая четвёртая ячейка таблицы (<td>) внутри строки, начиная со второй ячейки таблицы, будет стилизована:

  • 4n – каждый четвертый элемент.
  • 2 – с какого элемента начинать.

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

td:nth-child(4n-1)  {
background-color: lightblue; /* устанавливаем цвет заднего фона */
}

Этот селектор означает, что каждая четвёртая ячейка таблицы (<td>) внутри строки, начиная с третьей ячейки таблицы (-1 ячейки нет по объективным причинам, поэтому происходит сдвиг влево), будет стилизована:

  • 4n – каждый четвертый элемент.
  • -1 – с какого элемента начинать.

Давайте рассмотрим пример использования:

<!DOCTYPE html>
<html>
<head>
	<meta charset = "UTF-8">
	<title>Стилизация дочерних элементов по математической формуле</title>
<style>
td, th{ /* групповым селектором выбираем заголовочные ячейки и ячейки данных */
border: 1px solid green; /* задаём сплошную границу размером 1 пиксель зеленого цвета */
width: 50px;  /* устанавливаем ширину заголовочным ячейкам и ячейкам данных */
}
td:nth-child(4n+2) {
background-color: lightblue; /* устанавливаем цвет заднего фона */
}
</style>
</head>
	<body>
		<table>
			<tr>
				<th>1</th><th>2</th><th>3</th><th>4</th><th>5</th><th>6</th><th>7</th><th>8</th><th>9</th><th>10</th><th>11</th><th>12</th><th>13</th><th>14</th>
			</tr>
			<tr>
				<td>2</td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td>
			</tr>
			<tr>
				<td>3</td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td>
			</tr>
			<tr>
				<td>4</td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td>
			</tr>
		</table>
	</body>
</html>

В этом примере с использованием псевдокласса :nth-child мы выбрали и стилизовали каждую четвёртую ячейку таблицы (<td>) внутри строки, начиная со второй ячейки таблицы. Результат нашего примера:

Рис. 25 Пример cтилизации дочерних элементов по математической формуле.

Вопросы и задачи по теме

Перед тем как перейти к изучению следующей темы пройдите практические задания:

  • Для выполнения задания вам понадобится скачать архив и скопировать содержимое архива (HTML файлы и изображения) в любую папку на вашем жестком диске:

  • Составьте следующие HTML страницы:
    1. Составьте селектор, который позволит Вам стилизовать все изображения, которые имеют глобальный атрибут title: Практическое задание № 5.
    2. Продвинутое задание: составьте селектор, который позволит Вам стилизовать все изображения, но не изображение, которое имеет значение атрибута alt равным "medved": Практическое задание № 6.
    3. С использованием изученных псевдоклассов составьте селекторы, которые позволят Вам стилизовать абзацы (элементы <p>) в соответствии с изображением: Практическое задание № 7.

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

CSS селекторы

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

Селектор по тэгу

Селектор по тэгу определяет стиль всех элементов страницы, созданных конкретным тэгом. Например, для всех тэгов <h2> или для всех тэгов <p>. Для создания этого селектора указывается имя тэга без скобок. Для примера создадим на странице тэг <h2> и зададим всем тэгам <h2> определённый стиль. Для этого внутри тэга <head> создадим тэг <style> и в нём будем указывать стиль. Таким образом, страница будет выглядеть так:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

<!DOCTYPE html>
<html>
<head>
<title>Селекторы</title>
<meta charset="utf-8">
<style>
h2 
  {
  font-size: 15px;
  color: Red;
  }
</style>
</head>
<body>
<h2>Стиль по тэгу</h2>
</body>
</html>

Если Вы всё сделали правильно то заголовок будет отображаться красным цветом и маленьким шрифтом. Вы можете добавить на страницу ещё тэги <h2> и увидите, что все они отображаются с тем же стилем.

Селектор по id

Любому тэгу можно установить атрибут id. Это идентификатор - уникальное имя элемента, по которому этот элемент можно найти для разных целей, в том числе для установки стиля. На одной странице может быть только один элемент с конкретным значением id. Если на странице есть несколько элементов с одинаковым значением id, то это ошибка. Для указания селектора по id ставится знак #, а затем без пробела значение id.

Для примера добавим на страницу тэг <p> и установим ему атрибут id:

16

<p>Стиль по id</p>

Для указания стиля этому элементу добавим внутрь тэга <style> такой код:

12
13
14
15

#name
  {
  color: Green;
  }

Абзац должен отображаться на странице зелёным цветом

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

Любому тэгу можно установить атрибут class. Значение этого атрибута примерно такое же, как у id. Но один и тот же класс может быть у любого количества элементов страницы. И всем этим элементам можно установить определённый стиль. Для указания селектора по классу ставится точка, затем без пробела значение атрибута class.

Для примера добавим на страницу список и зададим пунктам списка атрибут class:

21
22
23

<ol>
<li>Стиль по классу</li>
<li>Стиль по классу</li></ol>

Теперь добавим внутрь тэга <style> такие строки:

16
17
18
19

.ls
  {
  color: Blue;
  }

Список должен отображаться синим цветом.

Разные тэги можно объединить в один класс. При этом, можно указать стиль не всем элементам определённого класса, а только каким-то тэгам. Для этого пишется сначала тэг, затем без пробела точка и класс. Такой селектор будет выглядеть так:

16
17
18
19

li.ls
  {
  color: Blue;
  }

Определённый элемент может относиться одновременно к нескольким классам. Для этого в атрибуте class все классы перечисляются через пробел. Пример:

28

<p>Текст</p>

Этот элемент будет относиться к двум классам. При этом, к нему будут применены и свойства класса registration, и свойства класса inform.

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

Универсальный селектор устанавливает стиль для всех элементов. Он создаётся с помощью знака *

Для примера изменим шрифт всем элементам страницы. Для этого добавим в стиль следующий код:

20
21
22
23

*
  {
  font-family: Verdana;
  }

Составной селектор

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

Для примера установим стиль тэгам <span>, которые находятся внутри тэгов <p>. Добавим на страницу абзац с тэгом <span>, а также отдельный тэг <span>, к которому стиль не должен применяться.

33
34

<p>Начало <span>Выделенный текст</span> Продолжение</p>
<span>Текст без стиля</span>

Добавим в стиль такой код:

7
8
9
10

p span
  {
  color: #8D41BB;
  }

Первый тэг <span> изменил цвет, а второй остался неизменным, потому что он не находится внутри тэга <p>.

Составной селектор может состоять не только из тэгов, но и из любых других селекторов. Для примера установим стиль тэгу <span>, который находится внутри элемента определённого класса. Добавим на страницу блок и зададим ему класс:

39

<div>Начало <span>Выделенный текст</span> Продолжение</div>

Добавим в стиль такие строки:

11
12
13
14

.div1 span
  {
  color: #D41028;
  }

Установка стиля нескольким селекторам

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

Пример:

15
16
17
18

p, div
  {
  font-size: 30px;
  }

Один и тот же селектор может быть указан в стиле несколько раз. Это используется, например, в тех случаях, когда селекторы перечислены через запятую и им заданы определённые свойства. А затем, каждому селектору отдельно установлены остальные свойства.

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

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

Приоритет селектора определяется специфичностью. Специфичность - это число, которое складывается по определённым правилам. Каждый тип простых селекторов имеет свою специфичность.

Селектор по тэгу имеет специфичность 1

Селектор по классу и псевдоклассу имеет специфичность 10

Селектор по id имеет специфичность 100

Например, если есть селекторы div и .inf, то будет использован стиль селектора .inf, потому что у него больше специфичность.

У сложных и составных селекторов специфичность складывается из специфичности простых селекторов, которые входят в их состав. Например:

Селектор #bl .inf специфичность 100+10=110

Селектор p.inf специфичность 1+10=11

Взвешиваем селекторы CSS / Habr

Ближе к двум часам ночи в голову в месте с мыслями о вечном приходят не менее вечные вопросы — «в чём смысл жизни ?», «зачем вообще человеку спать ?» или «Какого чёрта эта #%^$ не работает ?» и чем ближе утро, тем сильнее начинает волновать именно этот самый последний вопрос.

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

Глава один – идём направо!

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

Итак, взвешиваем — сначала представим пару рядов из 8 чисел:

0,1,0,0,0,0,0,0
1,0,0,0,0,0,0,0

Знакомьтесь — так в числах выглядят некоторые два селектора, чтобы никто ни о чем не догадался назову их условно «верхний» и «нижний»

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

  1. Смотрим на крайние левые числа
  2. Выбираем из них большее. — именно этот селектор и будет самым тяжелым
  3. Если числа одинаковые, сдвигаемся на число вправо и повторяем инструкции из пункта 2.
  4. Если все числа одинаковые то применяются стили из селектора который был объявлен последним
Самая страшная тайна

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

Раскрывая самую страшную тайну я расскажу, как собственно превратить обычный селектор в такие понятные и красивые цифры? Всё как всегда очень просто:

  1. Теги. за каждый тег в селекторе можно накинуть в самое правое число единичку:
    a – это 0,0,0,0,0,0,0,1
    div a – это  0,0,0,0,0,0,0,2
    

  2. Классы, за каждый класс или псевдокласс в селекторе можно накинуть по единичке во второе число справа
    .head .logo – это  0,0,0,0,0,0,2,0
    .logo.big  –    0,0,0,0,0,0,2,0
    div:first-child – 0,0,0,0,0,0,1,1
    .logog > .big – и это тоже 0,0,0,0,0,0,2,0
    
    

    Да, вы все верно поняли. Css селектор плевать хотел на все эти ваши изыски типа пробелов или «>».
  3. За каждый ID в селекторе добавляем по единичке в третье справа число.
    #head – это  0,0,0,0,0,1,0,0
    #head  #logo –  тоже  0,0,0,0,0,2,0,0
    


Я думаю суть вы уловили, теперь можно приступать к небольшой викторине, чтобы это проверить:
Викторина
<head>
    <title></title>
    <style>
        span p
        {
            background-color: gray;
        }
        html p
        {
            background-color: red;
        }
    </style>
</head>
<body>
    <div>
        <span><p>?</p></span>
    </div>
</body>

Вопрос: Какого цвета бэкграунд будет в абзаце?
Ответ: Правильно, красного, потому что селектор не волнует что вам там кажется, и расстояние между тэгами его не интересует. А так как вес тэгов равен – применится последний.
<head>
    <title></title>
    <style>
        div.test1
        {
            background-color: gray;
        }
        div > .test1
        {
            background-color: yellow;
        }
        
        div .test1
        {
            background-color: red
        }
    </style>
</head>
<body>
<div>
    <div>?</div>
</div>
</body>

Вопрос: Какого цвета бэкграунд будет в нашем диве?
Ответ: Правильно, красного, потому что при измерении веса глубоко все равно поставили вы там пробел между классами, знак больше или написали их вплотную. Вес у всех этих селекторов одинаковый, а значит применится последний.
<head>
    <title></title>
    <style>
        #id1 div
        {
            background-color: gray;
        }

        #id2
        {
            background-color: red
        }
    </style>
</head>
<body>
<div>
    <div>?</div>
</div>
</body>

Вопрос: Все тот же.
Ответ: А ответ, для разнообразия другой: наш див будет серым. Потому что как я уже упоминал выше селектору абсолютно безразлично что вы там имели ввиду. У первого селектора вес больше, и никого не волнует что скорее всего ожидали вы не такого поведения.
Продолжаем раскрывать секреты

У нас осталось еще так много чисел, и наверняка так хочется узнать что же все они значат – продолжаем раскрывать секреты.
  1. Селектор * абсолютно невесомый, то есть совсем.
  2. Селектор атрибутов это самый обычный псевдокласс и весит он столько же сколько и обычные классы
  3. Любой инлайновый стиль написанный в атрибуте style=”” элемента автоматически получает приоритет0,0,0,0,1,0,0,0, что сразу делает его очень крутым.
  4. А следующие четыре цифры это все наши старые знакомые только с атрибутом !important
    div
    {
        background-color: gray !important;
    }
    
    Имеет вес при определении свойства background-color -  0,0,0,1,0,0,0,0
    
    .header 
    {
        background-color: gray !important;
    }
    
    0,0,1,0,0,0,0,0
    
    


Все мы любим викторины
<head>
    <title></title>
    <style>
    a.class1
    {
        color: blue;
    }
    a[href="#"]
    {
        color: green;
    }
    a[href^="#"] 
    {
        color: red;
    }
    </style>
</head>
<body>
<a href="#">?</a>
</div>
</body>

Вопрос: Какого цвета будет знак вопроса в ссылке?
Ответ: Красного, неважно что селектор на точное совпадение атрибута выглядит более специфичным, чем селектор который выбирает все что «начинается с». Вес они имеют одинаковый.

<head>
    <title></title>
    <style>
        #id1
        {
            background-color: gray !important;
        }
    </style>
</head>
<body>
<div>?</div>
</body>

Вопрос: Мой оригинальный запатентованный вопрос.
Ответ: !important круче всего, даже круче чем инлайн стили – так что бам-бам-бам – серого!

Исходники всех тестов лежат тут

P.S. немного порно

<head>
    <title></title>
    <style>
        #id1
        {
            background-color: gray !important;
        }
    </style>
</head>
<body>
<div>red</div>
</body>

CSS Селекторы

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

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *