[css] CSS 부모 선택기가 있습니까?

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

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

li < a.active {
    property: value;
}

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

스타일을 지정하려는 메뉴가 CMS에 의해 분출되고 있으므로 활성 요소를 요소로 옮길 수 없습니다 <li>…

어떤 아이디어?

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

그렇게 할 수있는 방법이 있다면 현재 CSS 선택기 사양 중 하나에 있습니다.

즉, Selectors Level 4 실무 초안 에는 :has()이 기능을 제공 할 의사 클래스가 포함되어 있습니다. jQuery 구현 과 비슷하다 .

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

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

CSS에서만 부모를 선택할 수 있다고 생각하지 않습니다.

그러나 이미 .active수업 이있는 것처럼 보이 므로 해당 수업을 li(대신)으로 이동하는 것이 더 쉽습니다 a. 그렇게하면 CSS li와 avia CSS에만 액세스 할 수 있습니다 .

이 스크립트 를 사용할 수 있습니다 :

*! > input[type=text] { background: #000; }

텍스트 입력의 부모를 선택합니다. 그러나 아직 더 많은 것이 있습니다. 원하는 경우 지정된 부모를 선택할 수 있습니다.

.input-wrap! > input[type=text] { background: #000; }

또는 활성화되어있을 때 선택하십시오.

.input-wrap! > input[type=text]:focus { background: #000; }

이 HTML을 확인하십시오.

<div class="input-wrap">
    <input type="text" class="Name"/>
    <span class="help hide">Your name sir</span>
</div>

이 활성화 된 span.help상태에서이를 선택 input하여 표시 할 수 있습니다.

.input-wrap! .help > input[type=text]:focus { display: block; }

더 많은 기능이 있습니다. 플러그인 설명서를 확인하십시오.

BTW, Internet Explorer에서 작동합니다.

다른 사람들이 언급했듯이 CSS 만 사용하여 요소의 부모 스타일을 지정할 수있는 방법은 없지만 다음은 jQuery 와 함께 작동합니다 .

$("a.active").parents('li').css("property", "value");

브라우저 지원 : 없음

부모 선택기가 없습니다. 이전 형제 선택기가없는 방식입니다. 이러한 선택기를 갖지 않는 한 가지 좋은 이유는 브라우저가 클래스의 적용 여부를 결정하기 위해 요소의 모든 하위를 통과해야하기 때문입니다. 예를 들어, 다음과 같이 쓴 경우 :

body:contains-selector(a.active) { background: red; }

그런 다음 브라우저는 브라우저가로드 될 때까지 기다려서 </body>페이지가 빨간색인지 아닌지를 결정하기 위해 모든 것을 구문 분석 해야합니다.

부모 선택 기가 없는 이유 기사 에 자세히 설명되어 있습니다.

CSS 2에서는이를 수행 할 방법이 없습니다. 클래스를에 추가하고 다음 li을 참조 할 수 있습니다 a.

li.active > a {
    property: value;
}