CSS를 사용하여 다른 요소의 상태를 기반으로 요소를 어떻게 선택할 수 있습니까?

CSS를 사용하여 페이지에 있는 다른 요소의 상태에 따라 요소를 선택하는 방법은 무엇입니까?

소개

CSS 본질적으로 다른 요소의 상태만을 기준으로 요소를 선택하는 수단을 제공하지는 않습니다. 그러나 단순 선택자, 조합자 및 요소 간의 상위 관계를 결합하면 특정 시나리오에서 제한된 요소 간 타겟팅을 달성할 수 있습니다.

구조적 관계 및 단순 선택자

CSS 선택기는 문서 트리에 있는 요소의 구조와 상태를 나타냅니다. 유형 선택기, 속성 선택기, 의사 클래스와 같은 단순 선택기는 해당 속성을 기반으로 개별 요소를 식별합니다. 예:

div[data-status~="finished"]

결합자와 관계

>, , ~와 같은 결합자는 요소 간의 관계를 정의합니다. 예를 들어 > 는 자식 관계를 나타내고, 인접한 형제를 나타내며, ~는 모든 형제를 선택합니다. 따라서 다음을 구성할 수 있습니다.

section > div[data-status~="finished"]

기존 선택자의 한계

자식 및 형제 조합자가 있음에도 불구하고 Selector 3에는 역 또는 조부모 선택자가 없습니다. 이로 인해 다음 예와 같이 관련되지 않은 요소의 상태에 따라 요소를 직접 선택할 수 없습니다.

<section>
    <div data-status="finished"></div>
    <section>
        <div>

의사 요소 계층 구조 및 동적 클래스

Clever 의사 요소 계층 구조 및 동적 클래스 조작을 사용하면 요소 간 타겟팅에 대한 해결 방법을 제공할 수 있는 경우가 있습니다. 그러나 이러한 기술은 제한적이며 상당한 코드가 필요합니다.

CSS4의 잠재적 솔루션: :has()

CSS4와 같은 향후 CSS 반복에서는 다음이 수행됩니다. has() 의사 클래스를 사용하면 특정 하위 트리와의 관계를 기반으로 요소를 선택할 수 있습니다. 이는 현재의 한계를 극복할 수 있는 방법을 제공합니다.

section:has(> div[data-status~="finished"]) + section > div.blink

위 내용은 CSS를 사용하여 다른 요소의 상태를 기반으로 요소를 어떻게 선택할 수 있습니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!