Escludere elementi da una regola CSS

Con CSS è possibile definire lo stile di un determinato gruppo di elementi, tramite uno specifico selettore o tramite tag HTML corrispondente, tuttavia spesso può accadere che uno specifico elemento debba essere escluso da determinate regole di stile e dunque restare separato dal resto gruppo.

Con questo linguaggio è possibile escludere uno o più elementi da una regola, attraverso semplici istruzioni di facile comprensione. Qui ti spiegherò come fare.

Escludere uno o più elementi da una regola di stile CSS

Gli elementi HTML vengono modificati graficamente dalle regole CSS contenuti nei fogli di stile in formato .css. Se sviluppi (o hai avuto modo di sviluppare) pagine web HTML, ti sarà capitato di mettere mani anche su fogli di stile. Se è così allora avrai certamente compreso il meccanismo di questi linguaggi.

Se non conosci HTML e CSS allora consulta i nostri articoli/corsi gratuiti dedicati.

Una regola CSS viene assegnata ad un elemento HTML attraverso un selettore, che può essere “class“, “id” oppure un tag generico (es. “<img>“).

Qui di seguito degli esempi di comuni regole CSS

p{
   color:green;
   font-weight:bold;
}

In questo esempio: tutti gli elementi e i sottoelementi relativi al selettore “p” (tag <p> per la creazione di paragrafi di testo) avrebbero uno spessore del testo di tipo bold (grassetto); e un colore verde. Questa regola interesserebbe qualsiasi elemento “p” presente nel documento HTML.

Ora, se si volessero escludere determinati paragrafi dalla regola, ci basterebbe dichiarare la pseudo-classe “:not()“, contenente i rispettivi selettori da escludere. Facciamo un esempio:

p:not(.paragrafo1, #descrizione){
   color:green;
   font-weight:bold;
}

In questo caso avremmo escluso tutti gli elementi HTML con classe “.paragrafo1” e il tag con id “#descrizione” dalla regola CSS.

Ancora un esempio:

<p class="el1">Ciao mondo!</p> 
<p class="el2">Ciao mondo!</p> 
<p class="el3">Ciao mondo!</p>

<style>
p:not(.el1,.el3) {
  color:green;
  font-weight:bold;
}
</style>

Risultato:

Ciao mondo!

Per dichiarare più elementi da escludere nella pseudo-classe CSS :not(), basterà separarli con una virgola

L’uso di questo metodo ci consente di gestire in maniera efficace lo stile di più elementi HTML contemporaneamente, senza dichiarare una gran quantità di classi alternative per la sovrascrittura di regole CSS ed alleggerire la dimensione del codice.

Iscriviti alla nostra Newsletter qui e seguici su Facebook per aggiornamenti!

Articoli recenti: