CSS 가상클래스 (2)_순서 가상클래스[1] (nth-child, nth-of-type)

이번에는 순서를 부여하는 가상클래스를 알아보았다.

 

 nth-child 

nth-child는 순서를 부여하는 가상클래스이다.

(가장 대표적인 순서부여 가상클래스)

 

사용법

선택자:nth-child(순서)

(띄어쓰기는 역시 X)

 

예시

<div class="box">
    <div></div>
    <div></div>
    <div></div>
    <div></div>
</div>

 

.box {
    border: 5px solid #000;
    width: 1000px;
    text-align: center;
}
.box div {
    border: 5px solid #000;
    margin: 10px;
    width: 200px;
    height: 200px;
    display: inline-block;
}

위와 같이 부모요소인 'box'클래스에 4개의 자식요소가 있다.

 

이 4개의 요소에 순서를 부여해보면

 

.box div:nth-child(1) {
    background-color: dodgerblue;
}
.box div:nth-child(2) {
    background-color: red;
}
.box div:nth-child(3) {
    background-color: blueviolet;
}
.box div:nth-child(4) {
    background-color: gold;
}

왼쪽부터 1, 2, 3, 4번째로 순서가 부여가 되었다!

 

 

하지만 주의할 점이 있다.

<div class="box">
    <p>hello</p>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
</div>

 

CSS부분은 변경하지 않고 자식요소에 p태그를 추가하였다.

자식요소 중 div태그에 순서를 부여하였지만,

엉뚱한 p태그도 함께 카운트를 해버렸다.

(2, 3, 4, 5번으로 순서가 밀림)

 

즉, nth-child는 단지 출현 순서를 따진다.

(태그를 구분하지 않고!)

---

이를 해결하기 위한 다른 방법이 있다.

 

nth-of-type

nth-of-type은 태그를 구분하여 순서를 부여한다.

.box div:nth-of-type(1) {
    background-color: dodgerblue;
}
.box div:nth-of-type(2) {
    background-color: red;
}
.box div:nth-of-type(3) {
    background-color: blueviolet;
}
.box div:nth-of-type(4) {
    background-color: gold;
}

위처럼 해당 선택자에게만 순서가 적용이 된 것을 알 수있다.