Jaka jest różnica między tymi dwoma selektorami?
.classA.classB {
border: 1px solid;
}
.classA .classB {
border: 1px solid;
}
źródło
Jaka jest różnica między tymi dwoma selektorami?
.classA.classB {
border: 1px solid;
}
.classA .classB {
border: 1px solid;
}
.classA.classB
odnosi się do elementu, który ma obie klasy A i B ( class="classA classB"
); natomiast .classA .classB
odnosi się do elementu z class="classB"
potomkiem elementu z class="classA"
.
Edycja: Specyfikacja dla odniesienia: Selektory atrybutów (patrz sekcja 5.8.3 Selektory klas)
Taki styl jest znacznie bardziej powszechny i jest przeznaczony dla dowolnego typu elementu klasy „classB”, który jest zagnieżdżony w dowolnym elemencie klasy „classA”.
.classA .classB {
border: 1px solid; }
Działałby na przykład na:
<div class="classA">
<p class="classB">asdf</p>
</div>
Ten jednak jest przeznaczony dla dowolnego typu elementu, który jest zarówno klasą „classA”, jak i klasą „classB”. Ten typ stylu jest rzadziej spotykany, ale w niektórych okolicznościach nadal jest przydatny.
.classA.classB {
border: 1px solid; }
Dotyczyłoby to tego przykładu:
<p class="classA classB">asdf</p>
Nie miałoby to jednak wpływu na:
<p class="classA">fail</p>
<p class="classB">fail</p>
(Zwróć uwagę, że jeśli element HTML ma wiele klas, są one oddzielone spacjami).
.classA.classB
oznacza to, że wybrane zostaną elementy o nazwach obu klas, natomiast.classA .classB
oznacza, że wybrany zostanie tylko element z nazwą klasyclassB
wewnątrzclassA
.źródło