CSS 부모 선택기가 있습니까?
질문
앵커 요소의 직접 부모 인
예를 들어, 내 CSS는 다음과 같을 것입니다.
li < a.active {
property: value;
}
분명히이 작업을 JavaScript로 수행하는 방법이 있습니다. 그러나 CSS 레벨 2에 원시하는 일종의 해결 방법이 있기를 바랍니다.
스타일을 시도하는 메뉴는 CMS에 의해 분출되고 있으므로 활성 요소를
어떤 아이디어가 있습니까?
답변
현재 CSS에서 요소의 부모를 선택할 수있는 방법은 없습니다. 적어도 모든 브라우저에서 작동하는 방식이 아닙니다.
그것을 할 수있는 방법이있는 경우 현재 CSS 선택기 사양 중 하나에있을 것입니다.
선택기 레벨 3 사양 CSS 2.1 선택기 Spec.
즉, 선택기 레벨 4 작업 초안은 다음을 포함합니다.이 기능을 제공 할 수있는 () 의사 클래스.그것은 jQuery 구현과 유사합니다.
li:has(> a.active) { /* styles to apply to the li tag */ }
그러나 2022 년 현재 Safari에서만 지원됩니다.
그 동안 상위 요소를 선택 해야하는 경우 JavaScript에 의지해야합니다.
답변
예 : : has ()
브라우저 지원 : 낮음
답변
CSS에서만 부모를 선택할 수 있다고 생각하지 않습니다.
그러나 당신이 이미. 활성 수업을 가지고있는 것처럼 보이는 것처럼, 그 수업을 li (대신 a)로 옮기는 것이 더 쉬울 것입니다.그렇게하면 LI와 A VIA 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-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; }
그런 다음 브라우저는 가 페이지가 빨간색이어야하는지 여부를 결정할 때까지 모든 것을로드하고 파싱 할 때까지 기다려야합니다.
상위 선택기가없는 기사는이를 자세하게 설명합니다.
출처:https://stackoverflow.com/questions/1014861/is-there-a-css-parent-selector
최근댓글