<html>
<body>
<div class="abc">
<div class="def">자손요소1</div>
<div class="ghi">
<div class="def">자손요소2</div>
</div>
</div>
</body>
</html>.abc .def
=> 클래스 abc를 가진 요소의 자식,자손 요소 중에서 클래스 def를 가진 요소를 선택.
.abc.def
=> 클래스 abc와 def를 동시에 가진 요소를 선택. 한 요소에 두 클래스 모두를 가지고 있어야 함.
그래서 두 선택자는 사용되는 맥락에 따라 매우 다르게 작용한다.
.abc .def 는 '자손요소1'과 '자손요소2' 를 모두 선택함
반면
.abc.def 는 아무것도 선택되지 않음. => ( abc와 def 클래스를 동시에 가진 요소가 없기 때문)
🤷♂️ 만약 .abc > .def 한다면?
.abc > .def 선택자는 클래스 abc를 가진 요소의 직접적인 자식 요소 중에서 클래스 def를 가진 요소를 선택하므로,
'자손요소1'만 선택하고, '자손요소2'는 선택하지 않는다.
HTML로 코딩합니다.