I selettori in CSS

Mattepuffo's logo
I selettori in CSS

I selettori in CSS

Nei CSS "avanzati" è facile trovare selettori (simboli) che non tutti conoscono e comprendono.

Quelli sicuramente più usati sono:

  • >
  • +
  • ~

Il primo vuol dire GREATHER THAN.

In questo caso la regola viene applicata al figlio di un altro elemento; dove per filgio si intende un elemento subito all'interno di un altro.

Esempio CSS:

span { margin: 0; }
div > span {
   margin: 0 20px;
}

Il secondo simbolo sta per PLUS SIGN, e si riferisce ad un elemento adiacente.

Quindi si riferisce solo ad elementi immediatamente vicini.

Esempio CSS:

h2 + p {
   background-color: #999999;
}

Solo sul primo p subito dopo h2 verrà impostata la regola.

Il terzo è la TILDE; concettualmente è simile al precedente, ma meno restrittivo.

Esempio CSS:

h2 ~ p {
   background-color: #999999;
}

Infatti questo prendere tutti i p (consecutivi) ad h2, e non solo il primo.

Enjoy!


Condividi

Commentami!