jquery

jQuery - 자식 요소 셀렉터

4월 29, 2019
지정한 요소의 자식 요소를 찾는 탐색자는 다음 표와 같습니다.

이벤트 설 명
:nth-child(an+b) n번째 요소와 유형이 일치하는 요소.
n의 수는 유형에 관계없는 요소를 포함한 수.
  • a: 배수
  • n: 카운터. 0부터 시작
  • b: 시작위치
키워드
  • odd: 홀수로 지정.
  • even: 짝수로 지정.
    Ex.) :nth-child(odd)
:nth-last-child(an+b) 마지막 요소에서 시작해서 n번째 요소와 유형이 일치하는 요소.
n의 수는 유형에 관계없는 요소를 포함한 수.
  • a: 배수
  • n: 카운터. 0부터 시작
  • b: 시작위치
키워드
  • odd: 홀수로 지정.
  • even: 짝수로 지정.
    Ex.) :nth-last-child(odd)
:nth-of-type(n) n번째 요소와 유형이 일치하는 요소.
n의 수는 같은 유형의 요소만 개수를 셉니다.
  • a: 배수
  • n: 카운터. 0부터 시작
  • b: 시작위치
키워드
  • odd: 홀수로 지정.
  • even: 짝수로 지정.
    Ex.) :nth-of-type(odd)
:nth-last-of-type(n) 마지막 요소에서 시작해서 n번째 요소와 유형이 일치하는 요소.
n의 수는 같은 유형의 요소만 개수를 셉니다.
  • a: 배수
  • n: 카운터. 0부터 시작
  • b: 시작위치
키워드
  • odd: 홀수로 지정.
  • even: 짝수로 지정.
    Ex.) :nth-last-of-type(odd)
:first-child 유형에 관계없이 처음 요소가 찾는 요소라면 적용.
:last-child 유형에 관계없이 마지막 요소가 찾는 요소라면 적용.
:first-of-type 같은 유형의 요소가 처음으로 나오는 요소.
:last-of-type 같은 유형의 요소가 마지막으로 나오는 요소.
:first-letter <p>나 <div>태그 같은 블록 태그의 첫 글자에 적용
:first-line <p>나 <div>태그 같은 블록 태그의 첫 라인에 적용
:only-child 자식요소가 유일하고 다른 유형의 요소도 없다면 적용.
Ex.) p:only-child:{ }
<div>
  <p>a</p>
</div>
:only-of-type 다른 유형의 요소가 있어도 자식요소가 하나뿐이라면 적용.
Ex.) p:only-of-type { }
<div>
  <p>a</p>
</div>
<div>
  <p>b</p>
  <s>c</s>
</div>
$().children() 선택한 요소의 모든 자식 요소를 선택


:nth-child(an+b) 와 :nth-last-child(an+b) 클래스

:nth-child(an+b) 는 n번째 자식요소를 선택하고, :nth-last-child(an+b) 는 마지막 요소부터 시작합니다.

a 는 배수, n 은 n 번째 요소, b 는 시작위치이고, 0부터 시작합니다. 태그 유형에 관계없이 n번째인 요소와 유형이 일치하면 선택합니다.

/* (3n + 0) 라면...
   (3 * 0) + 0 = 0 번째 요소는 없음 
   (3 * 1) + 0 = 3 번째 요소에 적용
   (3 * 2) + 0 = 6 번째 요소에 적용
   (3 * 3) + 0 = 9 번째 요소에 적용하라.
   ...
   따라서 (3n + 0) 과 (3n) 은 결과가 같음.

   (2n + 4) 라면...
   (2 * 0) + 4 = 4 번째 요소
   (2 * 1) + 4 = 6 번째 요소
   (2 * 2) + 4 = 8 번째 요소.
   (2 * 3) + 4 = 10 번째 요소에 적용하라.
   ...
*/
:nth-child(an+b)
:nth-child(an)

/* 값이 3 이면 3 번째 요소에만 적용함. */
:nth-child(n)

/* :nth-child(2n) 과 동일하게 홀수로 적용 */
:nth-child(odd)
/* :nth-child(2n+1) 과 동일하게 짝수로 적용 */
:nth-child(even)

다음 예제는 짝수로 스타일을 적용합니다.

<style>
#use-nth {
  border: 1px solid;
  width: 200px;
  padding: 10px;
}
</style>

<script>
$(function(){
  /* div:nth-child(2n) 과 동일한 결과를 얻음. */
  $("#use-nth div:nth-child(even)").css("background", "#CCC");
});
</script>

<div id="use-nth">
  <div>알 수 없는 브라우저</div>
  <div>사파리</div>
  <div>크롬</div>
  <div>엣지</div>
  <div>파이어폭스</div>
  <div>익스플러어</div>
  <div>기타</div>
</div>


다음은 2의 배수로 설정했는데, 태그의 유형이 같은 4번째 요소에만 스타일이 적용되었습니다.

<style>
#use-nth {
  border: 1px solid;
  width: 200px;
  padding: 10px;
}
</style>

<script>
$(function(){
  $("#use-nth div:nth-child(2n)").css("background", "#CCC");
});
</script>

<div id="use-nth">
  <!-- 1번째 요소 -->  
  <div>알 수 없는 브라우저</div>
  <!-- 2번째 요소 - 유형이 달라서 불일치 -->
  <aa>사파리</aa>
  <!-- 3번째 요소 -->
  <div>크롬</div>
  <!-- 4번째 요소 - div와 유형이 같아서 일치 -->
  <div>엣지</div>
  <!-- 5번째 요소 -->
  <div>파이어폭스</div>
  <!-- 6번째 요소 - 유형이 달라서 불일치 -->
  <bb>익스플러어</bb>
  <!-- 7번째 요소 -->
  <div>기타</div>
</div>



:nth-of-type(an+b) 와 :nth-last-of-type(an+b) 클래스

:nth-child(an+b) 와 기능이 비슷하지만 같은 유형의 요소만 개수를 세고, n번째인 요소를 찾습니다.

a 는 배수, n 은 n 번째 요소, b 는 시작위치이고, 0부터 시작합니다. 같은 유형이 n번째인 요소와 일치하면 적용합니다.

<style>
#use-nth {
  border: 1px solid;
  width: 200px;
  padding: 10px;
}
</style>

<script>
$(function(){
  $("#use-nth div:nth-of-type(2n)").css("background", "#CCC");
});
</script>

<div id="use-nth">
  <!-- 1번째 요소 -->
  <div>알 수 없는 브라우저</div>
  <aa>사파리</aa>

  <!-- 2번째 요소 - 일치 -->
  <div>크롬</div>
  <!-- 3번째 요소 -->
  <div>엣지</div>

  <!-- 4번째 요소 - 일치 -->
  <div>파이어폭스</div>
  <bb>익스플러어</bb>
  <!-- 5번째 요소 -->
  <div>돌핀</div>

  <!-- 6번째 요소 - 일치 -->
  <div>기타</div>
</div>



:first-child 와 :last-child 클래스

:first-child 는 유형에 관계없이 처음 요소가 찾는 요소라면 선택합니다.

<style>
#use-nth {
  border: 1px solid;
  width: 200px;
  padding: 10px;
}
</style>

<script>
$(function(){
  $("#use-nth :first-child").css("background", "#CCC");
  $("#use-nth :last-child").css("background", "yellow");
});
</script>

<div id="use-nth">
  <qq>알 수 없는 브라우저</qq>
  <div>사파리</div>
  <div>크롬</div>
  <pp>기타</pp>
</div>



:first-of-type 과 :last-of-type 클래스

:first-child 와 비슷하지만 같은 유형의 요소가 처음으로 나오는 요소를 찾습니다.

<style>
#use-nth {
  border: 1px solid;
  width: 200px;
  padding: 10px;
}
</style>

<script>
$(function(){
  $("#use-nth aa:first-of-type").css("background", "#CCC");
});
</script>

<div id="use-nth">
  <div>알 수 없는 브라우저</div>
  <div>사파리</div>

  <!-- aa 요소가 처음으로 나오므로 일치 -->
  <aa>크롬</aa>
  <aa>기타</aa>
</div>



$().children() 선택자

다음 예제는 모든 자식 요소의 테두리를 1px 만큼 지정합니다.

<style>
#use-nth {
  border: 1px solid;
  width: 200px;
  padding: 10px;
}
</style>

<script>
$(function(){
  $("#use-nth").children().css("border", "1px solid");
});
</script>

<div id="use-nth">
  <div>알 수 없는 브라우저</div>
  <div>사파리</div>
  <div>크롬</div>
  <div>엣지</div>
  <div>파이어폭스</div>
  <div>익스플러어</div>
  <div>기타</div>
</div>


Tag:

0 Comments

0 댓글