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

Часть раздела 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>. Объявления устанавливают цвет текста синим и размер шрифта 16 пикселей для всех этих элементов.

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

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

Задание

Легко

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

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

Шпаргалка

Групповой селектор позволяет применять одни и те же стили к нескольким HTML-элементам, разделяя селекторы запятыми (,):

selector1, selector2, selector3 {
    property: value;
}

Пример группировки селекторов элементов:

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

Вы можете группировать любые типы селекторов (типа, класса, идентификатора):

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

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

<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>