[css] 행에서 첫 번째와 마지막 TD를 선택하는 방법은 무엇입니까?

TD행에서 첫 번째와 마지막 을 어떻게 선택할 수 있습니까?

tr > td[0],
tr > td[-1] {
/* styles */
}

:first-child및 :last-child의사 선택기를 사용할 수 있습니다 .

tr td:first-child,
tr td:last-child {
    /* styles */
}

이것은 모든 주요 브라우저에서 작동해야하지만 IE7에는 요소가 동적으로 추가 될 때 몇 가지 문제가 있습니다 (IE6에서는 작동하지 않음).

다음 스 니펫을 사용할 수 있습니다.

  tr td:first-child {text-decoration: underline;}
  tr td:last-child {color: red;}

다음 의사 클래스 사용

: first-child 는 “이 요소 가 부모 의 첫 번째 자식 인 경우이 요소를 선택합니다”를 의미 합니다.

: last-child 는 “이 요소 가 부모 의 마지막 자식 인 경우이 요소를 선택합니다”를 의미 합니다.

요소 노드 (HTML 태그) 만 영향을받으며 이러한 유사 클래스는 텍스트 노드를 무시합니다.

: first-child 및 : last-child를 사용할 수 있습니다 pseudo-selectors.

tr td:first-child{
    color:red;
}
tr td:last-child {
    color:green
}

또는 다른 방법으로 사용할 수 있습니다

// To first child 
tr td:nth-child(1){
    color:red;
}

// To last child 
tr td:nth-last-child(1){
    color:green;
}

두 방법 모두 완벽하게 작동합니다

sass (scss)를 사용하는 경우 다음 스 니펫을 사용할 수 있습니다.

tr > td{
   /* styles for all td*/
   &:first-child{
     /* styles for first */
   }
   &:last-child{
    /* styles for last*/
   }
 }

행 th앞에 선행 (또는 후행) 태그 가 포함 된 경우 및 선택기를 td사용해야합니다 . 그렇지 않으면 행의 첫 번째 요소가 아닌 첫 번째 요소는 선택되지 않습니다.:first-of-type:last-of-typetd

이것은 다음을 제공합니다.

td:first-of-type, td:last-of-type {
    /* styles */
}