가상 선택자 nth-child

log 2015. 5. 4. 10:28

nth-child(odd)

<ul> 
    <li>홀수에 배경을 빨강빨강하게</li> 
    <li>홀수에 배경을 빨강빨강하게</li> 
    <li>홀수에 배경을 빨강빨강하게</li> 
    <li>홀수에 배경을 빨강빨강하게</li> 
    <li>홀수에 배경을 빨강빨강하게</li>  
</ul>

li:nth-child(odd) {background:red;}

nth-child(even)

p:nth-child(even) {font-weight:bold; color:blue;}

<p>굵은글씨 퍼런색</p> 
<p>굵은글씨 퍼런색</p> 
<p>굵은글씨 퍼런색</p> 
<p>굵은글씨 퍼런색</p>

nth-child(3n+a)

li:nth-child(3n+2) {margin:0 140px;}</style>

<ul> 
  <li>1번이미지</li> 
  <li>2번 이미지</li> 
  <li>3번 이미지</li> 
  <li>4번 이미지</li>
  <li>5번 이미지</li>
  <li>6번 이미지</li>
</ul>

• :nth-child(odd) 홀수에 있는 자손을 선택
• :nth-child(even) 짝수에 있는 자손을 선택
• :nth-child(숫자n+a) 숫자 Xn(n은 0부터 무한대) + a (조건으로 반복) 
• :first-child 첫 번째 위치하는 자손을 선택
• :last-child 마지막 위치하는 자손을 선택
• :nth-last-child(숫자) 마지막에서 수열 번째 있는 자손을 선택