=All I Need=

Applicare proprietà CSS specifiche ad elementi annidati nella struttura


Capita di avere la necessità di applicare alcune proprietà singolari a solamente alcuni elementi del nostro sito, lasciando inalterati tutti gli atri.

Un esempio potrebbe essere quello delle immagini: vogliamo che abbiano certe caratteristiche all'interno dell'articolo mentre altre ad esempio nella siderbar.
Ci sono diverse strade (tra cui l'applicazioni di particolari classi che vanno di volta in volta richiamate). Per togliermi ogni pensiero io utilizzo i selettori figlio o combinatore figlio ma più in generale sui selettori discendenti, ovvero sul fatto che i CSS si basano sull'eredità degli elementi. A questo punto basta conoscere la struttura della pagina per ricavare l'annidamento degli elementi e quindi applicare certi stili solo ad elementi selezionati.
Ad esempio:
<div>
<img class="immagine">
</div>
per applicare uno stile all'elemento img (con il vantaggio di non dover dichiarare e richiamare la classe .immagine):
div img {color: blue;}
oppure, se si vuole, si può sempre applicare alla classe .immagine:
div .immagine {color: blue;}

E' possibile specificare ulteriormente l'annidamento in modo da restringere maggiormente l'applicazione delle proprietà desiderate. Per far ciò si utilizza l'operatore ">" che stà ad indicare che andremmo a considerare solamente l'elemento direttamente figlio.
Se dichiaro:
div > img {color: blue;}
funziona nel caso:
<div>
<img>
</div>
ma non nel caso(poiché non è direttamente un figlio del div ma un suo discendente):
<div>
<a>
<img>
</a>
</div>

Lo trovo molto utile per andare a "confinare" alcune proprietà in modo mirato.
Nel caso di questo blog avevo la necessità di applicare alcune proprietà alle immagini all'interno dei post, lasciando inalterate tutte le altre. Per fare ciò ho usato i selettori discendenti più il pseudo selettore :not() per escludere una classe in particolare.
E' bastato dichiarare:
.post-body.entry-content img:not(.pbtthumbimg) {
    float: left;
    margin: 0px 10px 5px 0px;
    width: auto;
    height: 10em;
}

Nessun commento:

Posta un commento