Latest web development tutorials

CSS e raggruppamento nidificato

Raggruppamento selettori

Ci sono molti elementi che hanno lo stesso stile nel foglio di stile.

h1
{
colore: verde;
}
h2
{
colore: verde;
}
p
{
colore: verde;
}

Per ridurre al minimo il codice, è possibile utilizzare il selettore di pacchetto.

Ogni selettore virgole utilizzate.

Nel seguente esempio, si usa il codice di cui sopra selettori di raggruppamento:

Esempi

h1,h2,p
{
color:green;
}

Prova »


selettori nidificati

Si può applicare alla selezione stili interni di selezione.

Nel seguente esempio, un insieme di tre stili:

  • Specificare uno stile per tutti gli elementi p
  • = Elementi "marcato" specificano uno stile per tutte le classi
  • = "Marked" elemento p all'interno di un elemento specifica uno stile per tutte le classi

Esempi

p
{
color: blue;
text-align: center;
}
.marked
{
background-color: red;
}
.marked p
{
color: white;
}

Prova »