CSS групповые селекторы

CSS селекторы

Значение и применение

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

Поддержка браузерами

СелекторChrome
Chrome
Firefox
Firefox
Opera
Opera
Safari
Safari
Internet Explorer
IExplorer
Microsoft Edge
Edge
element, elementДаДаДаДаДаДа

CSS синтаксис:

element, element {
блок объявлений;
}

Версия CSS

CSS1

Пример использования

<style>
h1, h2,.test,#test { /* выбираем заголовки первого и второго уровня, элементы с классом test и элемент с идентификатором test */
background-color: green;  /* задаем цвет заднего фона */ 
}
.test, #test { /* выбираем элементы с классом test и элемент с идентификатором test */
color: blue; /* задаем цвет текста */ 
}
</style> 

Первым групповым селектором мы указываем, что заголовки <h1> и <h2>, элементы с классом test и элемент с идентификатором test получат цвет заднего фона зеленый.

Вторым групповым селектором мы указываем, что кроме заднего фона элементы с классами test и элемент с идентификатором test получат синий цвет текста.

Рассмотрим следующий пример:

<!DOCTYPE html>
<html>
<head>
	<meta charset = "UTF-8">
	<title>Групповые селекторы</title>
<style>
h1, h2,.test,#test { /* выбираем заголовки первого и второго уровня, элементы с классом test и элемент с идентификатором test */
color: red;  /* задаем цвет текста */ 
}
h3,h4 { /* выбираем заголовки третьего и четвертого уровня */
color: blue; /* задаем цвет текста */ 
}
h1,h2,h3,h4 { /* выбираем заголовки от первого до четвертого уровня */
font-style: italic;  /* задаем стиль шрифта - курсивное начертание */ 
}
</style>
</head>
<body>
	<h1>Заголовок первого уровня</h1>
	<h2>Заголовок второго уровня</h2>
	<p class = "test">Абзац с классом test</p>
	<h3>Заголовок третьего уровня</h3>
	<p id = "test">Абзац с идентификатором test</p>
	<h4>Заголовок четвертого уровня</h4>
	</body>
</html> 

В этом примере мы использовали три групповых селектора:

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

Пример использования групповых селекторов.
Пример использования групповых селекторов.
CSS селекторы