[CSS] 복합 선택자

1. 복합 선택자

HTML Code Sample

<p>
    <img src="a.jpg"/>
    <div>
        <img src="b.jpg"/>
    </div>
</p>
<img src="c.jpg"/>

 

1) 모든 <img> 태그 선택

img {
    ...
}

<img src="a.jpg/>, <img src="b.jpg"/>, <img src="c.jpg/> 모두 선택 

 

 

2) <p> 아래 모든 <img> 태그 선택

p img {
    ...
}

<img src="a.jpg/>, <img src="b.jpg"/> 만 선택

 

3) <p> 바로 아래 <img> 태그만 선택

p>img {
    ...
}

<img src="a.jpg/> 만 선택

 

 

2. 복합 선택자의 문제점

복합 선택자는 유용하지만 문제점도 있습니다. 복합 선택자로 작성된 코드를 읽으면서 수정하려면 HTML 본문의 구조를 완전히 파악하고 있어야 한다는 점입니다. 혼자서 홈페이지를 만들 때는 별다른 문제가 되지 않을 수도 있겠습니다만, 회사에서 협업을 하는 등의 상황에서는 이것이 불편을 초래할 수도 있습니다. 

여러분은 CSS 쪽에서 복합 선택자를 적극적으로 활용하기보다는 HTML 코드상에서 클래스를 적극적으로 활용하는 편이 좋습니다. 클래스 선택자를 활용할 때는 해당 클래스의 이름을 한눈에 파악할 수 있으며, 해당 클래스 태그의 후손 태그들만 공부하면 되기 때문에 디자이너의 작업 부담을 크게 덜어줄 수 있습니다. [1] (168)

 

 

 

 

---

Reference

[1] 코딩만 따라 해도 웹페이지가 만들어지는 HTML+CSS+자바스크립트, 반병헌 (2022), 생능북스