CSS 여러개의 클래스 중에 몇번째 이후만 다르게 적용

CSS 여러개의 클래스 중에 몇번째 이후만 다르게 적용

다중 class 에서 특정 위치부터 nth-of-type 을 이용해서 스타일을 다르게 적용할 수가 있습니다.

<style> 

div.idiv { background-color:red; }

div.idiv:nth-of-type(n+4) { background-color:yellow; }

</style>

<div class="idiv"> 1 line </div>

<div class="idiv"> 2 line </div>

<div class="idiv"> 3 line </div>

<div class="idiv"> 4 line </div>

<div class="idiv"> 5 line </div>

<div class="idiv"> 6 line </div>

<div class="idiv"> 7 line </div>

위 예제는 4번째 부터 적용하라는 의미 입니다.

아래는 2, 4, 6 번째를 적용하는 예제입니다.

<style> 

div.idiv { background-color:red; }

div.idiv:nth-of-type(2) { background-color:yellow; }

div.idiv:nth-of-type(4) { background-color:yellow; }

div.idiv:nth-of-type(6) { background-color:yellow; }

</style>

<div class="idiv"> 1 line </div>

<div class="idiv"> 2 line </div>

<div class="idiv"> 3 line </div>

<div class="idiv"> 4 line </div>

<div class="idiv"> 5 line </div>

<div class="idiv"> 6 line </div>

<div class="idiv"> 7 line </div>