Здесь размещена информация о всех селекторах CSS: селекторы тегов, группировка селекторов, контекстный селектор, дочерний селектор, соседний селектор, родственный селектор, универсальный селектор, селектор по id, селектор по классу, селекторы атрибутов.

Более подробное описание (текст, видео, примеры решения задач и задачи) доступны в учебнике HTML CSS по следующим ссылкам: основы работы с языком CSS, основы работы с селекторами CSS, работа с продвинутыми селекторами на CSS. Смотрите также справочник по псевдоклассам и псевдоэлементам CSS.

Селектор тега

Каждому тегу в HTML соответствует так называемый селектор CSS. К примеру, тегу <p> соответствует CSS селектор p, с помощью которого мы можем обратиться ко всем абзацам HTML страницы и, например, покрасить их всех одновременно в красный цвет. После селектора следует ставить фигурные скобки {}, внутри которых следует писать CSS свойства.

Давайте покрасим все абзацы в красный цвет:

<p>
	Абзац с текстом.
</p>
p {
	color: red;
}

Так код будет выглядеть в браузере:

Абзац с текстом.

Соответственно всем остальным тегам соответствуют свои селекторы: тегу <div> соответствует CSS селектор div, тегу <h1> соответствует CSS селектор h1, тегу <h2> соответствует CSS селектор h2 и так далее.

Группировка селекторов

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

h2, h3, p {
	color: red;
}
<h2>Заголовок h2</h2>
<h3>Заголовок h3</h3>
<p>
	Абзац с текстом.
</p>

Так код будет выглядеть в браузере:

Заголовок h2

Заголовок h3

Абзац с текстом.

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

Контекстный селектор (вложенность тегов друг в друга)

Контекстного селектор позволяет обращаться к тегам по их вложенности в другие теги.

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

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

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

В следующем примере мы обратимся ко всем абзацам внутри div и покрасим их в красный цвет. Абзацы вне дива и другие элементы внутри дива (в нашем случае h2) красными не станут:

div p {
	color: red;
}
<div>
	<h2>
		Заголовок h2 внутри тега div.
	</h2>
	<p>
		Абзац внутри тега div.
	</p>
	<p>
		Абзац внутри тега div.
	</p>
	<p>
		Абзац внутри тега div.
	</p>
</div>
<p>
	Абзац вне тега div.
</p>

Так код будет выглядеть в браузере:

Заголовок h2 внутри тега div.

Абзац внутри тега div.

Абзац внутри тега div.

Абзац внутри тега div.

Абзац вне тега div.

Дочерний селектор > (непосредственная вложенность)

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

Что это значит - разберем на следующем примере: обратимся ко всем тегам <i> (покрасим в красный цвет), которые лежат непосредственно внутри абзаца, не затронув <i>, лежащие сначала внутри <b>, а потом уже внутри абзаца:

p > i {
	color: red;
}
<p>
	<i>это i непосредственно в p</i>
	<b><i>это i сначала внутри b, а потом уже внутри p</i></b>
</p>

Так код будет выглядеть в браузере:

это i непосредственно в p
это i сначала внутри b, а потом уже внутри p

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

Соседний селектор +

Соседний селектор + позволяет выбрать элемент по его соседу сверху. К примеру, так: p + h2 - я выберу все h2, которые следуют непосредственно сразу за абзацем p (наличие обычного текста не влияет на соседство, а наличие тегов - влияет).

Давайте обратимся к тегу <i> (покрасим в красный цвет), который лежит непосредственно после тега <b>, не затронув остальные <i>:

b + i {
	color: red;
}
<p>
	<i>это i до b</i> текст
	<b>это b</b> текст
	<i>это i после b</i> текст
	<i>это i после i</i> текст
</p>

Так код будет выглядеть в браузере:

это i до b текст
это b текст
это i после b текст
это i после i текст

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

Родственный селектор ~

Родственный селектор ~ работает подобно соседнему селектору +, но выбирает не непосредственного соседа, а всех соседей снизу.

Давайте обратимся ко всем тегам <i> (покрасим в красный цвет), которые лежат после тега <b>, не затронув <i>, находящиеся перед тегом <b>:

b ~ i {
	color: red;
}
<p>
	<i>это i до b</i>
	<b>это b</b>
	<i>это i после b</i>
	<i>это i после b</i>
	<span>это span</span>
	<i>это i после b</i>
</p>
<i>это i вне абзаца</i>

Так код будет выглядеть в браузере:

это i до b
это b
это i после b
это i после b
это span
это i после b

это i вне абзаца

Обратите внимание на то, что наличие посторонних тегов (в нашем случае span) не влияет на выбор. Кроме того, обратите внимание на то, что выбор распространяется до конца родителя (в нашем случае абзаца). Теги <i>, находящиеся вне родителя захватываться не будут (только если перед ними нету своего <b>).

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

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

Универсальный селектор * позволяет обратиться ко всем элементам на странице. К примеру, таким образом мы покрасим все элементы страницы в красный цвет:

* {
	color: red;
}

Злоупотреблять этим селектором не рекомендуется, так как он замедляет работу браузера.

Можно использовать * не в чистом виде, а в комбинации с другими селекторами. К примеру, так мы выберем любые теги, лежащие непосредственно внутри абзацев:

p > * {
	color: red;
}

А так выберем все теги i, лежащие внутри любого тега, который в свою очередь лежит внутри абзаца:

p * i {
	color: red;
}

Селектор по id

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

Если мы дадим элементу, к примеру, id test (то есть сделаем следующий атрибут - id="test"), тогда в CSS мы сможем обратиться к нему таким образом: #test - то есть сначала пишется символ "решетка", а затем то имя, которое мы записали в атрибут id.

Селектор по id имеет приоритет по отношению с селекторам тегов и классам.

Давайте сейчас для всех абзацев зададим красный цвет, а для абзаца с id="test" - зеленый:

p {
	color: red;
}
#test {
	color: green;
}
<p id="test">
	Абзац с атрибутом id в значении "test".
</p>
<p>
	Обычный абзац с текстом.
</p>
<p>
	Обычный абзац с текстом.
</p>

Так код будет выглядеть в браузере:

Абзац с атрибутом id в значении "test".

Обычный абзац с текстом.

Обычный абзац с текстом.

А теперь атрибут id дадим конкретному диву <div> и покрасим содержимое этого дива в красный цвет, обратившись к нему по его id:

#test {
	color: red;
}
<div id="test">
	<h2>
		Заголовок h2 внутри #test.
	</h2>
	<h2>
		Заголовок h2 внутри #test.
	</h2>
	<h2>
		Заголовок h2 внутри #test.
	</h2>
	<p>
		Абзац внутри #test.
	</p>
	<p>
		Абзац внутри #test.
	</p>
	<p>
		Абзац внутри #test.
	</p>
</div>
<p>
	Абзац вне #test.
</p>

Так код будет выглядеть в браузере:

Заголовок h2 внутри #test.

Заголовок h2 внутри #test.

Заголовок h2 внутри #test.

Абзац внутри #test.

Абзац внутри #test.

Абзац внутри #test.

Абзац вне #test.

А теперь совместим контекстный селектор (который пробел, показывающий вложенность) и id и сделаем так, чтобы только абзацы (но не заголовки h2 в данном случае) из #test стали красного цвета:

#test p {
	color: red;
}
<div id="test">
	<h2>
		Заголовок h2 внутри #test.
	</h2>
	<h2>
		Заголовок h2 внутри #test.
	</h2>
	<h2>
		Заголовок h2 внутри #test.
	</h2>
	<p>
		Абзац внутри тега div.
	</p>
	<p>
		Абзац внутри тега div.
	</p>
	<p>
		Абзац внутри тега div.
	</p>
</div>
<p>
	Абзац вне тега div.
</p>

Так код будет выглядеть в браузере:

Заголовок h2 внутри #test.

Заголовок h2 внутри #test.

Заголовок h2 внутри #test.

Абзац внутри #test.

Абзац внутри #test.

Абзац внутри #test.

Абзац вне #test.

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

Классы элементам задаются с помощью атрибута class, в котором мы пишем имя класса. Их преимущество в том, что один и тот же класс может быть у многих элементов на странице, в отличие от id. То есть, если элементы должны вести себя одинаково - мы даем им один и тот же класс.

Как обратиться к элементам с определенным классом в CSS: пусть мы задали нужным нам элементам класс с именем test, тогда в CSS ко всем элементам с этим классом мы можем обратиться следующим образом - .test - вначале символ "точка" и потом имя класса из атрибута class.

В примере ниже и абзацы, и заголовки имеют один и тот же класс .test, который красит эти элементы в красный цвет:

.test {
	color: red;
}
<h2 class="test">
	Заголовок h2 с классом test.
</h2>
<h2 class="test">
	Заголовок h2 с классом test.
</h2>
<h2 class="test">
	Заголовок h2 с классом test.
</h2>
<p class="test">
	Абзац с классом test.
</p>
<p class="test">
	Абзац с классом test.
</p>
<p class="test">
	Абзац с классом test.
</p>
<p>
	Абзац без класса.
</p>

Так код будет выглядеть в браузере:

Заголовок h2 с классом test.

Заголовок h2 с классом test.

Заголовок h2 с классом test.

Абзац с классом test.

Абзац с классом test.

Абзац с классом test.

Абзац без класса.

Определенный тег с заданным классом

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

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

В следующем примере только абзацы с классом test станут красного цвета, а заголовки с таким же классом - не станут:

p.test {
	color: red;
}
<h2 class="test">
	Заголовок h2 с классом test.
</h2>
<h2 class="test">
	Заголовок h2 с классом test.
</h2>
<h2 class="test">
	Заголовок h2 с классом test.
</h2>
<p class="test">
	Абзац с классом test.
</p>
<p class="test">
	Абзац с классом test.
</p>
<p class="test">
	Абзац с классом test.
</p>
<p>
	Абзац без класса.
</p>

Так код будет выглядеть в браузере:

Заголовок h2 с классом test.

Заголовок h2 с классом test.

Заголовок h2 с классом test.

Абзац с классом test.

Абзац с классом test.

Абзац с классом test.

Абзац без класса.

Итак, еще раз: p.test - такой селектор выбирает абзацы с классом test. А вот если я сделаю так: p .test (поставлю пробел), то выберу все элементы с классом test, находящиеся внутри абзацев. Прочувствуйте эту разницу.

Давайте теперь выберем только h2 с классом test:

h2.test {
	color: red;
}
<h2 class="test">
	Заголовок h2 с классом test.
</h2>
<h2 class="test">
	Заголовок h2 с классом test.
</h2>
<h2 class="test">
	Заголовок h2 с классом test.
</h2>
<p class="test">
	Абзац с классом test.
</p>
<p class="test">
	Абзац с классом test.
</p>
<p class="test">
	Абзац с классом test.
</p>
<p>
	Абзац без класса.
</p>

Так код будет выглядеть в браузере:

Заголовок h2 с классом test.

Заголовок h2 с классом test.

Заголовок h2 с классом test.

Абзац с классом test.

Абзац с классом test.

Абзац с классом test.

Абзац без класса.

А сейчас сделаем так, чтобы класс test задавал курсив всем элементам, которым он дан, и чтобы при этом все заголовки h2 с классом test красились в красный цвет, а абзацы с этим классом - в зеленый:

.test {
	font-style: italic;
}
h2.test {
	color: red;
}
p.test {
	color: green;
}
<h2 class="test">
	Заголовок h2 с классом test.
</h2>
<h2 class="test">
	Заголовок h2 с классом test.
</h2>
<h2 class="test">
	Заголовок h2 с классом test.
</h2>
<p class="test">
	Абзац с классом test.
</p>
<p class="test">
	Абзац с классом test.
</p>
<p class="test">
	Абзац с классом test.
</p>
<p>
	Абзац без класса.
</p>

Так код будет выглядеть в браузере:

Заголовок h2 с классом test.

Заголовок h2 с классом test.

Заголовок h2 с классом test.

Абзац с классом test.

Абзац с классом test.

Абзац с классом test.

Абзац без класса.

Мультиклассы

Элементу можно задать не один класс, а сразу несколько через пробел.

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

<p class="www ggg">Абзац с двумя классами.</p>
.www {
	font-weight: bold;
}
.ggg {
	color: red;
}

Однако, мы можем выбрать также только те элементы, у которых есть одновременно и один класс, и второй, вот таким образом - .www.ggg - так как пробел отсутствует между селекторами классов, это обозначает одновременность, а не вложенность, как было бы вот так - .www .ggg (между классами стоит пробел).

В следующем примере те элементы, у которых есть одновременно и класс .www, и класс .ggg получают размер шрифта в 30px:

<p class="www ggg">Абзац с двумя классами.</p>
.www.ggg {
	font-size: 30px;
}

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

Давайте посмотрим на примерах.

Выберем только абзацы, у которых есть одновременно класс .www и класс .ggg:

p.www.ggg {
	
}

Выберем только заголовки h2, у которых есть одновременно класс .www и класс .ggg:

h2.www.ggg {
	
}

Выберем элемент с id="test" и классом .www :

#test.www {
	
}

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

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

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

Выбор по наличию атрибута

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

[атрибут] {
	
}

Давайте выберем все элементы, у которых есть атрибут type:

<input type="text">
[type] {
	
}

Давайте выберем все инпуты, у которых есть атрибут type:

<input type="text">
input[type] {
	
}

В данном примере мы писали селектор тега input слитно с селектором атрибута type. А слитность, как мы уже разбирали выше дает одновременность, то есть мы выбираем инпуты, у которых одновременно есть атрибут type.

Выбор по значению атрибута

Выбор по содержимому атрибута делается с помощью равно =:

[атрибут="значение"] {
	
}

Давайте выберем все инпуты, у которых атрибут type имеет значение text:

<input type="text">
input[type="text"] {
	
}

Выбор по начальному тексту атрибута

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

[атрибут^="значение"] {
	
}

Давайте выберем все ссылки, у которых атрибут href начинается с http://:

<a href="http://google.ru">ссылка</a>
a[href^="http://"] {
	
}

Выбор по конечному тексту атрибута

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

[атрибут$="значение"] {
	
}

Давайте выберем все ссылки, у которых атрибут href заканчивается на .html:

<a href="/folder/index.html">ссылка</a>
a[href$=".html"] {
	
}

Выбор по определенному тексту в атрибуте

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

[атрибут*="текст"] {
	
}

Давайте выберем все ссылки, у которых в атрибуте href есть текст /webroot/:

<a href="/folder/webroot/index.php">ссылка</a>
a[href*="/webroot/"] {
	
}

Выбор по одному из значений атрибута

Бывают атрибуты, в которых есть несколько значений через пробел (например, атрибут class). Можно выбрать элементы, у которых в атрибуте присутствует указанное значение:

[атрибут~="значение"] {
	
}

Давайте выберем все абзацы, у которых в атрибуте class есть слово test:

<p class="eee test www">абзац</p>
p[class~="test"] {
	
}

Выбор по дефису

Бывает такое, что в названии атрибута присутствует какая-то приставка, заканчивающаяся дефисом, к примеру, у элемента может быть класс menu-text. Здесь menu- это и есть такая приставка.

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

[атрибут|="значение"] {
	
}

Давайте выберем все абзацы, у которых в атрибуте class есть класс, который начинается с menu-:

<p class="eee menu-text www">абзац</p>
p[class|="menu"] {
	
}