Селектор ID

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

Селектор ID используется для выбора конкретного HTML-элемента на основе значения его атрибута id. В отличие от селекторов классов, которые могут использоваться для стилизации нескольких элементов, селекторы ID уникальны и могут быть применены только к одному элементу на странице. Это делает их полезными для стилизации отдельных элементов со специфическими стилями, которые не должны применяться к каким-либо другим элементам.

Чтобы выбрать элемент с определенным ID в вашем CSS, вы используете символ решетки (#), за которым следует значение ID. Вот базовый синтаксис использования селектора ID:

#idname {
    property: value;
}

Например:

#intro {
    color: blue;
    font-size: 20px;
}

В этом примере селектор ID #intro выбирает элемент с ID "intro". Объявления устанавливают цвет текста синим, а размер шрифта — 20 пикселей для этого элемента.

Задание

Легко

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

Добавьте атрибут id со значением "special" к элементу <div>.
Напишите CSS-правило, используя селектор по ID, которое выбирает элемент с ID "special". Установите цвет фона этого элемента на yellow, а цвет текста — на red.

Шпаргалка

Селектор по ID выбирает конкретный HTML-элемент, используя его атрибут id. Селекторы по ID уникальны и могут быть применены только к одному элементу на странице.

Используйте символ решетки (#), за которым следует значение ID:

#idname {
    property: value;
}

Пример:

#intro {
    color: blue;
    font-size: 20px;
}

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

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