형제 요소 중 an+b번째 요소들을 선택하는 선택자 - :nth-child()

nth-child는 형제 요소 중 an+b번째 요소들을 선택하는 선택자입니다.
2 min read

:nth-child()

:nth-child()는 형제 요소 중 an+b번째 요소들을 선택하는 선택자입니다.

 

기본형

$( ':nth-child(an+b) )
  • a와 b는 상수, n은 변수입니다.
  • n에는 음이 아닌 정수(0, 1, 2, 3, ···)가 차례대로 대입됩니다.
  • an+b 대신에 even, odd를 사용할 수 있습니다.

 

예제

$( 'ol li:nth-child(2)' )

  • ol 요소의 자식 요소인 li의 형제 요소 중에서 두 번째 요소를 선택합니다.
<ol>
  <li>One</li>
  <li>Two</li>
  <li>Three</li>
  <li>Four</li>
  <li>Five</li>
  <li>Six</li>
  <li>Seven</li>
  <li>Eight</li>
  <li>Nine</li>
  <li>Ten</li>
</ol>
.red {
  color: red;
}
jQuery( document ).ready( function() {
  $( 'ol li:nth-child(2)' ).addClass( 'red' );
});

 

$( 'ol li:nth-child(2n+1)' )

  • n=0일 때 1, n=1일 때 3, n=2일 때 5, ···이므로, 홀수 번째 요소를 선택합니다.
$( 'ol li:nth-child(2n+1) ).addClass( 'red );

 

$( 'ol li:nth-child(3n+5)' )

  • n=0일 때 5, n=1일 때 8, n=2일 때 11, ···이므로, 다섯 번째 요소, 여덟 번째 요소, 열한 번째 요소, ···를 선택합니다.
$( 'ol li:nth-child(3n+5) ).addClass( 'red );

 

$( 'ol li:nth-child(odd/even)' )

  • odd는 홀수 번째 요소를, even은 짝수 번째 요소를 선택합니다.
$( 'ol li:nth-child(even) ).addClass( 'red );

 

$( 'ol li.abc:nth-child(2n+1)' )

  • ol 요소의 자식 요소 li의 홀수 번째 요소 중에서 클래스 값으로 abc를 갖는 요소를 선택합니다.
  • 클래스 값으로 abc를 갖는 요소 중에서 홀수 번째를 선택하는 게 아니라는 것에 주의합니다.
<ol>
  <li class="abc">One</li>
  <li class="abc">Two</li>
  <li class="abc">Three</li>
  <li class="abc">Four</li>
  <li class="abc">Five</li>
  <li class="abc">Six</li>
  <li class="abc">Seven</li>
  <li class="abc">Eight</li>
  <li class="abc">Nine</li>
  <li class="abc">Ten</li>
</ol>
.red {
  color: red;
}
$( 'ol li.abc:nth-child(2n+1)' ).addClass( 'red' );

You may like these posts

  • .has() .has()로 특정 요소를 가지고 있는 요소를 선택할 수 있습니다.   기본형 .has( selector ) 예를 들어 $( 'h1' ).has( 'span' ) 은 span 요소를 가지고 있는 h1 요소를 선택합니다.   예제 span 요소를 포함하고 있는 h1…
  • .html() .html()은 선택한 요소 안의 내용을 가져오거나, 다른 내용으로 바꿉니다. .text()와 비슷하지만 태그의 처리가 다릅니다.   기본형 1 .html() HTML 태그를 포함하여 선택한 요소 안의 내용을 가져옵니다. 예를 들어 var abc = $( 'h1' )…
  • .get() .get()은 선택한 요소를 배열(Array)로 가져옵니다.   기본형 .get() 선택한 모든 요소를 가져옵니다. .get( index ) 선택한 요소 중 특정한 것만 가져옵니다.   예제 1 모든 <li> 요소를 abc 배열로 가져온 후…
  • .find() .find()는 어떤 요소의 하위 요소 중 특정 요소를 찾을 때 사용합니다.   기본형 .find( selector ) 예를 들어 $( 'h1' ).find( 'span' ) 은 h1 요소의 하위 요소 중 span 요소를 선택합니다.   예제 클래스 값으로…
  • .fadeToggle() .fadeToggle()은 보이는 요소는 보이지 않게, 보이지 않는 요소는 보이게 합니다.   기본형 .fadeToggle( [ duration ] [, easing ] [, complete ] )   duration duration에는 사라지거나 …
  • .hide() .hide()는 선택한 요소를 사라지게 합니다.   기본형 1 .hide() 선택한 요소를 즉시 사라지게 합니다.   기본형 2 .hide( duration [, easing ] [, complete ] ) duration : 사라지는 데 걸리는 시…

Post a Comment