jQuery 자식선택자와 자손선택자에 있는 태그를 적용하고 싶을때

제이 쿼리에서 빠르게 CSS를 적용하거나 이벤트를 주려고 할 때 우리가 가장 알아야 할 것은, 선택자의 위치가 아닐까 싶은데요. 오늘은 자식선택자와 자손선택자 태그를 적용하고 싶을 때 어떻게 해야 할지에 대해서 포스팅해 보겠습니다.

서론 : '>'를 사용하기

자식선택자는 지난주에 포스팅한 필터링 메서드를 사용합니다 기호 '>'를 사용해서 속성값이 부모요소와 자식요소를 작성해 주면 부모요소 안에 있는 자식요소의 태그를 적용할 수 있다는 장점이 있죠.

 

만일 $('li > span')을 작성하면 모든 리스트 안에 span 태그가 적용이 되는데요. 그중에서 원하는 요소만 css를 주기 위해서 '. eq'를 추가해서 인덱스 값을 부여합니다.

    $('li > span').eq(1).css('color', 'green');

본론 :

1. nth-child()와 nth-last-child()

같은 부모 요소를 가지는 형제 요소 중에서 특정 순서에 있는 요소를 선택하고 싶을 때는 어떻게 해야 할까요? 이때는 nth-child()를 사용할 수 있는데요. 이 때 조금은 비교해 볼 대상이 있다면 nth-lastchild() 인데요. 이 둘의 차이는 앞에서부터 인덱스 값을 설정하냐, 혹은 뒤에서 설정해야 한다.

 

이때 들어가는 인수로는 괄호 안에, 숫자, 연산식을 넣어야 합니다. 인수에 작성할 때도, 곱하기는 숫자가 앞에 와야 하고 더하기 빼기는 뒤에 와야 합니다.

* nth-child와 nth-last-child의 경우에는, 인덱스 번호가 1부터 시작한다는 점을 잊으면 안 됩니다.

 

    //이와 반대로 nth-last-child, nth-child는 반대로할수잇는데
    //시작하는 숫자가 모두 1부터 시작을 합니다. 인덱스번호가 아닙니다.
     $('li:nth-child(1)').css('backgoundColor', 'pink');
     $('li:nth-last-child(2)').css('backgoundColor', 'green');

1-1 홀수번호와 짝수번호를 가져오기

    //n은 자동으로 0부터 1씩 증가하는 정수이고 '+,-,*' 연산을 할 수 있다.

     $('li:nth-child(2n +1)').css('backgroundColor','red'); //너가 가진 요소 중 홀수번호를 출력해라
     $('li:nth-child(2n)').css('backgroundColor','green'); //너가 가진 요소 중 짝수 번호를 출력해라

     $('li:nth-child(odd)').css('backgroundColor', 'red'); //2n+1 대신 odd를 사용할 수 있습니다.(홀수)
     $('li:nth-child(even)').css('backgroundColor', 'yellowgreen'); //2n 대신 even을 사용할 수 있습니다(짝수)

1-2n번째 요소부터  n번째 요소에 적용하고 싶다면? ex) 3번째부터 6번째 요소에 조건 설정하기

    //만약? 3. 6을 색깔을 주고 싶다면? 

    $('li:nth-child(3n)').css('backgroundColor', 'orange');

    //3째부터 모두 선택하기

    $('li:nth-child(n+3)').css('backgroundColor','yellow');

1-3. 첫 번째 자식요소 배경색 지정하기, 마지막 자식 요소 조건 설정하기

function a7(){
    $('li:first-child').css('backgroundColor','tomato');
}

function a8(){
    $('li:last-child').css('backgroundColor','green');
}