하위 그룹화를 위한 파악하기 어려운 CSS 선택기

CSS는 스타일 요소에 대한 강력한 옵션을 제공하지만 주목할만한 부재 중 하나는 하위 항목을 쉽게 그룹화하는 기능입니다. . 이러한 제한은 열 머리글과 셀 모두에 동일한 스타일을 할당하려면 번거로운 선택기가 필요한 HTML 테이블과 같은 복잡한 요소의 스타일을 지정할 때 더욱 분명해집니다.

하위 스타일 스타일링의 딜레마

다음 테이블 예를 고려하십시오.

  ...
  

단일 선택기로 제목과 셀의 스타일을 모두 지정하려면 일반적으로 다음을 사용합니다.

#myTable th, #myTable td {}

그러나 이 접근 방식은 많은 수의 요소를 처리할 때 장황하고 지루합니다.

(th, td) 선택기: 놓친 기회

더 직관적입니다. 구문은 다음과 유사한 그룹화 선택기를 사용하는 것입니다.

#myTable (th, td) {}

안타깝게도 이러한 구문은 CSS에 존재하지 않습니다.

2008년 이전 제안의 무익함

나중에 하위 그룹 선택기가 없다는 사실은 오랫동안 문제가 되어 왔습니다. 2008년에 제안된 :any() 의사 클래스와 같은 것을 도입하려는 초기 시도는 관심을 끌지 못했습니다.

최근 개발 및 희미한 희망

그러나 선택자 레벨 4 작업 초안에서는 그룹화 가상 클래스인 :matches() 개념을 다시 도입했습니다. 이 제안은 가능성을 보여주지만 브라우저 지원은 아직 멀었습니다.

대체 솔루션

그동안 하위 그룹화에 대한 몇 가지 해결 방법이 있습니다.

• * 선택기 사용:

  #myTable tr > * {}

  (여기서는 tr 요소에 td 또는 th 요소만 포함되어 있다고 가정하고 다른 요소 아님)

• 최대 성능을 위해 장황한 td 접근 방식 고수

결론

CSS의 하위 그룹 선택기는 수년 동안 지속적인 문제였습니다. 최근 제안이 희미한 희망을 제시하고 있지만 광범위한 브라우저 지원은 여전히 ​​어렵습니다. 그때까지 개발자는 대체 접근 방식에 의존하거나 기존 th, td 선택기의 장황함을 포기해야 합니다.