Corso di CSS / Selettori CSS di base: tipo, classe, ID e attributi

I selettori CSS identificano gli elementi HTML ai quali si applica una regola. I selettori di tipo corrispondono ai nomi dei tag, i selettori di classe corrispondono a etichette riutilizzabili, i selettori ID corrispondono a un identificatore e i selettori di attributo corrispondono agli attributi o ai loro valori.

Confronta i selettori sullo stesso HTML

Leggiamo il selettore basandoci sui seguenti quattro elementi: A e B sono p e hanno una classe notice, e B ha anche una classe urgent. C è un p senza classi, D è un div con una classe notice. Le lettere inglesi da A a D sono solo segni per distinguere gli oggetti nella descrizione e non sono sintassi CSS.

<p id="opening" class="notice" data-tags="garden visit">A: Operating hours</p>
<p class="notice urgent">B: Rainy weather notice</p>
<p>C: What you need</p>
<div class="notice">D: Information box</div>

Quando si legge un selettore, assicurati che la condizione sia sull'elemento stesso a cui verrà applicato il CSS. Le due condizioni in p.notice si riferiscono allo stesso elemento. D'altra parte, lo spazio in p .notice significa cercare un altro elemento in p. Le regole che cambiano il target a seconda dello spazio possono essere trovate insieme alla struttura in Combinatori e pseudo-classi CSS.

Usa selettori di tipo e universali

p { color: #333; }
* { box-sizing: border-box; }

p seleziona tutti gli elementi p. È semplice decorare lo stesso tag in comune, ma per decorare separatamente i paragrafi di avviso e del corpo, sono necessarie condizioni aggiuntive come la classe. Il selettore universale * è una notazione che seleziona tutti gli elementi. Non include automaticamente i pseudo-elementi.

Qui, box-sizing: border-box è un'impostazione ausiliaria che calcola includendo il padding e il bordo quando si specificano larghezza e altezza. Puoi fare questo esercizio anche se non hai ancora imparato tutti i dettagli dei calcoli delle dimensioni. Usare un selettore universale non significa che devi cambiare tutti i colori del testo e gli sfondi contemporaneamente. Pensa al design delle impostazioni comuni e degli elementi specifici.

Seleziona classi e ID

.notice { background-color: #e9f7ef; }
p.notice { border-left: 4px solid #087f5b; }
.notice.urgent { font-weight: bold; }
#opening { color: #087f5b; }

Una classe può essere riutilizzata per più elementi. class="notice urgent" in HTML è un elenco di due nomi di classe separati da spazi, non un solo nome notice urgent. In CSS, aggiungi un punto davanti per selezionare .notice o .urgent. .notice.urgent si applica solo agli elementi che hanno entrambi i nomi.

Un ID deve essere unico all'interno di un documento HTML. Non assegnare a dieci avvisi lo stesso id="opening". Usa le classi per stili riutilizzabili e gli ID per identificazioni uniche o destinazioni di frammenti. I selettori ID hanno una specificità maggiore rispetto ai selettori di classe, ma la specificità viene confrontata all'interno delle condizioni di origine, importanza e livello applicabili; aggiungere ID indiscriminatamente rende più difficile gestire i conflitti futuri. Per ulteriori dettagli, vedi Ereditarietà, specificità e cascata CSS.

Nell'esempio, coloriamo per ID per mostrare le differenze tra i soggetti. Se hai effettivamente bisogno dello stesso colore verde per più avvisi, puoi semplificarlo aggiungendo il colore alla regola .notice. Non è necessario usare tutti i tipi di selettore: scegli quelli che identificano soltanto gli elementi necessari.

Seleziona in base agli attributi e ai loro valori

input[required] { border: 2px solid #087f5b; }
input[type="email"] { background-color: #fff4cc; }
[data-tags~="visit"] { outline: 1px dashed #777; }
a[href^="https://"] { color: #1d4ed8; }

Un indirizzo https:// può puntare allo stesso sito, quindi quel prefisso non identifica da solo i link esterni. Allo stesso modo, [data-tags="visit"] corrisponde all'intero valore dell'attributo e non corrisponde a garden visit. Usa l'operatore di confronto appropriato per la condizione desiderata. Vedi MDN: Selettori di attributi.

Esegui l'esempio completo del selettore

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Small Garden</title>
  <style>
* { box-sizing: border-box; }
    body { margin: 24px; font-family: sans-serif; line-height: 1.7; }
    p { color: #333; }
    .notice { background-color: #e9f7ef; padding: 12px; }
    p.notice { border-left: 4px solid #087f5b; }
    .notice.urgent { font-weight: bold; }
    #opening { color: #087f5b; }
    [data-tags~="visit"] { outline: 1px dashed #777; }
    a[href^="https://"] { color: #1d4ed8; }
    input[required] { border: 2px solid #087f5b; }
    input[type="email"] { background-color: #fff4cc; }
  </style>
</head>
<body>
<h1>Small Garden</h1>
  <p id="opening" class="notice" data-tags="garden visit">A: We open at 9am every day.</p>
  <p class="notice urgent">B: In case of rain, the outdoor program will be canceled.</p>
  <p>C: Bring a water bottle and comfortable shoes.</p>
  <div class="notice">D: This is an information box.</div>
  <p><a href="https://example.com/">E: External guidance link</a></p>
  <form>
    <label for="email">Email (required)</label>
    <input id="email" type="email" name="email" required>
    <button type="submit">Request information</button>
  </form>
</body>
</html>

Se salvi e apri con index.html, A·B·D avrà uno sfondo chiaro e un padding di 12px, e solo A·B corrispondente a p.notice avrà un bordo a sinistra. B ha entrambe le classi e appare in grassetto. Il testo di A è verde grazie al selettore #opening, e viene creato anche un contorno tratteggiato a causa della parola visit nel valore di data-tags. C rimane un paragrafo normale.

Il bordo del campo di input email diventa spesso sotto la condizione richiesta, e lo sfondo diventa giallo sotto la condizione di tipo. La funzione reale di convalida dell'input per required è gestita dall'attributo HTML, e il CSS cambia solo l'aspetto della casella di input. L'indirizzo del collegamento esterno nell'esempio è solo a scopo illustrativo. Si prega di non utilizzare questo come collegamento guida al servizio effettivo. Il modo per selezionare l'esistenza di un attributo è diverso dal modo per selezionare il risultato della verifica. Stati dei moduli CSS: focus, validazione, disabled e readonly confronta insieme i selettori per lo stato required ed error.

Cambia le condizioni e prevedi il risultato

1. Prova a cambiare p.notice in .notice per ampliare l'obiettivo del bordo sinistro. Il risultato previsto è che il bordo che originariamente esisteva solo in A·B appaia anche in D. Dopo la conferma, torna al selettore originale.
2. Cambia la classe di B in class="urgent". B è ancora p, ma perde la classe notice, quindi lo sfondo della guida, il bordo sinistro e il testo in grassetto per .notice.urgent scompaiono. I selettori complessi non corrispondono solo a causa della sola classe urgent.
3. Cambia il valore data-tags di A in garden revisit. Poiché visit non compare più come parola separata, il contorno tratteggiato dovrebbe scomparire. Assicurati di non confondere visit e revisit come sottostringhe.

Per ogni esercizio, salva il file e poi aggiorna per controllare e tornare ai valori originali. Se solo l'oggetto previsto non cambia, confronta prima il nome della classe·id·proprietà effettiva. Puoi distinguere tra errori di selezione e conflitti di priorità guardando negli strumenti per sviluppatori per vedere se le regole corrispondono agli elementi selezionati.