Traduzione dell’articolo “How nth-child Works” del blog “CSS TRICKS.“

 
C’è un selettore CSS, ovvero un pseudo-selettore, denominato nth-child. Ecco un esempio di utilizzo:

ul li:nth-child(3n+3) {  
  color: #ccc;
}

Quello che fa il CSS di cui sopra, è selezionare ogni terzo elemento dell’elenco all’interno di liste non ordinate. Cioè, il 3 °, 6 °, 9 °, 12 °, ecc Ma come funziona? E quali altri tipi di cose ci si può fare con nth-child? Diamo uno sguardo.

Continua a leggere »

Traduzione dell’articolo “How to Target First Line of Text in HTML Using CSS Only” del blog “Stanislav Kostadinov.” e dell’articolo ::first-line del blog “CSS TRICKS“

 
In questo post troverete il modo di selezionare e modificare solo la prima riga di testo usando il selettore CSS :first-line.

Nota: Il selettore “:first-line” può essere utilizzato solo con gli elementi a livello di blocco.

Se avete bisogno di indirizzare solo la prima riga di testo in HTML, è possibile utilizzare il selettore :first-line.

Continua a leggere »

Traduzione dell’articolo “* { Box-sizing: Border-box } FTW” del blog “Paul Irish I make the www fun.“

 
Uno dei miei casi preferiti, almeno su layout con i CSS, è il rapporto tra larghezza e padding.
Ti sei occupato di definire le larghezze da abbinare alla tua griglia o proporzioni generali di colonna, poi si inizia ad aggiungere testo, che richiede la definizione di padding per quei box. E’ ecco, ora stai sottraendo pixel dalla vostra larghezza originale in modo che la larghezza non si espanda.

Continua a leggere »