Selektor identyfikatora

Część sekcji Stylizacja za pomocą CSS ścieżki HTML w Coddy. Lekcja 13 z 76.

Selektor ID służy do wskazywania konkretnego elementu HTML na podstawie wartości jego atrybutu id. W przeciwieństwie do selektorów klas, których można używać do stylizowania wielu elementów, selektory ID są unikalne i można je zastosować tylko do jednego elementu na stronie. Dzięki temu są przydatne do stylizowania pojedynczych elementów za pomocą określonych stylów, których nie należy stosować do żadnego innego elementu.

Aby wskazać element o określonym ID w CSS, użyj symbolu hash (#), a następnie wartości ID. Oto podstawowa składnia selektora ID:

#idname {
    property: value;
}

Na przykład:

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

W tym przykładzie selektor ID #intro wskazuje element o ID „intro”. Deklaracje ustawiają kolor tekstu tego elementu na niebieski, a rozmiar czcionki na 20 pikseli.

Wyzwanie

Łatwy

Otrzymujesz dokument HTML zawierający różne elementy, w tym nagłówek (<h1>), akapit (<p>) i element div (<div>). Twoim zadaniem jest użycie selektora ID do stylizacji elementu div. Wykonaj poniższe kroki:

Dodaj atrybut id o wartości "special" do elementu <div>.
Napisz regułę CSS, używającą selektora ID, która wybiera element o identyfikatorze "special". Ustaw kolor tła tego elementu na yellow, a kolor tekstu na red.

Spróbuj swoich sił

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