CSS 부모를 선택하는 방법이 있을까?

질문 : CSS 부모 선택기가 있습니까?

---

앵커 요소의 직접 부모 인 <li> 요소를 어떻게 선택합니까?

예를 들어 내 CSS는 다음과 같습니다.

li < a.active {     property: value; } 

분명히 JavaScript로이 작업을 수행하는 방법이 있지만 CSS 레벨 2에 기본적으로 존재하는 일종의 해결 방법이 있기를 바랍니다.

내가 스타일링하려는 메뉴가 CMS에 의해 분출되고 있으므로 활성 요소를 <li> 요소로 이동할 수 없습니다 ... (내가 원하지 않는 메뉴 생성 모듈을 테마로하지 않는 한) .

어떤 아이디어?

답변

---

현재 CSS에서 요소의 부모를 선택할 수있는 방법이 없습니다.

방법이 있다면 현재 CSS 선택기 사양 중 하나에있을 것입니다.

• 선택기 레벨 3 사양
• CSS 2.1 선택기 사양

즉, Selectors Level 4 Working Draft 에는이 기능을 제공 :has() 의사 클래스가 포함되어 있습니다. jQuery 구현 과 유사합니다.

li:has(> a.active) { /* styles to apply to the li tag */ } 

그러나 2021 년 현재는 어떤 브라우저에서도 지원되지 않습니다 .

그동안 부모 요소를 선택해야하는 경우 JavaScript를 사용해야합니다.

출처 : https://stackoverflow.com/questions/1014861/is-there-a-css-parent-selector