CSS 선택자
기본 선택자
1. 전체 선택자
* {...}
2. 태그 선택자
태그명 {...}
2. 클래스 선택자
.클래스명 {...}
4. 아이디 선택자
#아이디명 {...}
복합 선택자
1. 일치 선택자
a는 기본 선택자, b는 기본 선택자
ab {...}
2. 자식 선택자
b는 a의 자식 요소
a > b {...}
3. 후손(하위) 선택자
b는 a의 후손(하위) 요소
a b {...}
4. 인접 형제 선택자
a의 다음 형제 요소 b 하나만 선택
a + b {...}
5. 일반 형제 선택자
a의 다음 형제 요소 b 모두 선택
a ~ b {...}
* 자식 요소는 후손(하위)요소에 포함된다. 부모 요소는 조상(상위) 요소에 포함된다.
가상 클래스 선택자
1. hover
a에 마우스(포인터)가 올라가 있는 동안 a 선택
a:hover {...}
a:hover {
color: red;
}
<a href="http://www.naver.com">NAVER</a>
2. active
a를 클릭하는 동안 a 선택
a:active {...}
3. focus
a가 포커스 된 동안 a 선택 (대화형 콘텐츠-input, img, tabindex...에서 사용 가능)
a:focus {...}
4. first child
a가 형제 요소 중 첫번째 요소라면 선택
a:first-child {...}
:first-child {...}
.fruits li:first-child {
color: red;
}<ul class="fruits">
<li>딸기</li> <!--선택-->
<li>사과</li>
<li>오렌지</li>
<li>망고</li>
</ul>.box-group div:first-child {
color: red;
font-weight: bold;
}<div class="box-group">
<div>1</div> <!--선택-->
<div>2</div>
<div>3
<div>3-1</div> <!--선택-->
<div>3-2</div>
<div>3-3</div>
</div>
</div>5. last child
a가 형제 요소 중 마지막 요소라면 선택
a:last-child {...}
:last-child {...}
6. nth child
a가 형제 요소 중 n번째 요소라면 선택 (n 키워드 사용 시 0부터 대입)
a:nth-child(n) {...}
:nth-child(n) {...}
예제1)
.fruits li:nth-child(2) {
color: red;
}<ul class="fruits">
<li>딸기</li>
<li>사과</li> <!--선택-->
<li>오렌지</li>
<li>망고</li>
</ul>예제2)
.fruits li:nth-child(2n) { /* 짝수번째 요소들만 선택 */
color: red;
}<ul class="fruits">
<li>딸기</li>
<li>사과</li> <!--선택-->
<li>오렌지</li>
<li>망고</li> <!--선택-->
</ul>예제3)
.fruits li:nth-child(n+3) { /* 3번째 요소부터 선택 */
color: red;
}<ul class="fruits">
<li>딸기</li>
<li>사과</li>
<li>오렌지</li> <!--선택-->
<li>망고</li> <!--선택-->
</ul>예제4)
.fruits p:nth-child(1) {
color: red;
}<!--선택된 요소 없음-->
<div class="fruits">
<div>딸기</div>
<p>사과</p>
<p>망고</p>
<span>오렌지</span>
</div>7. nth of type
a의 타입(태그이름)과 동일한 타입인 형제 요소 중 a가 n번째 요소라면 선택
a:nth-of-type(n) {...}
.fruits p:nth-of-type(1) {
color: red;
}<div class="fruits">
<div>딸기</div>
<p>사과</p> <!--선택-->
<p>망고</p>
<span>오렌지</span>
</div>8. 부정 선택자
b가 아닌 a 선택
a:not(b) {...}
.fruits li:not(.strawberry) {
color: red;
}<ul class="fruits">
<li>오렌지</li> <!--선택-->
<li class="strawberry">딸기</li>
<li>망고</li> <!--선택-->
<li>사과</li> <!--선택-->
</ul>
가상 요소 선택자
1. before
a 요소 내부의 앞에, 내용 삽입 (content 속성 필수, 내용없이 스타일만 적용할 거라면 content: ""; 작성)
a::before {...}
예제1)
ul li:before { /* support IE 8 */
content: "$";
}
ul li::before {
content: "$";
}<ul>
<li>1</li> <!-- $1 -->
<li>2</li> <!-- $2 -->
<li>3</li> <!-- $3 -->
<li>4</li> <!-- $4 -->
</ul>예제2)
div::before {
content: url("../images/smile.png");
}2. after
a 요소 내부의 뒤에, 내용 삽입
a::after {...}
속성 선택자
1. attr
속성 attr을 포함한 요소 선택 (html에서 class명을 붙이기 머리 아플 때 유용)
[attr]
[disabled] {
opacity: 0.2;
}<input type="text" value="HEROPY">
<input type="password" value="1234">
<input type="text" value="disabled text" disabled>2. attr=value
속성 attr을 포함하며 속성 값이 value인 요소 선택
[attr=value]
[attr="value"]
[type="password"] {
color: red;
}<input type="text" value="HEROPY">
<input type="password" value="1234">
<input type="text" value="disabled text" disabled>3. attr^=value
속성 attr을 포함하며 속성 값이 value로 시작하는 요소 선택
[attr^=value]
[attr^="value"]
[class^="btn-"] {
font-weight: bold;
border-radius: 4px;
}<button class="btn-success">Success</button>
<button class="btn-danger">Danger</button>
<button>Normal</button>4. attr$=value
속성 attr을 포함하며 속성 값이 value로 끝나는 요소 선택
[attr$=value]
[attr$="value"]
출처: https://happy-noether-c87ffa.netlify.app/presentations/level1/css/summary/