CSS: Selettori Universali e Pseudoclassi

Scritto da ambrix on 01/05/2019. Postato in Corsi Programmazione, NotInHome, Web Design Nessun Commento

Lezione 06 In questa lezione di CSS, affronteremo gli argomenti Selettori Universali e Pseudoclassi.

È sempre dietro l’angolo l’esigenza di dover selezionare una o più parti di un documento. Potremmo pensare di attribuire a tutti gli elementi in gioco, una specifica regola. Prima di parlare di Pseudoclassi CSS, introduciamo i selettori universali, che servono a selezionare tutti gli elementi di un documento. Il selettore universale si esprime con il carattere jolly (*).

<!DOCTYPE html>
<html>
<style>
* {
 border: 1px solid black;
 box-sizing: border-box;
}

*.box{ background: lightgrey; }
</style>
<body>
  <div class="box">
  <p><span></span></p>
  <ul>
   <li><span></span></li>
   <li><span></span></li>
  </ul>
  </div>
</body>
</html>

Stiamo selezionando tutte le classi .box, alle quali si sta attribuendo un bordo nero solid di 1px.

Il selettore universale è il seleziona-tutto che ben conosciamo. In effetti, ogni volta che selezioniamo tutti gli elementi di una pagina, stiamo implicitamente includendo il simbolo *. Il selettore universale, ad esempio, è un ottimo modo per modificare il valore di un elemento che si ripete più volte in una pagina Web.

Separando più selettori con uno spazio, possiamo dare lo stile che volgiamo a due o più tag. Nell’esempio che segue assegnamo un determinato stile ai tag  e . Possiamo affermare che è discendente di .

<!doctype html>
<html>
<style>
  p span {
 font-weight: bold;
    }
</style>
 <head>
 </head>
 <body>
  <div class="box"></div>
  <p><span>I'm in</span></p>
  <ul>
   <li><span>I'm not</span></li>
   <li><span>I'm not</span></li>
  </ul>
 </body>
</html>

I’m in

I’m not
I’m not

In questo modo, selezioniamo e modelliamo ogni elemento  all’interno di un elemento .

Vediamo ora come il cosìddetto child selector interessa tutti gli elementi che sono “figli” dell’elemento “padre”.

<!doctype html>
<html>
 <head>
 <style>
 	div > p {
 font-weight: bold;
}
 </style>
 </head>
 <body>
  <div>
   <p>I'm in</p>
  </div>
  <div>
   <ul>
    <li><p>I'm not</p></li>
   </ul>
  </div>
 </body>
</html>

I’m in

I’m not

Usando il simbolo > (maggiore), selezioniamo ogni elemento  che non è solo un discendente ma è anche figlio immediato dell’elemento <div>.

Dopo i Selettori Universali, le Pseudoclassi CSS

Le pseudo-classi sono keywords che aggiungiamo ai selettori per modellare uno stato speciale di un elemento. Proviamo a considerare il seguente codice.

<!doctype html>
<html>
<head>
<style>
  a {
 background: black;
 color: white;
}
a:hover
 {
 background: white;
 color: black;
}
</style>
 </head>
 <body>
  <a href="https://www.ambrix.net">Segui il link ... </a>
 </body>
</html>

Segui il link … !

Con la pseudo-classe :active , possiamo stilizzare gli elementi su cui si clicca. Un’altra pseudo-classe molto usata è :hover , con cui si stabilisce un effetto quando si porta il mouse sull’elemento in questione.

Potrebbe risultare utile applicare uno stile ad un determinato elemento, ad esempio alla prima lettera di un testo. In tal direzione ci vengono in aiuto gli pseudo-elementi .

<!doctype html>
<html>
 <head>
<style>
 .fl::first-letter {
 font-size: 1.5em;
 background-color: red;
 color: white;
 }
</style>
</head>
 <body>
  <p>La prima lettera del paragrafo viene stilizzata ... </p>
 </body>
</html>

La prima lettera del paragrafo viene stilizzata …

Applicando ::first-letter al tag  otteniamo l’effetto desiderato. Un altro pseudo-element molto utile è ::first-line , che permette di dare enfasi alla prima riga di un testo.

Nota: Possiamo selezionare gruppi di elementi separando i loro selettori con virgole.

div, .trailer, #Item1 { border: 2px solid blue; }

In questo modo attribuiamo un bordo solid blu di 2 px al tag div, alla classe trailer e all’id item1.

Oltre ad essere raggruppati, i selettori possono essere combinati tra loro.

<!doctype html>
<html>
 <head>
 <style>
 .box {
 width: 100px;
 height: 130px;
}
.blue.bordered
 {
 border: 1em solid #7cc4dd;
}
.pink.bordered {
 border: 1em solid #f37792;
}
.blue { background: blue; }
.pink { background: pink; }
 </style>
 </head&gt;
 <body>
  <div class="blue bordered box"></div>
  <div class="pink bordered box"></div>;
 </body>
</html>

Nota: Possiamo ritrovarci in una situazione conflittuale, in cui più dichiarazioni cercano di impostare la stessa proprietà. Ad esempio, quale colore verrà attribuito nel codice che segue?

#box {
 background: green;
}
.box {
 background: red;
 width: 200px;
 height: 200px;
}
div {
 background: firebrick;
 border: 2px solid black;
}

La risposta è il verde! Quindi, in casi di conflitto, chi comanda è sempre “il cancelletto”, ossia l’ID. Pertanto, non è l’ordine di scrittura del codice che fornisce le priorità. I tipi hanno una priorità inferiore rispetto alle classi, che a loro volta sono meno importanti degli ID.

Ritorna al Menu CSS <– []