Групповые селекторы

Часть раздела Styling with CSS путешествия по HTML на Coddy — урок 14 из 76.

Групповой селектор используется для выбора нескольких HTML-элементов и применения к ним всем одинаковых стилей. Это особенно полезно, когда вы хотите применить общий набор стилей к разным элементам без необходимости писать отдельные правила для каждого из них. Группируя селекторы, вы можете писать более лаконичный и эффективный CSS-код.

Чтобы использовать групповой селектор, перечислите селекторы, которые вы хотите сгруппировать, через запятую (,). Вот базовый синтаксис:

selector1, selector2, selector3 {
    property: value;
}

Например, допустим, вы хотите применить одинаковый цвет текста и размер шрифта ко всем элементам <h1>, <h2> и <p>. Вы можете использовать селектор группы следующим образом:

h1, h2, p {
    color: blue;
    font-size: 16px;
}

В этом примере селектор группировки выбирает все элементы <h1>, <h2> и <p>. Объявления устанавливают цвет текста синим (blue), а размер шрифта — 16 пикселей для всех этих элементов.

Вы можете группировать любые типы селекторов, включая селекторы типов, селекторы классов и селекторы ID:

h1, .highlight, #intro {
    background-color: yellow;
}

Задание

Легко

Вам дан HTML-документ с различными элементами, включая заголовки (<h1>, <h2>), абзацы (<p>) и блок (<div>). Ваша задача — использовать групповой селектор для стилизации этих элементов. Выполните следующие шаги:

Напишите правило CSS, используя групповой селектор, который выбирает все элементы <h1> и <h2>. Установите цвет текста для этих элементов на "red".
Напишите правило CSS, используя групповой селектор, который выбирает все элементы <p> и элемент <div>. Установите цвет фона для этих элементов на "lightgray", а размер шрифта — 18 пикселей.

Попробуйте сами

<html>
<head>
    <title>Group Selectors</title>
    <style>
        /* Write CSS rules here */
    </style>
</head>
<body>
    <h1>This is a main heading</h1>
    <h2>This is a subheading</h2>
    <p>This is a paragraph.</p>
    <div>This is a division.</div>
</body>
</html>