HTML-верстка: инструменты и приемы профессиональной front-end разработки

Группировка и вложенность селекторов CSS


назад вперед

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

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

h1
{
color:green;
}
h2
{
color:green;
}
p
{
color:green;
}

Для оптимизации кода и уменьшения его размера вы можете группировать селекторы.

Отделяйте селекторы друг от друга запятыми.

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

Пример

h1,h2,p
{
color:green;
}

Посмотреть


Вложенные селекторы

В CSS есть приемы, позволяющие применять стиль к селектору, не применяя селектор.

В следующем примере для всех параграфов мы задаем один стиль, а для параграфов с классом "marked" мы задаем другой стиль:

Пример

p
{
color:blue;
text-align:center;
}
.marked
{
background-color:blue;
}
.marked p
{
color:white;
}

Посмотреть



Понравилась запись? Сказать "Спасибо" очень просто, поделитесь записью в социальных сетях!


назад вперед

СТАТИСТИКА



ССЫЛКИ


Подпишись на новости сайта