1976s
이 블로그는 웹 개발, 프로그래밍, IT 활용법을 다루며, 실용적인 팁과 정보를 제공합니다.
-
recentPost
-
popularPost
-
Archive
-
recentComment
공부/CSS
css의 nth-child 선택자, first-child, last-child, nth-of-type 선택자 정리
간혹 홈페이지나 기타 부분에서 쓸려니 생각나지 않아 검색하곤 하는데 이것도 생각해 보니 적어 두는 게 좋겠다 싶어 기록에 남깁니다. 아래에서는 CSS의 nth-child 선택자와 first-child, last-child 선택자를 각각 설명하고, 각 선택자에 대한 예제를 포함하여 제공하겠습니다.
1. nth-child 선택자
nth-child 선택자는 부모 요소의 자식 요소 중에서 특정한 순서에 있는 요소를 선택하는 데 사용됩니다.
구문: :nth-child(an + b)
- n은 요소의 인덱스 번호를 나타냅니다.
- a와 b는 각각 정수 상수를 나타냅니다.
:nth-child(2)는 부모 요소의 자식 요소 중에서 두 번째 요소를 선택합니다.:nth-child(odd)는 부모 요소의 자식 요소 중에서 홀수번째 요소를 선택합니다.:nth-child(even)는 부모 요소의 자식 요소 중에서 짝수번째 요소를 선택합니다.:nth-child(2n)은 부모 요소의 자식 요소 중에서 2의 배수로 떨어지는 요소를 선택합니다.:nth-child(3n+1)은 부모 요소의 자식 요소 중에서 1, 4, 7, ... 등으로 3의 배수로 떨어지는 요소를
예제: 짝수 번째 요소에 스타일 적용하기
- 첫 번째 항목
- 두 번째 항목
- 세 번째 항목
- 네 번째 항목
- 다섯 번째 항목
<style>
/* 짝수 번째 요소에 배경색 적용 */
li:nth-child(even) {
background-color: rgb(73, 77, 80);
}
</style>
<ul>
<li>첫 번째 항목</li>
<li>두 번째 항목</li>
<li>세 번째 항목</li>
<li>네 번째 항목</li>
<li>다섯 번째 항목</li>
</ul>
예제 2: 3의 배수 번째 요소에 스타일 적용하기
- 첫 번째 항목
- 두 번째 항목
- 세 번째 항목
- 네 번째 항목
- 다섯 번째 항목
<style>
/* 3의 배수 번째 요소에 글자색을 빨간색으로 적용 */
li:nth-child(3n) {
color: red;
}
</style>
<ul>
<li>첫 번째 항목</li>
<li>두 번째 항목</li>
<li>세 번째 항목</li>
<li>네 번째 항목</li>
<li>다섯 번째 항목</li>
</ul>
2. first-child 선택자
first-child 선택자는 부모 요소의 첫 번째 자식 요소를 선택하는 데 사용됩니다.
구문: :first-child
예제: 첫 번째 요소에 스타일 적용하기
- 첫 번째 항목
- 두 번째 항목
- 세 번째 항목
- 네 번째 항목
- 다섯 번째 항목
<style>
/* 첫 번째 요소에 글자색을 파란색으로 적용 */
li:first-child {
color: blue;
}
</style>
<ul>
<li>첫 번째 항목</li>
<li>두 번째 항목</li>
<li>세 번째 항목</li>
<li>네 번째 항목</li>
<li>다섯 번째 항목</li>
</ul>
3. last-child 선택자
last-child 선택자는 부모 요소의 마지막 자식 요소를 선택하는 데 사용됩니다.
구문: :last-child
예제: 마지막 요소에 스타일 적용하기
- 첫 번째 항목
- 두 번째 항목
- 세 번째 항목
- 네 번째 항목
- 다섯 번째 항목
<style>
/* 마지막 요소에 글자색을 빨간색으로 적용 */
li:last-child {
color: red;
}
</style>
<ul>
<li>첫 번째 항목</li>
<li>두 번째 항목</li>
<li>세 번째 항목</li>
<li>네 번째 항목</li>
<li>다섯 번째 항목</li>
</ul>
위의 예제들에서는 각 선택자에 해당하는 요소에 스타일을 적용하는 방법을 보여줍니다.
4. only-child 선택자
only-child 선택자는 부모 요소의 유일한 자식 요소를 선택하는 데 사용됩니다. 즉, 부모 요소에 자식 요소가 하나만 있을 때 그 하나의 자식 요소를 선택합니다.
구분: :only-child
예를 들어, 아래와 같은 HTML 구조를 가정해봅시다.
나는 유일한 자식입니다.
나는 첫 번째 자식입니다.
나는 두 번째 자식입니다.
<style>
p:only-child {
color: red;
}
</style>
<div>
<p>나는 유일한 자식입니다.</p>
</div>
<div>
<p>나는 첫 번째 자식입니다.</p>
<p>나는 두 번째 자식입니다.</p>
</div>
5.nth-of-type
구문: element:nth-of-type(value) { 정의할 스타일 }
first-of-type: type 기준, 첫 번째 요소last-of-type: type 기준, 마지막 요소nth-of-type(n): type 기준, n 번째 요소
nth-child
부모 요소의 '모든' 자식 요소 중 N번째
(같은 부모 요소를 가진 모든 자식 요소를 순서대로 셉니다)
nth-of-type
부모 태그의 '특정' 자식 태그 중 N번째
(같은 부모 요소를 가졌더라도 특정한 자식요소만 순서대로 셉니다)
p태그1
span태그1p태그2
span태그2p태그3
<style>
.test20 > :nth-child(2){
color:red;
}
.test20 > p:nth-of-type(3){
color:blue;
}
</style>
<div class="test20">
<p>p태그1</p>
<span>span태그1</span>
<p>p태그2</p>
<span>span태그2</span>
<p>p태그3</p>
</div>
6. 기타
:nth-child(-n+0) ?
CSS의 :nth-child 선택자는 특정 요소의 특정 자식을 선택할 때 사용됩니다. :nth-child(-n+0)의 경우, 이는 일반적으로 사용되지 않는 선택자입니다. 왜냐하면 -n은 음의 무한대로 가고, +0은 그것을 0으로 끌어올리기 때문에, 이 선택자는 어떤 요소도 선택하지 않습니다.
<style>
/* 음수 범위를 가지는 선택자에 대한 스타일 - 작동 않됨(어떤 요소도 선택 않기 때문입니다.) */
.parent .child:nth-child(-n+0) {
color: red;
}
</style>
</head>
<body>
<div class="parent">
<div class="child">첫 번째 자식 요소</div>
<div class="child">두 번째 자식 요소</div>
<div class="child">세 번째 자식 요소</div>
</div>
:nth-child(-n+a)
:nth-child(-n+a) 선택자는 부모 요소의 자식 요소 중에서 첫 번째부터 a번째까지 요소를 선택하는 데 사용됩니다.
<style>
/* 음수 범위를 가지는 선택자에 대한 스타일 2 - 첫번째 부터 2번째 까지 선택 */
.parent .child:nth-child(-n+2) {
color: red;
}
</style>
</head>
<body>
<div class="parent">
<div class="child">첫 번째 자식 요소</div>
<div class="child">두 번째 자식 요소</div>
<div class="child">세 번째 자식 요소</div>
</div>
활용: A부터 B까지 선택
문단 1
문단 2
문단 3
문단 4
문단 5
문단 6
문단 7
문단 8
문단 9
<style>
p:nth-child(n+3):nth-child(-n+8){
color:red;
}
</style>
<div>
<p>문단 1</p>
<p>문단 2</p>
<p>문단 3</p>
<p>문단 4</p>
<p>문단 5</p>
<p>문단 6</p>
<p>문단 7</p>
<p>문단 8</p>
<p>문단 9</p>
</div>
마무리
간단한 것이지만 생각보다 사용하려니 생각나지 않을 때가 많더군요. 이렇게 정리해 보고 사용할 때 보공 해야겠습니다.