CSS CSS 가상 클래스 선택자 - first-child, last-child, nth-child 사용 방법
페이지 정보
조회 717회 작성일 22-07-18 00:33
본문
CSS 가상 클래스 선택자
first-child, last-child, nth-child 사용 방법
ol이나 ul은 목록을 만드는 태그다. 문제는 목록 태그는 한 덩어리이기 때문에 한 줄 한 줄 따로 따로 설정을 주기가 어렵다는 것이다.
이때 사용할 수 있는 CSS가 바로 가상 클래스 선택자라는 것이다. first-child, last-child, nth-child 같은 것들을 이용해서 각각의 설정을 할 수 있게 된다.
CSS 가상 클래스 선택자 - first-child, last-child, nth-child 사용 방법
CSS 가상 클래스 선택자란?
가상 클래스란 뜻은 태그에 추가로 속성을 줄 수 있도록 임시 class를 추가할 수 있는 것을 말한다.
예를 들면 아래와 같은 경우에 필요하다.
아래 HTML은 목록이지만, 이 중에서 강조해야 할 내용과 그렇지 않아야 할 내용이 섞여 있는 경우다.
<HTML 파일>
[code]
<ol>
<li>오늘 할 일</li>
<li>주말에 할 일</li>
<li>평일에 할 일</li>
<li>휴가 때 할 일</li>
<li>기타</li>
</ol>
[/code]
이럴 때 "ol li:가상클래스 { 추가 속성 }"을 이용하여 특정한 부분만 강조할 수 있게 된다.
위 HTML에 아래의 CSS를 추가하면, 오늘 할 일은 크게, 주말과 휴가 때 할 일에는 빨간 색을 입힐 수도 있게 된다는 말이다.
더불어, 아래에서는 ol이나 ul로 설명하겠지만, <div>에서도 활용할 수 있다.
first-child, last-child, nth-child 사용 방법
여기에 CSS 파일에서 아래처럼 하면 각 줄마다 다르게 설정을 줄 수 있게 된다.
<CSS 파일>
[code]
<script>
ol li:first-child {
font-size:2em;
}
ol li:last-child {
display:none;
}
</script>
[/code]
이렇게 하면 li 목록의 첫 번째 줄의 글자를 2배로 크게 하고, 마지막 줄은 아예 안 보이게 할 수 있다.
여기서 li 뒤에 :를 한 후에 추가로 붙이는 선택자에 대해 설명한다.
- first-child : 첫 번째 요소에 속성을 추가한다.
- last-child : 마지막 요소에 속성을 추가한다.
- nth-child(숫자) : 숫자 번째 요소에 속성을 추가한다.
- nth-child(식) : 식에 해당하는 요소에 속성을 추가한다.
<div> 같은 것에서는 이렇게 사용할 수 있다.
[code]
<script>
.div p:last-child {
display:none;
}
</script>
[/code]
위처럼 <div> 안에 들어 있는 여러 <p> 등에서도 가상 클래스를 사용할 수 있다.
선택자를 이용한 가상 class(클래스) 사용방법
가상 클래스라는 뜻 그대로 이것은 임시로 class를 만들어서 모양을 변경할 때 사용하는 것이다.
위에서 <li class="A">라고 되어 있다면 클래스의 이름은 A다. 만약 그냥 <li>라면 클래스가 li 자체가 된다.
하지만 li:first-child라고 한다면 임시로 first-child라는 이름을 만들어서 설정을 주게 되는 원리다.
추가로 활용할 만한 것은 nth-child를 이용한 것이다.
위에서 본 것처럼 first-child와 last-child는 처음과 끝만 지정하는 것이지만, nth-child(2)라고 하면 두 번째 줄만 지정하는 것이 가능하다.
더 편리한 가상 클래스 사용방법은 식을 이용하는 것이다. 예를 들면 이렇다.
- nth-child(2n) : 2의 배수마다. 즉 짝수마다 적용한다.
- nth-child(3n) : 3의 배수마다 적용한다.
- nth-child(5n+1) : n에 1, 2, 3... 을 넣어서 계산해 보면, 6, 11, 16... 줄에 적용한다.
CSS 가상 클래스 주의사항
하지만 주의할 것은 클래스 안에 목표로 하는 요소가 다른 종류면 안 된다는 것이다. 예를 들자면 이렇다.
<HTML 파일>
[code]
<div>
<img>내용</img>
<p>내용</p>
</div>
[/code]
위와 같이 HTML을 만들어 놓고 아래처럼 CSS파일에 가상 class를 지정하면 "번째"에 해당하는 순서가 달라지기 때문에 적용되지 않는다.
<CSS 파일>
[code]
<script>
.div p:last-child {
display:none;
}
</script>
[/code]
HTML 코드에서 p태그 이전에 img가 먼저 나오는데, 아래의 CSS파일에서 p:last-child라고 했다. 첫 번째에 p태그가 있다는 말이다. 그러나 첫 번째에 img태그가 있으니 먹히지 않게 된다.