CSS 선택기가 다른 요소의 상태에 따라 요소를 대상으로 지정할 수 있습니까?

CSS로 다른 요소의 상태에 따라 요소를 선택하는 방법

소개

특정 요소를 타겟팅하는 것은 항상 CSS의 기본 측면이었습니다. 그러나 페이지의 다른 요소 상태에 따라 요소의 스타일을 지정해야 할 경우 복잡성이 발생합니다. 이 문서에서는 현재 CSS 선택기의 제한 사항을 살펴보고 향후 표준의 잠재적인 솔루션을 소개합니다.

현재 CSS 선택기의 제한 사항

CSS 선택기에는 요소 선택에 몇 가지 제한 사항이 있습니다. 다른 사람의 상태를 기준으로 합니다. 첫째, 상위 선택자나 이전 형제 선택자를 사용하여 요소의 상태에 직접 액세스할 수 없습니다. 둘째, 선택기의 주제로 단일 요소만 타겟팅할 수 있으므로 조건에 따라 여러 요소에 스타일을 적용할 수 없습니다.

예: 호버 상태를 기반으로 요소 타겟팅

한 페이지에 여러 섹션이 있다고 가정해 보겠습니다. 각 섹션에는 해당 상태를 나타내는 "완료" 데이터 속성이 있는 div가 포함되어 있습니다. "finished" 속성이 있는 div를 마우스로 가리킬 때마다 다음 섹션에서 깜박이고 회전하는 요소에 색상 테두리를 추가하려고 합니다. 이에 대한 간단한 CSS 선택기는 다음과 같습니다.

section:hover + section .blink,
section:hover + section .spin {
  border: 1px solid red;
}

그러나 CSS에는 첫 번째 섹션의 div를 대상으로 하는 상위 선택기가 없기 때문에 작동하지 않습니다.

잠재적인 해결책: Selectors 4 및 :has()

다가오는 Selectors 4 초안에서는 이 문제를 해결하는 :has()라는 의사 클래스입니다. :has()를 사용하면 특정 자손이 있는 요소를 선택할 수 있습니다. 사용된 요소의 하위 항목과 일치하는 상대 선택기 인수를 사용합니다.

위 문제에 대해 :has()를 사용하는 솔루션은 다음과 같습니다.

section:has(div[data-status~=finished]) + section div:matches(.blink, .spin) {
  border: 1px solid red;
}

여기서: has()는 선택기가 "완료" 상태의 div가 포함된 섹션만 대상으로 지정하도록 합니다. 또한 하위 조합자를 :matches()와 결합하여 후속 섹션에서 깜박이는 요소와 회전하는 요소를 모두 대상으로 삼습니다.

결론

현재 CSS 선택기는 선택에 제한이 있습니다. 다른 요소의 상태를 기반으로 하는 요소의 경우 Selectors 4의 곧 출시될 :has() 의사 클래스가 잠재적인 솔루션을 제공합니다. 선택기 구문이 향상되어 더 많은 유연성과 요소의 조건부 타겟팅이 가능해졌습니다.

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