[퍼블] 가상클래스의 순서

자식 클래스의 순서를 지정하여 디자인해 주는 기능

• nth-child
• nth-of-type

nth-child 기능은 태그에 영향을 받지 않고 무조건 순서에 영향을 받는다.

    <div class="test">
        <div>test1</div>
        <div>test2</div>
    </div>

 

 

.test{
    border: 1px solid black;
    width: 300px;
}

.test div{
    font-size: 30px;
}


.test div:nth-child(1){
    color: blue;
}
.test div:nth-child(2){
    color: red;
}

nth-child 결과

css에서 nth-child를 주었을 경우 태그의 구분과 상관없이 위에서부터 순서로 css가 지정된 것을 볼 수 있다. 하지만 nth-of-type을 적용한다면 순서와 타입을 지정하여 할 수 있다.

    <div class="test">
        <div>test1</div>
        <h2>h2 test</h2>
        <div>test2</div>
    </div>

 

 

.test{
    border: 1px solid black;
    width: 300px;
}

.test div{
    font-size: 30px;
}


.test div:nth-of-type(1){
    color: blue;
}
.test div:nth-of-type(2){
    color: red;
}

nth-of-type결과

html을 보면 중간에 h2태그가 추가되어 자식 요소의 순서가 바뀌었다. 이때 nth-child를 사용하게 된다면 test2 이 부분을 nth-child(3)으로 변경해야 되는 번거로움이 있지만 nth-of-type을 사용하게 된다면 중간에 h2태그가 추가가 되어서 수정할 필요가 없다.

 

• first-child
• last-child

first-child 태그를 사용하면 자식 태그 중 첫번째에 디자인을, last-child를 이용하면 자식 태그 중 마지막에 디자일을 입힐 수 있다.

   <div class="box">
        <div>test1</div>
        <div>test2</div>
        <div>test3</div>
    </div>

 

 

.box{
    border: 1px solid black;
    width: 400px;
}

.box div{
    font-size: 30px;
}

.box div:first-child{
    color: blue;
}

.box div:last-child{
    color: red;
}

first-child, last-child

위와 같이 first-child를 사용한 태그에는 파란색, last-child를 입힌 색에는 빨간색을 입힌 걸 볼 수 있다.