Controllare i selettori

Completato

I selettori CSS vengono usati per selezionare gli elementi da applicare allo stile. I selettori offrono una grande flessibilità e potenza. I selettori consentono di applicare uno stile a tutti gli elementi o a un elemento specifico e anche a una lettera specifica.

Esistono tre tipi di core di selettori:

• Elementi
• Classi
• ID

Usando questi selettori, è possibile applicare stili a molti elementi o a pochi elementi.

Selettori di elementi

Un selettore di elementi si applica a tutti gli elementi con tale tag. Qualsiasi elemento HTML può essere usato come selettore di elementi. L'uso di h1 consente di modificare tutti gli elementi h1 nella pagina.

h1 {
    /* style */
}

Selettori di classe

Tutti gli elementi HTML consentono di aggiungere un attributo class. class viene usato per raggruppare gli elementi e consentire di contrassegnarli per l'applicazione delle impostazioni CSS.

Quando crei un curriculum, hai sezioni per la tua istruzione e la tua storia lavorativa. L'uso di una classe consente di formattare gli elementi con lo stesso stile.

<div class="history">
    <h2>Employer name</h2>
    <h3>Job title</h3>
    <h3>3 Jun 19 - 8 Jun 21</h3>
</div>

<div class="history">
    <h2>School name</h2>
    <h3>Major</h3>
    <h3>Sep 2014 - May 2018</h3>
</div>

Nell'esempio precedente, è probabile che la formattazione per ogni div sia uguale a quella in cui vengono visualizzati tipi di informazioni simili. Contrassegnando i due elementi div con la stessa classe, è possibile applicare lo stesso stile CSS a ognuno.

Per identificare una classe in CSS, anteporre un . al nome. Nell'esempio si userà .history.

.history {
    /* your styles */
}

Se si usa un file CSS, si scriverà la definizione di stile della classe nel file CSS. L'attributo di classe in HTML fa riferimento alla definizione dal file CSS.

Pseudoclassi

Le pseudoclassi consentono di identificare gli elementi in base alla posizione in una pagina o al modo in cui l'utente interagisce con loro.

Quando un utente interagisce con una pagina web, lo stato dei vari elementi cambia. Un utente potrebbe posizionare il cursore del mouse su un elemento e si desidera che il colore cambi quando passa il mouse. O se l'utente ha selezionato un collegamento. Dopo che hanno visitato quel link, potresti voler farglielo sapere cambiando lo stile. CSS supporta molte pseudoclassi, che vengono applicate in modo dinamico in base alle operazioni eseguite dall'utente o che l'utente ha già effettuato. Le pseudoclassi sono precedute da un : e vengono posizionate dopo un altro selettore.

Ad esempio, per impostare il colore di sfondo di un collegamento su giallo quando un utente passa il cursore su di esso, è possibile usare il css seguente:

a:hover {
    background-color: yellow;
}

Alcune delle pseudoclassi più comuni sono elencate nella tabella seguente:

Pseudoclasse	Descrizione
hover	L'utente passa il cursore del mouse su un elemento
visited	Un link su cui si è fatto clic in precedenza
link	Un collegamento non visualizzato
first-child	Primo elemento figlio corrispondente al selettore in una gerarchia
last-child	Ultimo elemento figlio corrispondente al selettore in una gerarchia

Importante

Usando pseudoelementi e CSS, è possibile rimuovere la sottolineatura dai collegamenti ipertestuali. Come regola generale, è consigliabile lasciare la sottolineatura a scopo di accessibilità. Il testo sottolineato consente a un utente di identificare rapidamente i collegamenti in una pagina.

Selettori ID

Analogamente alle classi, un ID consente di applicare uno stile a un elemento. Tuttavia, mentre una classe può essere applicata a più elementi, un ID deve essere univoco e fare riferimento a un solo elemento.

In un curriculum potrebbe essere disponibile una sezione per i social media, ad esempio X, GitHub o il blog. Se si desidera uno stile personalizzato per tale sezione, è possibile impostare un ID:

<div id="social-media">
    <!-- list of links -->
</div>

Gli ID sono preceduti da un # in CSS:

#social-media {
    /* style */
}

Nota

La convenzione di denominazione standard per classi e ID consiste nell'usare "skewer-casing". Ogni parola è minuscola e separata con un -. Il nome skewer-case deriva dal modo in cui le parole appaiono come se fossero su uno spiedo (skewer in inglese).