Come scegliere come target una parte di una pagina Web utilizzando i selettori CSS
I fogli di stile CSS (Cascading Style Sheets) ti consentono di trasformare l'aspetto delle tue pagine web. Dai caratteri e colori alla spaziatura e al layout generale, tutti i tipi di strumenti di progettazione sono a portata di mano. Sebbene CSS sia un linguaggio complicato nella sua interezza, ci sono solo due concetti di base che devi capire per iniziare.
Tutto inizia con l'identificazione esattamente della parte di una pagina a cui desideri applicare uno stile.
CSS = Selettori + Dichiarazioni
Un file CSS contiene una serie di regole che descrivono come deve essere formattato un file HTML. Ogni regola è composta da due parti: cosa modellare e come modellarlo. La prima parte è controllata utilizzando una serie di termini noti come "selettori".
Gli esempi in questo articolo includono dichiarazioni di stile, ma non sono il fulcro: i selettori stessi lo sono.
Storicamente, c'erano tre livelli di selettore CSS (o versioni) con diversi gradi di supporto del browser. Nel 2020, secondo Can I Use , questi sono tutti disponibili per oltre il 99% degli utenti in tutto il mondo.
Selettori di livello 1
Il livello 1 ha introdotto i quattro tipi fondamentali di selettori che coprono un numero enorme di casi, anche oggi.
| Modello | Partite |
|---|---|
E | tutti gli elementi E. |
.c | tutti gli elementi con class = "c" |
#myid | l'elemento con id = "myid" |
EF | un elemento F all'interno di un elemento E. |
| Pseudo-classi | |
E:link | un collegamento ipertestuale a una pagina che non è stata precedentemente visitata |
E:visited | un collegamento ipertestuale a una pagina che è già stata visitata |
E:active | un collegamento ipertestuale attualmente selezionato |
| Pseudo-elementi | |
E::first-line | la prima riga formattata di un elemento E. |
E::first-letter | la prima lettera formattata di un elemento E. |
Selettore di tipo
Il selettore più semplice è il "selettore di tipo". Ha come target tutte le istanze di un elemento, come un paragrafo o un testo in grassetto:
p { margin-bottom: 0; }
b { font-family: sans-serif; }Selettore di classe
L'attributo class consente di aggiungere ulteriore semantica a un elemento HTML, come un tipo specifico di paragrafo. Tali elementi possono essere selezionati in CSS come segue:
.intro { font-weight: bold; }Questo selettore corrisponderebbe a:
<p class="intro">…</p>Ma nota che corrisponderebbe anche:
<ul class="intro">…</ul>Se vuoi che si applichi solo ai paragrafi introduttivi, puoi combinare il selettore di tipo e il selettore di classe:
p.intro { font-weight: bold; }Selettore ID
L'attributo HTML id dovrebbe essere univoco all'interno di un documento, ad esempio se hai:
<div id="contents">…</div>Dovrebbe essere l'unico elemento con un id "contenuto". Un selettore di ID ti consente di scegliere come target quell'elemento specifico in un documento:
#contents { color: #333; }Selettore discendente
Rigorosamente, un "combinatore", perché questo selettore riguarda lo spazio tra gli altri due. L'HTML è gerarchico, come spiegato nella nostra panoramica del DOM . Un selettore discendente consente di identificare un elemento dal suo contesto all'interno di un altro elemento:
table b { font-weight: normal; }Pseudo classi ed elementi
Gli pseudo selettori mirano a classi o elementi che non esistono esplicitamente ma sono comunque resi disponibili. Considerali come bonus per contenuti speciali:
p::first-line { text-transform: uppercase; }Elenchi di selettori
una virgola per combinare i selettori in un elenco se si desidera applicare lo stesso insieme di regole a ciascuno. Invece di:
th { padding: 1em; }
td { padding: 1em; }Tu puoi scrivere:
th, td { padding: 1em; }Specificità
Un foglio di stile è una serie di regole che utilizzano un selettore per abbinare un elemento, ma cosa succede quando più di una regola corrisponde a un dato elemento? Il comportamento risultante è governato dalla "specificità" che definisce quale regola viene utilizzata in un caso come:
p.intro { color: black; }
p { color: gray; }In questi casi, la regola prioritaria è definita dalla sua specificità, come segue:
- I selettori ID ("# contenuto") sono i più specifici.
- I selettori di classe (`.author`) sono meno specifici.
- I selettori di tipo ("p") sono i meno specifici.
Quando si calcola la specificità, ogni livello viene considerato solo se due selettori hanno lo stesso punteggio al livello più alto, quindi "#contents" è più specifico di "article.news p.author.special" perché il primo "vince" sui selettori ID.
Selettori di livello 2
La prossima revisione dei selettori CSS ha introdotto selettori di attributi, espanso su pseudo-classi e pseudo-elementi e ha aggiunto due nuovi combinatori.
| Modello | Partite |
|---|---|
* | qualsiasi elemento |
E > F | un elemento F figlio di un elemento E. |
E + F | un elemento F immediatamente preceduto da un elemento E. |
| Selettori di attributi | |
E[foo] | un elemento E con un attributo "foo" |
E[foo="bar"] | un elemento E il cui attributo "foo" è esattamente "bar" |
E[foo~="bar"] | un elemento E il cui attributo "foo" è un elenco di valori separati da spazi, uno dei quali è "bar" |
E[foo|="en"] | un elemento E il cui attributo "foo" ha un elenco di valori separati da trattini che iniziano con "en" |
| Pseudo-classi | |
E:first-child | un elemento E, primo figlio del suo genitore |
E:lang(fr) | un elemento di tipo E nella lingua "fr" |
| Pseudo-elementi | |
E::before | contenuto generato prima del contenuto di un elemento E. |
E::after | contenuto generato dopo il contenuto di un elemento E. |
Selettore universale
L '"*" corrisponde a qualsiasi elemento. Non è spesso così utile, ma se vuoi ripristinare i margini predefiniti, ad esempio, puoi farlo:
* { margin: 0; }Selettori di attributi
I selettori di attributi consentono agli stili di essere mirati in modo molto specifico, filtrati dall'attributo di un elemento:
a[title] { text-decoration: underline dotted; }Combinatore figlio: un elemento immediatamente dentro un altro
Simile al combinatore discendente, ma questo corrisponde solo ai figli immediati, non ai discendenti più in basso dell'albero. Ad esempio, "ul> li" corrisponderà solo al testo "Sezione 1" qui, e non "Sezione 1.1":
<ul>
<li>
Section 1
<ul>
<li>Section 1.1</li>
<li>Section 1.2</li>
</ul>
<li>
</ul>
Combinatore di fratelli adiacenti: The Next Sibling
h1 + p { font-weight: bold; }Spesso utile per controllare i margini, o un paragrafo introduttivo senza una classe specifica, questo selettore trova un elemento solo se ne segue immediatamente un altro. Nell'esempio, verrà trovato solo il primo paragrafo qui, non il secondo:
<h1>Contents</h1>
some extra text
<p>Introductory paragraph</p>
<p>Following paragraph</p>
Nota che questo selettore considera solo gli elementi, non il testo, quando decide quale sarà il prossimo fratello.
Eredità
Alcune proprietà CSS ereditano il loro valore da un elemento antenato. In pratica, questo significa, ad esempio, che impostare il tipo di carattere dell'elemento "body" significa che ogni paragrafo, tabella, ecc. Utilizza anche lo stesso tipo di carattere.
Naturalmente, questo è esattamente quello che ti aspetteresti, ma considera una proprietà che non eredita: "margine", per esempio. Non vorresti che ogni singolo paragrafo o frammento di testo in grassetto avesse lo stesso margine dell'intero documento.
Una buona regola pratica è quella di scegliere come target gli elementi in generale come ha senso: non scegliere come target ogni singolo elemento quando andrà bene un semplice selettore di "corpo".
Selettori di livello 3
Molte altre pseudo-classi sono state aggiunte in questo livello, insieme ad alcuni selettori di attributi e un nuovo combinatore.
| Modello | Partite |
|---|---|
E ~ F | un elemento F preceduto da un elemento E. |
| Selettori di attributi | |
E[foo^="bar"] | un elemento E il cui attributo "foo" inizia con la stringa "bar" |
E[foo$="bar"] | un elemento E il cui attributo "foo" termina con la stringa "bar" |
E[foo*="bar"] | un elemento E il cui attributo "foo" contiene la sottostringa "bar" |
| Pseudo-classi | |
E:root | un elemento E, radice del documento |
E:nth-child(n) | un elemento E, l'ennesimo figlio del suo genitore |
E:nth-last-child(n) | un elemento E, l'n-esimo figlio del suo genitore, contando dall'ultimo |
E:nth-of-type(n) | un elemento E, il fratello n-esimo del suo tipo |
E:nth-last-of-type(n) | un elemento E, il fratello n-esimo del suo tipo, contando dall'ultimo |
E:last-child | un elemento E, ultimo figlio del suo genitore |
E:first-of-type | un elemento E, primo fratello del suo tipo |
E:last-of-type | un elemento E, ultimo fratello del suo tipo |
E:only-child | un elemento E, unico figlio del suo genitore |
E:only-of-type | un elemento E, unico fratello del suo tipo |
E:empty | un elemento E che non ha figli (inclusi i nodi di testo) |
E:target | un elemento E che è l'obiettivo dell'URI di riferimento |
E:enabled | un elemento E dell'interfaccia utente abilitato |
E:disabled | un elemento dell'interfaccia utente E che è disabilitato |
E:checked | un elemento dell'interfaccia utente E che è selezionato |
E:not(s) | un elemento E che non corrisponde a semplici selettori |
Selettori di attributi
Puoi selezionare elementi con un attributo che inizia con un dato valore: a[href^="https:"] , finisce con un dato valore: img[src$=".gif"] o contiene un valore: a[*="value"] .
Pseudo classi
Altre pseudo-classi includono ": last-child", ": empty" (per trovare una corrispondenza con un elemento senza contenuto) e ": checks" che corrisponde a un elemento come un input di una casella di controllo, ma solo quando è selezionato.
General Sibling Combinator: A Following Sibling
Simile all'Adjacent Sibling Combinator dal Livello 2, questo corrisponde a qualsiasi fratello che viene dopo l'altro, non solo a quello successivo:
h1 ~ p { font-size: 110%; }Selettori CSS e come usarli
Ora sai praticamente tutto quello che c'è da sapere su come selezionare una parte di una pagina web usando i CSS. Ora sei pronto per modellare le tue pagine con la grande varietà di proprietà CSS che coprono tutto, dai colori al layout.
Credito immagine: Pankaj Patel / Unsplash
