CSS 상위 선택자

CSS는 cascading stylesheets의 약자로, 기본적으로 페이지에서 나중에 있는 항목이 이전 항목보다 우선합니다(with some major caveats ). 이는 지금까지 부모를 선택할 방법이 없었던 부모에서 자식으로 요소를 선택하는 방법에도 적용됩니다.

CSS Selectors 4 사양에서 CSS는 :has() 라는 새로운 선택기를 도입하여 최종적으로 부모를 선택할 수 있게 합니다. 이것이 의미하는 바는 그 안에 있는 특정 자식has인 CSS 요소를 대상으로 지정할 수 있다는 것입니다. 이는 이미 Safari에서 지원되며 Chrome 105에서도 지원됩니다. 전체 지원 표는 다음과 같습니다.



지원이 증가함에 따라 이 기사에서는 CSS 상위 선택이 작동하는 방식과 현재 지원이 가능한 곳에서 이를 수행할 수 있는 방법에 초점을 맞출 것입니다. 그동안 모든 브라우저에서 전체 지원이 필요한 경우 기본 CSS 지원이 제공될 때까지 가능합니다implement this polyfill.

CSS에서 상위 선택자가 작동하는 방식

CSS에서 무언가를 선택하려면 DOM을 내려가는 선택기를 사용합니다. 예를 들어 p 태그 내에서 div 태그를 선택하면 다음과 같습니다.

div p {
    color: red;
}

지금까지는 div 태그가 포함된 p 태그를 실제로 선택할 수 없었기 때문에 Javascript에 의존해야 했습니다. 이것이 CSS에서 구현되지 않은 주된 이유는 수행하는 데 비용이 많이 드는 작업이기 때문입니다. CSS는 상대적으로 구문 분석이 빠르지만 상위 태그를 선택하려면 상대적으로 상당히 많은 양의 처리가 필요합니다.
:has 선택자를 사용하여 이제 div 자식이 있는 p 요소 또는 선택자의 일반적인 조합을 선택할 수 있습니다. 예를 들어 하위div가 있는 p를 선택하면 이제 다음과 같이 표시됩니다.

/* Makes the div color: red; */
div:has(p) {
    color: red;
}

이렇게 하면 자식div이 있는 모든p이 빨간색이 됩니다.

상위 선택을 다른 선택기와 결합

다른 CSS 선택기와 마찬가지로 특정 상황에 대해 이것을 결합할 수 있습니다. 예를 들어, 직계 하위div가 있는 태그span만 선택하려는 경우:

div:has(> span) {
    color: red;
}

:has의 어휘에서 알 수 있듯이 부모 선택에만 국한되지 않습니다. 예를 들어, 아래에서 형제span인 :has를 선택할 수 있습니다.

span:has(+ div) {
    color: red;
}

또는 div 선택기를 사용하여 자식이 없는 요소를 선택합니다. 예를 들어, 다음은 :not() 자식이 없는 div를 선택합니다.

div:not(:has(p)) {
    color: red;
}

CSS에서 텍스트만 포함하는 요소 선택

CSS에서 매우 흔한 문제 중 하나는 p 태그가 텍스트를 포함하는 요소를 선택하지 않는다는 것입니다. 따라서 때때로 요소는 하나의 공백을 포함할 수 있으며 :empty는 적용되지 않습니다. :empty 선택기는 텍스트 노드만 포함하고 다른 자식 요소는 포함하지 않는 요소를 선택할 수 있는 기능을 제공합니다.

이것은 공백이 있는 단순한:has 요소에 대한 완벽한 솔루션은 아니지만(텍스트만 있고 추가 HTML DOM 요소가 없는 모든 요소를 ​​선택하므로) 텍스트 노드만 있는 DOM 요소를 선택할 수 있는 기능을 제공합니다. 이전에는 불가능했습니다. 다음 코드를 사용하여 이를 달성할 수 있습니다.

div:not(:has(*)) {
    background: green;
}

결론

Chrome 105에 :empty 선택기 지원이 추가되면서 부모 선택이 빠르게 현실화되고 있으며 곧 실제 프로젝트에서 사용할 수 있게 될 것입니다. 현재로서는 Safari 지원을 통해 쉽게 테스트하고 향후 어떻게 작동할지 확인할 수 있습니다. 이는 많은 애플리케이션과 제품에서 흔히 볼 수 있는 상위 선택에 대한 Javascript 솔루션을 줄일 수 있는 추가 이점이 있습니다.

this polyfill 도 구현하는 경우 오늘 :has() 사용을 시작한 다음 Chrome 및 기타 브라우저에 기본 지원이 제공되면 폴리필을 제거할 수도 있습니다.

이 기사를 즐겼기를 바랍니다. To learn more about CSS, click here .