Le regole CSS e i selettori di stile

CSS Logo

Nei CSS le regole di stile vengono applicate in base alle relazioni definite tra gli elementi presenti nel Document Object Model, DOM, di una pagina web. Esistono moltissimi modi per dichiarare le regole di stile e alcune di queste fanno uso dei selettori. Ecco una lista dei selettori tra le classi CSS e le loro relazioni in un foglio di stile:

  • Il selettore universale (*) viene utilizzato per applicare una regola di stile a tutti gli elementi presenti nella pagina:

        * {color: blue;}

    In questo modo tutti gli elementi della pagina saranno di colore blu.

  • Il selettore degli elementi della pagina consente di specificare le proprietà degli elementi di una pagina:

        p {color: blue;}

    In questo caso solo tutti i paragrafi saranno di colore di e anche gli altri elementi.

  • Tutte le regole di stile possono essere applicate contemporaneamente a più classi, ad esempio il seguente codice:

        p {color: blue;}
        div {color: blue;}

    equivale a scrivere i due selettori separati da una virgola:

        p, div {color: blue;}

    Questa tecnica consente di non dover riscrivere più volte le stesse dichiarazioni e facilita la manutenzione del codice.

  • E’ possibile applicare una regola di stile ad un elemento specifico della pagina identificato da un id grazie al simbolo del cancelletto (#):

        #mia-classe {color: blue;}

    Solo l’elemento che avrà mia-classe sarà di colore blu, ad esempio sarà di colore blu il seguente elemento:

        <h1 id="mia-classe"></h1>

  • Possono essere create delle classi personalizzate a cui applicare specifiche regole di stile e da utilizzare su più elementi della pagina tramite il simbolo del punto (.):

        .mia-classe {color: blue;}

    che sarà utilizzata con il seguente codice:

        <h1 class="mia-classe"></h1>
        <div class="mia-classe"></div>

    Tutti gli elementi della pagina con mia-classe saranno di colore blu.

  • E’ possibile applicare le regole di stile ad un elemento e ad i suoi discendenti, ad esempio per applicare una regola di stile a quest’elemento:

        <p>
            <div class="mia-classe"></div>
        <p>

    Possiamo scrivere:

        p .mia-classe {color: blue;}
        p div {color: blue;}

  • In un foglio CSS unendo due selettori si sta dicendo che le classi si trovano sullo stesso elemento. Ad esempio, avendo il seguente codice:

        <p class="mia-classe"></p>

    Possiamo riferici all’elemento tramite i due selettori nel seguente modo:

        p.mia-classe {color: blue;}

    Solo i paragrafi con mia-casse saranno di colore blu. Ciò differisce da:

        p .mia-classe {color: blue;}

    che corrisponde a:

        <>p>
            <div class="mia-classe"></div>
        </p>

  • Per potersi riferire ad un selettore padre e ad un selettore figlio come in questo caso:

        <p>
            <div class="mia-classe"></div>
        </p>

    possiamo scrivere in modo equivalente:

        p div.mia-classe {color: blue;}
        p .mia-classe {color: blue;}

  • Separando le classi con uno spazio, le regole si applicano a tutti i discendenti:

        p .mia-classe {color: blue;}

    sarà applicata ad entrambi i div:

        <p>
            <div class="mia-classe">
                <div class="mia-classe"></div>
            </div>
        </p>

  • E’ possibile riferirsi solo ai figli di un elemento tramite il simbolo del maggiore (>), ad esempio con:

        p > .mia-classe {color: blue;}

    si applicheranno le regole solo agli elementi con mia-classe e che sono direttamente figli di un paragrafo. Ad esempio:

        <p>
            <div class="mia-classe"></div>
        </p>

    In quest’altro esempio la regola non sarà applicata perché l’elemento con mia-classe poiché non è direttamente un figlio del paragrafo (ma un suo discendente):

        <p>
            <div>
                <div class="mia-classe"></div>
            </div>
        </p>

  • Utilizzando il segno più (+) è possibile fare riferimento ai fratelli adiacenti degli elementi, si farà quindi riferimento agli elementi sullo stesso livello nella pagina HTML. Vediamo un esempio:

        div + p {color: blue;}

    Con il seguente codice:

        <div class="mia-classe"></div>
        <p class="mia-classe"></p>
        <p class="mia-classe"></p>

    Solo il primo paragrafo sarà di colore blu essendo adiacente ad un div. Vediamo un altro esempio, scrivendo:

        p + p {color: blue}

    con il seguente codice HTML:

        <p>List Item 1</p>
        <p>List Item 2</p>
        <p>List Item 3</p>
        <p>List Item 4</p>
        <p>List Item 5</p>

    La regola CSS sarà applicata a tutti gli elementi tranne al primo in quando non è un fratello diretto di un paragrafo.

  • Il simbolo di tilde (~) viene utilizzato per riferirsi a tutti i fratelli di un elemento, ovvero che si trovano sullo stesso livello. Si tratta di una generalizzazione del selettore +. In questo caso con la regola:

        div ~ p {color: blue;}

    E con lo stesso codice HTML precedente:

        <div class="mia-classe"></div>
        <p class="mia-classe"></p>
        <p class="mia-classe"></p>
        

    Entrambi i paragrafi verranno colorati di blu in quanto sono fratelli di p, indipendentemente dalla posizione in cui si trovano.

    Vediamo un altro esempio:

        p ~ div {color: blue;}

    con il seguente codice HTML:

        <div class="mia-classe"></div>
        <p class="mia-classe"></p>
        <div class="mia-classe"></div>
        <p class="mia-classe"></p>

    La regola CSS sarà applicata a tutti gli elementi tranne al primo in quando non è un fratello diretto di un paragrafo, la regola si applica solo ai fratello e successori dell’elemento.

Esistono molte altre regole dei selettori:

  • :first-child per riferirsi al primo elemento incontrato (ad es. p:first-child {color: blue;});
  • :last-child per riferirsi all’ultimo elemento incontrato (ad es. p:last-child {color: blue;});
  • :nth-child() per riferirsi ad uno specifico elemento (ad es. p:nth-child(2){color: blue;});
  • :not() per non applicare la regola ad un elemento specifico (ad es. :not(p));
  • :active per indicare l’elemento attivo in quel momento;
  • :hover per indicare le regole da applicare al passaggio del mouse su un elemento.

Infine, l’ultima cosa da tenere conto quando si scrive un foglio CSS è che i selettori più specifici hanno la precedenza, ad esempio:

    <div>
        <p class="mia-classe">Datrevo.com</p>
    </div>

Con il seguente CSS:

    div p {color: blue;}
    div p .mia-classe {color: red;}

La seconda regola risulta più specifica della prima e di conseguenza il testo sarà di colore rosso.

Lascia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *