320x100
# 복합 선택자
1)ABCXYZ - 일치 선택자
선택자 ABC와 XYZ를 동시에 만족하는 요소 선택
예시
ul.orange
2)ABC > XYZ - 자식 선택자
선택자 ABC의 자식요소 XYZ선택
예시
ul > .orange
3)ABC XYZ - 하위(후손)선택자
사실상 2)와 기능은 같다.
예시
ul .orange
4)ABC + XYZ - 인접 형제 선택자
선택자 ABC의 다음 형제 요소 중 XYZ를 선택
이 개념이 설명이 없다면 약간 난해하다.
예시
.orange + li
<li class=‘orange’>오렌지</li>
<li>망고</li>
이렇게 있을때, 선택자 적용은 망고에만 된다.
이유는 선택자 ornage클래스의 다음 형제줄에 나오는 것 중에서
li가 있는 것이 망고 이기 때문이다.
5)ABC ~ XYZ - 일반 형제 선택자
선택자 ABC의 다음 형제 요소 중 XYZ를 모두 선택
예시
.orange ~ li
라고 되어있을때
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li class=‘orange’>오렌지</li>
<li>4</li>
<li>5</li>
</ul>
이 중에서 ABC로써 선택된 선택자가 orange클래스 이기 때문에
orange 클래스 다음으로 나오는 4와 5에 대해서 적용이 된다.
300x250
'Web > Css' 카테고리의 다른 글
css 활용2 글꼴, 문자 (0) | 2022.09.05 |
---|---|
css 활용1 박스 모델 (0) | 2022.09.05 |
css 기초4 가상 요소 (0) | 2022.09.05 |
css 기초3 가상 클래스 hover,active,nth-child 등 (0) | 2022.09.05 |
css 기초1 기본 선택자 (html에 작성된 것중 어떤것에 css 속성을 입히는지) (0) | 2022.09.05 |