11 css 3

Pubblicato il di

In alcuni casi le regole css3 non vengono supportate in maniera standard da tutti i browser, per cui, a volte, è necessario anteporre davanti all’attributo css un suffisso che ne permette la lettura dai browser che non lo supportano secondo quanto segue:

  • Internet Explorer : -ms-
  • Firefox : -moz-
  • Chrome / Safari: -webkit-
  • Opera : -o-

Dato il seguente codice html:

<h1>Non sono un paragrafo</h1>
<ul id="primaLista">
    <li>Mele</li>
    <li><a href="www.miosito.it"> Pere </a></li>
    <li>Pesche</li>
</ul>

<p>IO, sono un paragrafo</p>
<ul>
    <li>Mele</li>
    <li><a href="www.altrosito.it"> Pesche </a></li>
    <ul id="primaLista">
        <li>Mele</li>
        <li>Pere</li>
        <li><a href="www.miosito.it"> Pere </a></li>
    </ul>
</ul>

<h2>Neanch'io, ma prima di me c'è n'è uno</h2>
<ul>
    <li>Mele</li>
    <li><a href="https://www.miosito.it"> Pere </a></li>
    <li>Pesche</li>
</ul>

Incorporando le regole duplicate con questi suffissi si riesce a garantire la compatibilità.

Iniziamo con un operatore aggiunto, la tilde

p ~ ul {background-color: red}

Tutti gli ul che seguono il p vengono colorati con lo sfondo di rosso.

Il simbolo + si usava anche nella precedente versione di css:

p + ul {background-color: red}

In questo caso con il +, la ul immediatamente adiacente il p viene colorato con lo sfondo rosso.

Parentesi quadre

Supponiamo di aggiungere  un id al primo ul:

<ul id="primaLista">
    <li>Mele</li>
    <li><a href="www.miosito.it"> Pere </a></li>
    <li>Pesche</li>
</ul>

andiamo a creare la seguente regola:

[id] {background-color: red;}

In questo caso tutti i tag che hanno un id avranno lo sfondo rosso. Da notare che si devono usare sempre le parentesi quadre.

Se anteponessi un tag davanti al selettore id :

a[id] {background-color: red;}

otterrei che tutti i tag a contenenti un id avrebbero lo sfondo rosso. In questo esempio, nessuno.

Vogliamo selezionare tutti i link (href) che contengono un certo dominio:

a[href="www.miosito.it"] {background-color: red;}

Vogliamo selezionare tutti i link (href) italiani, ovvero che contengono it :

a[href*=".it"] {background-color: red;}

Interessante l’operatore asterisco uguale che significa che contiene. Se non avessimo messo il punto davanti a it la selezione avviiene anche sul contenuto del sito, quindi se ci fosse un link miosito.com , verrebbe selezionato.

Se vogliamo ottenere il link con https possiamo  usare l’operatore accento circonflesso uguale che significa inizia con :

a[href^="https"] {background-color: red;}

Il complementare, cioè finisce con, si fa col dollaro uguale

a[href$=".it"] {background-color: red;}

pseudoclassi

anche le pseudoclassi sono state ampliate

first-of-type , last-of-type, nth-of-type

ul:first-of-type {background-color: red;}

seleziona il primo elemento in riferimento al genitore che lo contiene. Nel nostro caso la prima lista è esterna a tutto quindi il suo genitore è il body, quindi questa regola vuol dire, seleziona il primo ul contenuto nel body.

li:first-of-type {background-color: green;}

Tutte i primi li contenuti in un ul verranno selezionati.

li:last-of-type {background-color: green;}

Tutte gli ultimi li contenuti in un ul verranno selezionati.

li:nth-of-type(2) {background-color: green;}

nth sta per ennesimo e poi tra parentesi tonde inserisco il numero dell’elemento.

first-child, last-child , nth-child

h1:first-of-type {background-color: green;}

Tutti i primi h1 figli di un genitore vengono seleionati, quindi per esempio il primo h1 figlio di body anche se prima c’è un altro elemento prima di h1 figlio di body. Il primo h1 figlio di un div, anche se in quel div c’è un p prima dell’h1 ….

h1:first-child {background-color: green;}

In questo caso seleziono tutti gli h1 che sono primi figli del loro genitore, quindi sopra a loro non devono esserci altri elementi a parte il genitore

li:last-child {background-color: green;}

Tutti gli li che sono ultimi figli

li:nth-child(26) {background-color: green;}

Tutti gli li ventiseiesimi.

input

aggiungiamo il seguente form

<form>
    cognome <input type="text" name="cognome"><br/>
    nome <input type="text" name="nome"><br/>
    cognome da nubile<input type="text" name="nubile" disabled="disabled"><br/>
</form>

voglio colorare solo l’input che ha come stato disabilitato:

input:disabled {background: #ddd;}

Tutti gli input disabled verranno colorati con sfondo grigio,

tutti gli altri input abilitati, in giallo canarino:

input:enabled {background: lightyellow;}

Si possono selezionare anche altri elementi, tipo i radio button che sono checked, ma sorvoliamo perché ancora non tutti i browser lo supportano.

negazione (not)

:not(a) {color: red;}

Non sei un tag a, ovvero tutto quello che non è un an’ancora viene colorato di rosso.