1. 가상 클래스 선택자란?
- 실제로 html에 존재하지 않는 클래스지만 마치 클래스가 존재하는 것처럼 작동한다고 하여 가상 클래스 선택자로 부릅니다!
2. 8가지 종류 중 가상 클래스 선택자(Pseudo class selector)에 대해서 알아보겠습니다!
- 선택자 종류 -
1. 전체 선택자 (Universal Selector)
2. 타입 선택자 (Type Selector)
3. 아이디 선택자 (ID Selector)
4. 클래스 선택자 (Class Selector)
5. 선택자 목록 (Selector list)
6. 속성 선택자 (Attribute selectors)
7. 가상 클래스 선택자(Pseudo class selector)
8. 가상 요소 선택자 (Pseudo-elements)
3. 가상 클래스 선택자(Pseudo class selector) 사용법
- 중요한 점은 가상 클래스 선택자를 작성할 땐 ' : (콜론) '을 한 번 작성하는 것입니다!
(* 참고로 가상 요소 선택자는 '::(콜론콜론)' 이렇게 콜론을 2번 작성해야 합니다)
- nth-child(n)일 땐, n은 1부터 시작
- nth-child(2n+1) 이런 식일 땐, n은 0부터 시작함에 주의하세요!!!
/* 가상 클래스 선택자 작성법 */
선택자:키워드 {}
/*예시*/
.foo:nth-last-child(n) /* 마지막 요소부터 시작, n은 1부터 시작합니다!! */
.foo:first-child {} /* class="foo"인 엘리먼트 중 첫번째 자식인 엘리먼트를 선택 */
.foo:last-child {} /* class="foo"인 엘리먼트 중 가장 마지막 엘리먼트 선택 */
.foo:nth-child(n) {} /* n번째 엘리먼트 선택, n은 1부터 시작합니다!! */
.foo:nth-child(odd) {}/* 홀수 선택 */
.foo:nth-child(2n+1) {} /* 홀수 선택, 여기선 n이 0부터 시작합니다!! */
.foo:nth-child(even) {} /* 짝수 선택 */
.foo:nth-child(2n) {} /* 짝수 선택, 여기선 n이 0부터 시작합니다!!*/
a:visited {} : /* 방문한 적이 있는 링크를 선택 */
button:hover {} /* 마우스를 요소 위에 올렸을 때 적용 */
a:active {color: red;} /* 사용자가 요소를 실행할 때(버튼을 누르거나 링크를 클릭할 때) 적용 */
input:focus{ /* 요소에 포커스가 있을 때 적용, 클릭할 수 있는 요소나 폼컨트롤(input, select)과 같이 상호작용 할 수 있는 모든 요소에는 포커스가 가능 */
border: 5px solid royalblue;
}
input:checked+label {background-color: lightgreen;} /* 선택한 상태의 라디오, 체크박스, 옵션 요소를 */
/* HTML
<input id="check" type="checkbox">
<label for="check">오늘 아침은 삼겹살입니다.</label>
*/<ul>
<li class="foo">1</li> <!-- .foo:first-child -->
<li class="foo">2</li>
<li class="foo">3</li> <!-- .foo:nth-child(3) -->
<li class="foo">4</li>
<li class="foo">5</li> <!-- .foo:last-child -->
</ul>
이 글 작성 이유!
선택자 공부할 수 있는 게임(https://flukeout.github.io/)을 하다가 막히는 곳이 생겼다.
바로 Level 19 !!!
:nth-last-child(n)을 사용해서 <bento> 요소를 선택하는 문제였는데,
아래서부터 요소를 읽으면
bento > plate > bento 이지만, plate랑 bento는 다르니까 bento:nth-last-child(2)라고 생각했다,,
그런데 답은 bento:nth-last-child(3) 이였다!
- div:nth-last-child(n)을 사용해서 '옥수수'를 파란 글씨로 바꿔보자!
div 요소를 선택했으니까, div:nth-last-child(2)를 사용해야 할 것만 같지 않나요?
하지만 실제론 div:nth-last-child(3)을 해야지 원하는 결과를 얻을 수 있답니다!
태그명과 상관없이 마지막 div요소부터 거꾸로 형제 요소들을 순차적으로 카운트 하는 것이죠!
<style>
div:nth-last-child(3) {
color: blue;
font-weight: bold;
}
</style><body>
<p>양배추</p>
<div>옥수수</div> /* 마지막부터 3번 째(형제요소) */
<ul> /* 마지막부터 2번 째(형제요소) */
<li>감자</li>
<li>고구마</li>
<li>배추</li>
</ul>
<div>당근</div> /* 마지막부터 1번 째 */
</body>
- 내가 선택한 요소만 카운트로 세고 싶다면!!!
:nth-last-of-type(n)을 사용하자!!
<style>
div:nth-last-of-type(2) {
color: red;
font-weight: bold;
}
/* div:nth-last-child(3) {
color: blue;
font-weight: bold;
} */
</style><body>
<p>양배추</p>
<div>옥수수</div>
<ul>
<li>감자</li>
<li>고구마</li>
<li>배추</li>
</ul>
<div>당근</div>
</body>
https://developer.mozilla.org/ko/docs/Web/CSS/:nth-child
:nth-child - CSS: Cascading Style Sheets | MDN
CSS :nth-child() 의사 클래스는 형제 사이에서의 순서에 따라 요소를 선택합니다.
developer.mozilla.org
'CSS' 카테고리의 다른 글
| Float 사용시 부모 요소의 높이를 넘어가버릴 때 해결방법 3가지(CSS) (0) | 2022.09.20 |
|---|
