Scegli elementi con più classi, all'interno di una regola


117

Ho un po 'di HTML che avrebbe elementi con più classi e devo assegnarli all'interno di una regola, in modo che le stesse classi possano essere diverse all'interno di contenitori diversi. Diciamo che ho questo nel mio CSS:

.border-blue {
    border: 1px solid blue;
}
.background {
    background: url(bg.gif);
}

Quindi ho questo nel mio HTML:

<div class='border-blue background'>Lorum Crap No-one Cares About Ipsum</div>

Posso indirizzarli a una singola regola? In questo modo, ad esempio, che so non funziona:

.border-blue, .background {
    border: 1px solid blue;
    background: url(bg.gif);
}

Risposte:


182

.border-blue.background { ... }è per un articolo con più classi.
.border-blue, .background { ... }è per più elementi ciascuno con la propria classe.
.border-blue .background { ... }è per un elemento in cui ".background" è il figlio di ".border-blue".

Vedi la risposta di Chris per una spiegazione più approfondita.


2
Grazie! Non sapevo se fosse possibile, quindi stavo chiedendo qui per scoprirlo.
Tanner Ottinger

Questa soluzione non funziona per me (o non funziona più ...).
fresko

è necessario separare le classi con virgole, come dice la risposta di Chris
fresko

cosa intendi per .border-blue .background { ... }bambino? Ho provato questo e questo non funziona
Eliav Louski

174

Nel caso in cui qualcuno si imbattesse in questo come ho fatto io e non se ne rendesse conto, le due varianti sopra sono per casi d'uso diversi.

Il seguente:

.blue-border, .background {
    border: 1px solid #00f;
    background: #fff;
}

serve quando vuoi aggiungere stili agli elementi che hanno il bordo blu o la classe di sfondo, ad esempio:

<div class="blue-border">Hello</div>
<div class="background">World</div>
<div class="blue-border background">!</div>

otterrebbero tutti un bordo blu e uno sfondo bianco applicati.

Tuttavia, la risposta accettata è diversa.

.blue-border.background {
    border: 1px solid #00f;
    background: #fff;
}

Questo applica gli stili agli elementi che hanno entrambe le classi, quindi in questo esempio solo <div>con entrambe le classi dovrebbero essere applicati gli stili (nei browser che interpretano correttamente il CSS):

<div class="blue-border">Hello</div>
<div class="background">World</div>
<div class="blue-border background">!</div>

Quindi fondamentalmente pensalo in questo modo, la separazione con virgole si applica agli elementi con una classe O un'altra classe e la separazione con punti si applica agli elementi con una classe E un'altra classe .


12
Questa è stata una risposta molto utile che quasi non ho letto. Saluti!
psicopoo

1
Solo stai attento. Non ci sono spazi in.blue-border.background
Knu8

2
think of it as AND and OR: Ottimo consiglio. Potrei aggiungere che .x .ypuò essere pensato comey && ancestors.has(x)
Siddharth Garg
Utilizzando il nostro sito, riconosci di aver letto e compreso le nostre Informativa sui cookie e Informativa sulla privacy.
Licensed under cc by-sa 3.0 with attribution required.