Frontend/CSS
12. 연결 선택자
예린lynn
2024. 7. 5. 22:58
728x90
- 하위 선택자
- 자식 선택자
- 인접 형제 선택자
- 일반 형제 선택자
하위 선택자
- 기본형: [상위요소] [하위요소] {...}
- 하위 요소: 특정 요소를 기준으로 그 안에 포함된 요소 ex) 자식 요소, 손자 요소 등
- 하위 선택자는 부모 요소에 포함된 모든 하위 요소를 선택한다.
-활용 코드
<style>
/* section 태그의 모든 ul 태그에 적용 */
section ul {
border: 1px solid purple;
}
</style>
<body>
<section>
<p>p태그</p>
<ul>
<li>li태그</li>
<ul>
<li>li태그</li>
</ul>
</ul>
</section>
<div>
<h1>h1태그</h1>
<ul>
<li>li태그</li>
</ul>
<ul>
<li>li태그</li>
</ul>
</div>
</body>
자식 선택자
- 기본형: [부모요소] > [자식요소] {...}
- 자식 요소: 부모의 바로 한 단계 아래의 요소
- 하위 선택자와 다르게 자식 요소에만 스타일을 적용한다.
- 활용 코드
<style>
section > ul {
border: 1px solid purple;
}
</style>
<body>
<section>
<p>p태그</p>
<ul>
<li>li태그</li>
<ul>
<li>li태그</li>
</ul>
</ul>
</section>
<div>
<h1>h1태그</h1>
<ul>
<li>li태그</li>
</ul>
<ul>
<li>li태그</li>
</ul>
</div>
</body>
인접 형제 선택자
- 기본형: 요소1 + 요소2 {...} //요소1의 형제인 요소2들 중 첫 번째 요소2
- 웹 문서에서 부모 요소가 같을 경우 형제 관계라고 한다.
- 형 요소: 형제 관계인 요소에서 먼저 나오는 요소
- 동생 요소: 형제 관계인 요소에서 나중에 나오는 요소
- 인접 형제 선택자: 형제 요소 중에서 첫 번째 동생 요소만 선택
-활용 코드
<style>
h1 + ul {
background-color: blue;
}
</style>
<body>
<section>
<p>p태그</p>
<ul>
<li>li태그</li>
<ul>
<li>li태그</li>
</ul>
</ul>
</section>
<div>
<h1>h1태그</h1>
<ul>
<li>li태그</li>
</ul>
<ul>
<li>li태그</li>
</ul>
</div>
</body>
형제 선택자
- 기본형: 요소1 ~ 요소2 {...} // 요소1의 형제인 모든 요소2
- 모든 형제 요소에 적용된다.
- 활용 코드
<style>
h1 ~ ul {
background-color: blue;
}
</style>
<body>
<section>
<p>p태그</p>
<ul>
<li>li태그</li>
<ul>
<li>li태그</li>
</ul>
</ul>
</section>
<div>
<h1>h1태그</h1>
<ul>
<li>li태그</li>
</ul>
<ul>
<li>li태그</li>
</ul>
</div>
</body>
728x90