Selettore ID

Fa parte della sezione Stilizzare con CSS del percorso HTML di Coddy. Lezione 13 di 76.

Il selettore ID viene utilizzato per selezionare un elemento HTML specifico in base al valore del suo attributo id. A differenza dei selettori di classe, che possono essere utilizzati per applicare stili a più elementi, i selettori ID sono univoci e possono essere applicati a un solo elemento della pagina. Questo li rende utili per applicare stili specifici a singoli elementi, che non dovrebbero essere applicati a nessun altro elemento.

Per selezionare un elemento con un ID specifico nel tuo CSS, usi il simbolo cancelletto (#) seguito dal valore dell'ID. Ecco la sintassi di base per usare un selettore ID:

#idname {
    property: value;
}

Per esempio:

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

In questo esempio, il selettore ID #intro seleziona l'elemento con ID "intro". Le dichiarazioni impostano il colore del testo su blu e la dimensione del carattere su 20 pixel per questo elemento.

Sfida

Facile

Ti viene fornito un documento HTML con vari elementi, tra cui un'intestazione (<h1>), un paragrafo (<p>) e una divisione (<div>). Il tuo compito è usare un selettore ID per applicare uno stile a un elemento divisione. Segui i passaggi riportati di seguito:

Aggiungi un attributo id con il valore "special" all'elemento <div>.
Scrivi una regola CSS usando un selettore ID che selezioni l'elemento con l'ID "special". Imposta il colore di sfondo di questo elemento su yellow e il colore del testo su red.

Provalo tu

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