관리 메뉴

맛집 여행 캠핑 일상 생활

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

HTML.CSS

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

♥ 영은파더♥ 2017. 2. 1. 17:37

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>


Trackback : 0 | Comments : 0
댓글쓰기 폼