<기본선택자>
1. 전체 선택자(Universal Selector)
(요소 내부의)모든 요소를 선택
* {
color : red;
}
2. 태그 선택자(Type Selector)
태그 이름으로 요소 선택
li {
color : red;
}
3. 클래스 선택자(Class Selector)
HTML class속성의 값으로 요소 선택
.hey {
color : red;
}
4. 아이디 선택자(ID Selector)
HTML id속성의 값으로 요소 선택
#hey {
color : red;
}
<복합 선택자>
1. 일치 선택자(Basic Combinator)
동시에 만족하는 요소 선택
span.orange {
color : red;
}<span class = "orange">오랜지</span>
2. 자식 선택자(Child Combinator)
자식 요소를 선택 (실질적으로 스타일링이 적용되는거는 orange이며, ul은 찾는 조건이고 orange를 검색하는 것이다.)
ul > .orange {
color : red;
}<ul>
<li>사과</li>
<li>딸기</li>
<li class = "orange">오렌지</li>
</ul>
3. 후손(하위) 선택자(Descendant Combinator)
후손(하위) 요소를 선택, 자식요소 개념도 포함된다. *** '띄어쓰기'가 선택자의 기호로 사용된다.
div .orange {
color : red;
}<div>
<ul>
<li>딸기</li>
<li class = "orange">오렌지</li>
</ul>
<span class = "orange">오렌지</span>
</div>cf. 딸기와 오렌지는 형제 요소이다.
4. 인접 형제 선택자(Adjacent Sibling Combinator)
다음 형제 요소 하나만 선택
.orange + li {
color : red;
}<body>
<ul>
<li>딸기</li>
<li>수박</li>
<li class = "orange">오렌지</li>
<li>망고</li> <!--선택-->
<li>사과</li>
</ul>
</body>
5. 일반 형제 선택자(General Sibling Combinator)
다음형제 요소 모두 선택
.orange ~ li {
color : red;
}<body>
<ul>
<li>딸기</li>
<li>수박</li>
<li class = "orange">오렌지</li>
<li>망고</li> <!--선택-->
<li>사과</li> <!--선택-->
</ul>
</body>
'CSS > 기초' 카테고리의 다른 글
| 가상클래스 선택자(Pseudo-Classes Selectors) - first-child, last-child, nth child (0) | 2021.01.07 |
|---|---|
| 가상클래스 선택자(Pseudo-Classes Selectors) - hover, active, focus (0) | 2021.01.07 |
| @import 방식 (0) | 2021.01.06 |
| CSS 기본 문법 & 선택자의 역할 (0) | 2020.12.23 |
| 속성 - 크기, 여백, 색상 (0) | 2020.06.04 |