-
CSS 복합 선택자 일치,자식,후손,인접형제,일반형제 의미와 사용방법Dung--[CSS HTML] 2023. 4. 14. 17:19
CSS 복합 선택자 일치,자식,후손,인접형제,일반형제 의미와 사용방법
1. 일치 선택자
A 그리고 B를 동시에 만족시키는 요소를 선택
<css 적용>
li.green {
color : green;
}<html 적용>
<ul>
<li class="green">적용O</li>
</ul>
<span class="green">적용X</span>
● 적용 O
적용X일치선택자는 두가지의 조건을 동시에 만족하는 요소에 활용됩니다. 위의 예시화면에서 li 태그에 green이라는 클래스명으로 지정된 요소들에만 css가 적용되신것을 알수 있습니다.
2. 자식 선택자
- A의 자식 요소 B를 선택
- 자식은 부모 바로 아래에 있는 요소
- '>'는 자식 선택자의 기호
<css 적용>
div > .green {
color : green;
}<html 적용>
<div>
<ul>
<li class="green">적용X</li>
</ul>
</div>
<div>
<span class="green">적용O</span>
</div>
● 적용 X
적용O자식 선택자는 A > B 형태로 설저이 되며 여기에서 > 기호는 자식 선택자를 말합니다. 위의 예시화면에서는 div의 자식에 CSS를 설정하였으며 li의 경우에 depth가 2이므로 자식에서 제외되어서 적용이 되지는 않았지만 span의 경우는 depth가 1이기 때문에 자식으로 인식되어서 CSS가 지정되는것을 아실 수 있습니다.
3. 후손 선택자(하위)
- A의 후손 요소 B를 선택
- 후손은 부모 하위에 있는 모든 요소
- '띄어쓰기'는 후손 선택자의 기호
<css 적용>
div .green {
color : green;
}<html 적용>
<div>
<ul>
<li class="green">적용O</li>
</ul>
</div>
<div>
<span class="green">적용O</span>
</div>
● 적용 O
적용 O후손 선택자는 A,B의 형태로 설정되고 여기에서 띄어쓰기는 후손 선택자임을 말합니다. 위 예시에서는 div의 후손에 CSS를 설정하였고 후손의 경우 depth를 따지지 않았기에 두 군데 모두 CSS가 지정된것을 볼수 있습니다.
4. 인접형제 선택자
- A의 다음 형제 요소 B 하나만을 선택
- 형제는 부모가 같은 요소를 말합니다.
- ' + ' 는 인접형제 선택자의 기호를 의미합니다.
<css 적용>
.green + li{
color : green;
}
.green + p{
color : green;
}<html 적용>
<div>
<ul>
<li class="green">적용X</li>
<li>적용O</li>
<li>적용X</li>
</ul>
</div>
<div>
<p class="green">적용X</p>
<p class="green">적용O</p>
</div>
<p>적용X</p>
● 적용X
● 적용O
● 적용X
적용X
적용O
적용X인접 형제 선택자는 A + B의 형태로 설정이 되고 여기서 +가 인접형제 선택자임을 말하는 기호입니다. 위의 예시화면에서는 각각 li와 p 태그의 바로 다음 형제에 CSS를 설정하였고 부모가 같은 바로 다음 형제 요소만 CSS가 적용되어 있는것을 볼 수 있습니다.
5. 일반형제 선택자
- A의 다음 형제 요소 모두를 선택합니다.
- 형제는 부모가 같은 요소를 뜻합니다.
- '~'는 일반형제 선택자의 기호입니다.
<css 적용>
.green ~ li{
color : green;
}
.green ~ p{
color : green;
}<html 적용>
<div>
<ul>
<li class="green">적용X</li>
<li>적용O</li>
<li>적용O</li>
</ul>
</div>
<div>
<p class="green">적용X</p>
<p class="green">적용O</p>
</div>
<p>적용X</p>● 적용X
● 적용O
● 적용O
적용X
적용O
적용X일반형제 선택자는 A ~ B의 형태로 설정되었으며 여기서 ~ 가 일반형제 선택자임을 말합니다. 위의 예시화면에서 각각 li와 p태그의 바로 다음 형제에 CSS를 설정하였고 부모가 같은 다음의 모든 형제 요소에 CSS가 적용되어 있는것을 확인 하실 수 있습니다.
'Dung--[CSS HTML]' 카테고리의 다른 글
CSS 글자간격,줄간격 설정하는 방법 (4) 2023.04.17 CSS 기초 가상 클래스 선택자 뜻과 예시 (0) 2023.04.14 CSS 선택자의 전체,태그,클래스,아이디 활용방법 (0) 2023.04.14 CSS 적용방법과 우선순위 문법 정리 (1) 2023.04.14 기초 CSS 사용방법과 사용예시 (0) 2023.04.14