CSS:has(.parent 선택기)👪

:has() is essentially the long-awaited parent selector in CSS 🎊

Don’t say Safari is always last. Sometimes we are first.

그러나 이번'Safari first'를 축하하기 전에 2022년 초에 학부모 선택기를 테스트할 브라우저가 없을 수도 있습니다.사파리는 현재 업데이트 중입니다.

CSS에서 더 이상 사라지지 않음

현재 CSS에는 부모 선택기가 더 이상 부족하지 않습니다. Firefox와 Chromium이 빨리 따라가기를 바랍니다.

부모 선택기는 무엇을 선택합니까?

부모 선택기에서 부모 요소를 선택하시겠습니까?그들은 실제로도 조부모와 일치하는 조상을 선택할 것이다.
나는 유일하게 :has()가'어린이 선택기'라고 생각하는 사람이 아니다. 그래서 나는 그들을'has 선택기'라고 불러서 오해를 피해야 하는가?
나에게 있어서 이것은 듣기에 적당한 묘사이다.
시작caniuse.com/css-has:

For example, a:has(>img) selects all <a> elements that contain an <img> child.

The :has() CSS pseudo-class is documented well on MDN .

성능 고려 사항

이 계획을 실시하는 데 이렇게 많은 시간이 걸렸는데, 주요 원인은 비싼 계산을 걱정하기 때문이다.문서에 실시간으로 적용될 때 부모 선택기는 사이트의 속도와 성능에 영향을 줄 수 있습니다.
Chris Coyier cited Jonathan Snook (back in 2010) "동적으로 요소를 추가하고 페이지에서 요소를 삭제하면 문서 전체가 다시 나타날 수 있습니다(주요 메모리 사용 문제).
우리가 진정으로 부모 선택기를 사용하기 시작했을 때, 아마도 우리는 각별히 조심스럽게 우리의 성능을 평가해야 할 것이다.

성능 문제 방지:

업데이트: 성능 문제가 해결되었을 수 있습니다.Eric Meyer는 성능 문제를 회피하는 방법에 대해 상세하게 설명하는 nerdy에 관한 강연을 언급했다.
이후에 나는 윙크 엔진의 전략이 어느 정도에 국제 장기 엔진의 효율과 유사하다고 말하고 싶다. 그것은 모든 가능한 조합 동작의 모든 가능한 결과를 예측하지 않고 상관없는 동작을 신속하게 무시하는 방법을 알아야 한다.
CSS의 경우 깜빡임 엔진이 관련되지 않은 요소를 반복하거나 무효화하는 것을 방지합니다.스타일을 적용한 후 상관없는 재계산을 줄이기 위해 엔진은 재계산 기간에 스타일이 :has() 상태 변경의 영향을 받았는지 표시할 수 있다.
하지만 이병우는 부선택기를 실현하는 문제와 해결 방안의 세부 사항을 설명해 달라고 했다.
그의 해석에는 복잡한 용례가 포함되어 있다. 예를 들면,.a:has(.b ~ .c)혹은.a:is(:has(b), :has(c))정말!나는 심지어 이것이 유효한 CSS일지도 모른다.
영원히 공부를 멈추지 마라!코드 심사에서 이런 코드를 보여주지 마세요.이해하기 쉽고 유지하기 쉬운 인간 뇌로 재구성해 달라고 할지도 몰라!

실제 용례

보시다시피 많은 사람들이has선택기를 어떻게 사용하는지 디자인하려고 노력하고 있습니다. 행운의 당신!
다음은 현실 세계의 예이다. 나는 이전에 이미 복원된 Shopware 테마를 복원해야 한다. 게다가 이것은 매우 긴급하기 때문에 적어도 노선도의 이 부분에 깨끗한 코드가 없다.
여기!important를 사용하면 CMS에서 생성된 태그에서 실수로 잘못된 요소를 찾을 위험을 줄일 수 있습니다.선택기가 너무 길어서 스크롤을 해야만 모든 내용을 볼 수 있습니다.

/* override template heading style */
body.is-act-index .cms-sections .col-12 .cms-element-alignment.align-self-start {

:has()를 사용하면 최소한 복구가 더욱 명확해집니다.

/* override template heading style */
body.is-act-index .cms-element-alignment:has(> h1) {

우리는 단지 읽을 수 있도록 코드를 작성했을 수도 있다.하지만 브라우저 지원을 확보해야 합니다.

Polyfill:has() 선택기는 어떻게 사용합니까?

최근 CSS 구문에서 부모 선택기를 우회할 수 없으므로 이를 전송할 수 없습니다.PostCSS 또는 SASS를 기대하지 마세요!이번에는 기존 브라우저를 채우려면 JavaScript가 필요합니다.
"기본적으로 영원히 jQuery의 라이브러리에:has 선택기가 있습니다"Eric Ponto wrote in 2015 already. jQuery 기반polyfill:

Polyfill({
    selectors: [":has"]
}).doMatched(rules => {
    rules.each(rule => {
        // just pass it into jQuery since it supports `:has`
        $(rule.getSelectors()).css(rule.getDeclaration())
    });
});

퀴즈: 어떻게 jQuery를 사용하지 않은 상황에서 다각형을 채웁니까?

테스트에 참가하여 해결 방안을 제출하세요!

// TODO: add a parent selector polyfill without using jQuery

해결 방안을 알고 있다면 StackOverflow question if there is a vanilla JS equivalent of jQuery .has()의 답안으로 발표할 수도 있습니다.

querySelectorAllWithHas

Josh Larson's polyfill-css-has 제공has(링크 감사합니다!)
그러나 우리는 이미 부모 선택기가 없는 상황에서 이렇게 오랫동안 살았다. 아마도 우리는 더 이상 걱정하지 않고 CSS 언어의 다음 업그레이드를 계속 진행할 것이다.

CSS의 다음 단계는 무엇입니까?

2022년 CSS는 어떤 이점을 제공합니까?
또한 더 많은 유용한 기능이 개발 중이다. 예를 들어CSS Container Queries 우리는 Chrome과 Edge에서 이러한 기능을 사용할 수 있다. 방법은 기능 표지를 사용하여 그것들을 활성화하는 것이다.
본고는 2022년부터 이러한 기능을 배우고 사용할 수 있는 새로운 CSS 기능을 소개하는 작은 시리즈의 일부분이다.