CSS - 선택자(first-child, last-child, nth-child)N번째에 css 적용

CSS - 선택자

 

#1 첫번째 자식요소에 적용

.class:first-child {

}

이것의 의미는 해당하는 클래스안에 들어있는 자식 요소중 첫번째 자식에게만

내용을 적용하겠다는 의미

 

코드 예시로는

<div class=“box1”>
	<p>첫번째</p>
	<p>두번째</p>

이렇게 있으면

.box1 p:first-child {

}

이런식으로 적용

 

하지만 예외 사항이 있다.

<div class="container">
	<h1>hello</h1>
	<p>davy</p>
</div>

만약 이렇게 있는 상황에서

.container p:first-child {

    background-color: red;

}

라고 한다면

hello, davy중에서 어느것도 적용되지 않는다.

왜냐하면 ~child요소는

p중에서 첫번째 자식 이라기보다는 정확한 의미로는

container 클래스에 들어있는

첫번째 요소가 p여야 하고

그 p중 첫번째에 내용을 적용한다.

정도로 이해하면 될것같다.

 

핵심은 nth-child이든 first-child이든 last-child이든

이 child가 의미하는 자리에 해당하는 태그가

<여기>:first-child

이런식으로 <여기>의 태그와 일치해야한다.

---

#2 마지막 자식요소에 적용

.class:last-child {

}

 

코드 예시로는

<div class=“box1”>
	<p>첫번째</p>
	<p>두번째</p>

이렇게 있으면

.box1 p:last-child {

}

---

#3 N번째 자식요소에 적용

 

.class:nth-child(n) {

}

 

코드 예시로는

 

<div class=“box1”>
	<p>첫번째</p>
	<p>두번째</p>

이렇게 있으면

두번째 p태그에 적용을 원할때
.box1 p:nth-child(2) {

}

---

#4 N번째 자식요소에 활용

 

N번째 자식요소에 적용하는것은 적용하기에 따라서

2번째씩, 3번째씩 등으로 적용이 가능하다.

 

.class:nth-child(2n) {

}



코드 예시로는

<div class=“box1”>
	<p>첫번째</p>
	<p>두번째</p>
	<p>세번째</p>
	<p>네번째</p>

이렇게 있으면



.box1 p:nth-child(2n) {

}

이라고 했을때

두번째, 네번째 p태그에 각각 적용된다.

---

#5 hover(마우스 오버에 적용)

 

.class:hover {

}

예시로는

.button1:hover {

}

이렇게 사용한다.