:has는 용서할 수 없는 선택자입니다.

:has는 용서할 수 없는 선택자입니다.

타임 스탬프 : 11 년 2023 월 9 일 오전 18:XNUMX
:has는 PlatoBlockchain Data Intelligence의 엄격한 선택기입니다. 수직 검색. 일체 포함.

출판 과정에서 작은 일이 일어났습니다. CSS :has() 선택자 olmanac에. 제가 원래 설명했던 :has() 하나 이상의 항목이 유효하지 않은 경우에도 인수의 모든 항목이 평가된다는 아이디어입니다.

/* Example: Do not use! */
article:has(h2, ul, ::-scoobydoo) { }

만나다 ::scoobydoo 거기에? 그것은 완전히 유효하지 않습니다. 용서하는 선택자 목록은 해당 가짜 선택자를 무시하고 다음과 같이 작성된 것처럼 나머지 항목을 평가합니다.

article:has(h2, ul) { }

:has() 참으로 용서하는 선택자였습니다 7년 2022월 XNUMX일자 이전 초안에서. 그러나 그것은 바뀌었다 문제가 보고된 후 용서하는 성격이 jQuery와 충돌할 때 :has() 복잡한 선택자를 포함합니다(예: header h2 + p). W3C는 다음과 같은 결의에 도달했습니다. 확인 :has() "용서할 수 없는" 선택자 몇 주 전에

그래서, 우리의 이전 예? 가짜 선택자가 유효하지 않기 때문에 전체 선택자 목록이 유효하지 않습니다. 그러나 다른 두 개의 용서 선택자는 :is() 및 :where(), 변경되지 않습니다.

이에 대한 약간의 해결 방법이 있습니다. 기억하다, :is() 및 :where()용서한다 해도 :has() 아니다. 즉, 이러한 선택기 중 하나를 중첩할 수 있습니다. :has() 더 관대한 행동을 하려면:

article:has(:where(h2, ul, ::-scoobydoo)) { }

어떤 것을 사용하느냐가 중요할 수 있습니다. :is() 목록에서 가장 구체적인 항목에 의해 결정됩니다. 따라서 덜 구체적인 것이 필요한 경우 다음 항목에 도달하는 것이 좋습니다. :where() 특이성 점수에 추가되지 않기 때문입니다.

/* Specificity: (0,0,1) */
article:has(:where(h2, ul, ::-scoobydoo)) { } /* Specificity: (0,0,2) */
article:has(:is(h2, ul, ::-scoobydoo)) { }

최신 정보를 반영하기 위해 몇 가지 게시물을 업데이트했습니다. 야생에서 업데이트가 필요한 많은 다른 사람들을 보고 있으므로 동일한 작업을 수행해야 하는 모든 사람을 위한 약간의 공익 광고입니다.

타임 스탬프 :

더보기 CSS 트릭