Docelowe elementy z wieloma klasami w ramach jednej reguły

117

Mam kod HTML, który miałby elementy z wieloma klasami i muszę przypisać je w ramach jednej reguły, aby te same klasy mogły być różne w różnych kontenerach. Powiedz, że mam to w moim CSS:

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

Następnie mam to w moim HTML:

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

Czy mogę kierować na te reklamy w ramach jednej reguły? Na przykład tak, o czym wiem, że nie działa:

.border-blue, .background {
    border: 1px solid blue;
    background: url(bg.gif);
}
Tanner Ottinger
źródło

Odpowiedzi:

182

.border-blue.background { ... }dotyczy jednego przedmiotu z wieloma klasami.
.border-blue, .background { ... }dotyczy wielu przedmiotów, z których każdy ma własną klasę.
.border-blue .background { ... }dotyczy jednego elementu, gdzie „.background” jest elementem potomnym „.border-blue”.

Zobacz odpowiedź Chrisa, aby uzyskać dokładniejsze wyjaśnienie.

Vian Esterhuizen
źródło
2
Dzięki! Nie wiedziałem, czy to możliwe, więc prosiłem tutaj, aby się dowiedzieć.
Tanner Ottinger
To rozwiązanie nie działa dla mnie (lub już nie działa ...).
fresko
klasy należy oddzielić przecinkami, jak mówi odpowiedź Chrisa
fresko
co masz na myśli mówiąc .border-blue .background { ... }to dziecko? próbowałem tego i to nie działa
Eliav Louski
174

Na wypadek, gdyby ktoś natknął się na to tak jak ja i nie zdawał sobie sprawy, dwie powyższe odmiany są przeznaczone do różnych przypadków użycia.

Następujące:

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

jest używany, gdy chcesz dodać style do elementów, które mają klasę niebieskiej ramki lub tła, na przykład:

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

wszystkie otrzymałyby niebieskie obramowanie i białe tło.

Jednak przyjęta odpowiedź jest inna.

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

Stosuje to style do elementów, które mają obie klasy, więc w tym przykładzie tylko te <div>z obiema klasami powinny otrzymać style (w przeglądarkach, które poprawnie interpretują CSS):

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

Więc zasadniczo pomyśl o tym w ten sposób, oddzielanie przecinkami stosuje się do elementów z jedną klasą LUB inną klasą, a oddzielanie kropkami dotyczy elementów z jedną klasą ORAZ inną klasą .

Chris Graham
źródło
12
To była bardzo pomocna odpowiedź, której prawie nie przeczytałem. Twoje zdrowie!
psicopoo
1
Tylko bądź ostrożny. Nie ma spacji w.blue-border.background
Knu8
2
think of it as AND and OR: Dobra rada. Dodam, że .x .ymożna to potraktować jakoy && ancestors.has(x)
Siddharth Garg,