В прошлом уроке были рассмотрены три вида селекторов, селектор тега, селектор класса и селектор идентификатора. В этом уроке мы рассмотрим еще один вид селектора - это групповые селекторы.
Чтобы было более понятно, представим такую ситуацию: на станице html имеется множество элементов, для некоторых из них (абзаца с классом paragraph, заголовок первого уровня, всего списка <ul> </ul> и идентификатора header) нужно задать один и тот же стиль, например желтый цвет.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Первая HTML страница</title>
<link href="css/fonts.css" type="text/css" rel="stylesheet">
</head>
<body>
Заголовок H1
Заголовок H2
- Первый элемент списка
- Второй элемент списка
- Третий элемент списка
Заголовок H2
Абзац без класса
Абзац с применением класса </body> </html>
Первое, что мы бы могли, из того что знаем, - это для каждого выше перечисленного элемента в html странице задать один и тот же класс и ему уже прописать желтый цвет. В целом это правильно, но не совсем продуктивно, так как становится больше кода (увеличивается его размер), что, со временем, будет его усложнять. Второй вариант - это в таблице стилей CSS для каждого элемента в отдельности задать желтый цвет. Это так же будет работать, но ситуация остается та же - не рационально. Когда пять элементов это еще терпимо мы пропишем, а когда больше то вы только одно правило для выбранных элементов будете писать пол дня.
Для таких случаев и существуют групповые селекторы, когда нужно задать одинаковое правило для разнотипных элементов на странице. Групповой селектор создается очень просто, перечисляя нужные элементы через запятую. Таким образом, получается вот такая структура записи.
h1,#header,ul,.paragraph {
color:#FFDD00;
}
Такая структура кода скажет браузеру, что для всех элементов перечисленных через запятую (Заголовок h1, идентификатора #header, списка ul и класса .paragraph) нужно использовать заданное правило (задать желтый цвет).
Как Вы уже заметили, такая структура записи гораздо удобней, чем писать одно и то же по нескольку раз. Так же преимущество данной записи в том, что если у вас появится новый элемент, которому нужно применить такое же правило Вам не нужно для него отдельно задавать условие, а нужно только добавить его к ранее указанным селекторам.
Групповые селекторы достаточно важный вид и он используется очень часто, поэтому уделите ему больше внимания и попрактикуйтесь, задавая, для различных элементов одинаковые условия (правила).
Ну, а на этом с групповыми селекторами пока все. В Демо можно просмотреть, что должно было в итоге получится, а мы идем дальше изучая остальные виды селекторов.
CSS