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:

  1. I selettori ID ("# contenuto") sono i più specifici.
  2. I selettori di classe (`.author`) sono meno specifici.
  3. 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.

Correlati: semplici esempi di codice CSS che puoi imparare in 10 minuti

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