La regola dell’AND logico nei CSS

Una caratteristica dei fogli di stile che pochi conoscono e usano è quella di poter definire la regola della “concorrenza” di classi! Un tag, infatti, può possedere una o più classi associate, cosa che rende quest’ultime estremamente versatili, oltre che le mie preferite. Come molti sviluppatori usano fare, anch’io tendo ad associare agli ID poche regole CSS, se non nessuna. L’ideale, a rigor di logica, sarebbe inserire gli ID solo per scopi di scripting, perché identificano in modo univoco un elemento all’interno del DOM. Alcuni “validadori” er esempio, se all’interno della pagina trovano due o più elementi con lo stesso ID, segnalano questo come errore. Lasciatemi adesso mostrare come l’associazione di più classi sia davvero “speciale”; se scriviamo le seguenti semplici regole CSS:

1
2
3
4
5
6
7
.box {
  border:1px solid #000
}

.red {
  color:#f00
}

Applicandole ad un tag avremmo:

1
2
3
<p class="box">Hello, World! - box nero</p>
<p class="red">Hello, World! - scritta rossa</p>
<p class="box red">Hello, World! - box nero con scritta rossa</p>

Output:

Hello, World! – box nero

Hello, World! – scritta rossa

Hello, World! – box nero con scritta rossa

Ma, se definissimo questo, cosa accadrebbe?

1
2
3
4
.box.red {
  border:2px solid #f00;
  color:#0af;
}

L’ultima riga dell’esempio HTML di prima diverrebbe:

1
<p class="box red">Hello, World! - box rosso di 2 pixel con scritta azzurra!</p>

Output:

Hello, World! – box nero con scritta rossa

La regola .box.red è completamente diversa da .box .red. Quest’ultima indica il comportamento della classe red quando essa è figlia di una classe box.
In pratica quando si definisce una classa “attaccata” ad un’altra si indica che se un tag ha “una classe” e (AND) un’altra “classe”, allora la regola da usare è una nuova. La comodità di tutto questo risiede nel fatto che non abbiamo dovuto alterare l’HTML; il nuovo comportamente nel caso un tag abbia entrambe le classi è stato deciso interamente da CSS.

Non ci sono commenti per questo Post

Lascia un commento

TAG XHTML PERMESSI: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> INSERIMENTO CODICE: 
<pre></pre> // blocco generico
                   <code></code> // blocco generico
                   [cc_actionscript][/cc_actionscript] // Actionscript
                   [cc_actionscript3][/cc_actionscript3] // Actionscript 3
                   [cc_css][/cc_css] // CSS Style Sheet
                   [cc_html][/cc_html] // HTML
                   [cc_js][/cc_js] // Javascript
                   [cc_objc][/cc_objc] // Objective-C
                   [cc_php][/cc_objc] // PHP
                   [cc_sql][/cc_sql] // SQL