CSS - 복합 선택자(Combinator)
2019. 12. 11. 12:55ㆍ웹/CSS
일치 선택자(Basic Combinator)
-
E 와 F 를 동시에 만족하는 요소 선택
span.orange {
color : red;
}
<div>
<ul>
<li>사과</li>
<li>배</li>
<li class=“orange”>오렌지</li>
</ul>
<div>당근</div>
<p>토마토</p>
<span class=“orange”>오렌지</span> <!— 선택 —>
</div>
설명
태그 선택자 span을 찾아 클래스 선택자를 선택. 태그를 사용하면서 클래스를 사용한 선택자
자식 선택자(Child Combinator)
-
E 의 자식 요소 F 를 선택
-
‘>' 가 선택자의 기호
ul > .orange {
color : red;
}
<div>
<ul>
<li>사과</li>
<li>배</li>
<li class=“orange”>오렌지</li> <!— 선택 —>
</ul>
<div>당근</div>
<p>토마토</p>
<span class=“orange”>오렌지</span>
</div>
설명
태그 선택자 ul을 찾아 자식인 클래스 선택자 선택. 부모를 기준으로해서 자식을 찾음
후손(하위) 선택자(Descendant Combinator)
-
E 의 후손(하위) 요소 F 를 선택
-
'띄어쓰기' 가 선택자의 기호
div .orange {
color : red;
}
<div>
<ul>
<li>사과</li>
<li>배</li>
<li class=“orange”>오렌지</li> <!— 선택 —>
</ul>
<div>당근</div>
<p>토마토</p>
<span class=“orange”>오렌지</span> <!— 선택 —>
</div>
설명
태그 선택자 div를 찾아 후손(하위) 선택자인 클래스 선택자 선택
인접 형제 선택자(Adjacent Sibling Combinator)
-
E 의 다음 형제 요소 F 하나만 선택
-
‘+’ 가 선택자의 기호
.orange + li {
color : red;
}
<div>
<li>딸기</li>
<li>수박</li>
<li class=“orange">오렌지</li>
<li>망고</li> <!— 선택 —>
<li>사과</li>
</div>
설명
클래스 선택자 orange 를 찾아 인접해 있는 다음 형제 요소 태그 선택자 li 선택
일반 형제 선택자(General Sibling Combinator)
-
E 의 다음 형제 요소 F 모두 선택
-
‘~’가 선택자 기호
.orange + li {
color : red;
}
<div>
<li>딸기</li>
<li>수박</li>
<li class=“orange">오렌지</li>
<li>망고</li> <!— 선택 —>
<li>사과</li> <!— 선택 —>
</div>
설명
클래스 선택자 orange 를 찾아 인접해 있는 다음 형제 요소 태그 선택자 li 모두 선택
출처 : heropy.org
'웹 > CSS' 카테고리의 다른 글
CSS - 가상클래스 선택자 - first-child, last-child, nth-child (0) | 2019.12.11 |
---|---|
CSS - 가상클래스 선택자(Pseudo-Classes Selectors) - hover, active, focus (0) | 2019.12.11 |
CSS - 블럭 / 인라인 (0) | 2019.11.24 |
CSS - 기본 선택자 (0) | 2019.11.24 |
CSS - 선언 방식 (0) | 2019.11.24 |