활동적인 자식의 부모를위한 복잡한 CSS 선택기
이 질문에는 이미 답변이 있습니다.
- CSS 부모 선택기가 있습니까? 답변 31 개
클래스의 자식 요소 클래스를 기반으로 부모 요소를 선택하는 방법이 있습니까? http://drupal.org 의 멋진 메뉴 플러그인으로 HTML 출력과 관련된 나와 관련된 예제입니다 . 출력은 다음과 같이 렌더링됩니다.
<ul class="menu">
<li>
<a class="active">Active Page</a>
</li>
<li>
<a>Some Other Page</a>
</li>
</ul>
내 질문은 활성 클래스가있는 앵커가 포함 된 목록 항목에 스타일을 적용 할 수 있는지 여부입니다. 분명히 목록 항목을 활성으로 표시하고 싶지만 생성되는 코드를 제어 할 수는 없습니다. javascript (JQuery springs를 염두에두고)를 사용하여 이런 종류의 작업을 수행 할 수는 있지만 CSS 선택기를 사용 하여이 작업을 수행 할 수있는 방법이 있는지 궁금합니다.
명확히하기 위해 앵커가 아닌 목록 항목에 스타일을 적용하고 싶습니다.
불행히도 CSS로는 그렇게 할 수 없습니다.
JavaScript로는 그리 어렵지 않습니다.
// JavaScript code:
document.getElementsByClassName("active")[0].parentNode;
// jQuery code:
$('.active').parent().get(0); // This would be the <a>'s parent <li>.
선택기가 올라갈 수 없습니다
CSS는 특정 기준을 만족하는 요소의 상위 또는 상위 항목을 선택할 수있는 방법을 제공하지 않습니다. XPath와 같은 고급 선택기 체계를 사용하면보다 정교한 스타일 시트를 사용할 수 있습니다. 그러나 CSS 실무 그룹이 부모 선택자에 대한 제안을 거부하는 주요 이유는 브라우저 성능 및 증분 렌더링 문제와 관련이 있습니다.
그리고 나중에 SO를 검색하는 사람에게는 조상 선택기라고도합니다.
최신 정보:
선택기 레벨 4 사양은 당신이 될 수 있습니다 선택의 어느 부분을 선택할 수 있습니다 :
선택기의 주제는 선택기의 복합 선택기 중 하나에 달러 기호 ($)를 붙여서 명시 적으로 식별 할 수 있습니다. 선택자가 나타내는 요소 구조는 달러 기호가 있거나없는 것과 동일하지만, 이러한 방식으로 주제를 나타내는 것은 그 구조에서 어떤 화합물 선택자가 주제를 나타내는지를 변경할 수 있습니다.
예 1 :
예를 들어 다음 선택기는 정렬 된 목록 OL의 목록 항목 LI 고유 자식을 나타냅니다.
OL > LI:only-child그러나 다음은 고유 한 자식이있는 정렬 된 목록 OL을 나타내며 해당 자식은 LI입니다.
$OL > LI:only-child이 두 선택기로 표현되는 구조는 동일하지만 선택 자의 주제는 다릅니다.
모든 브라우저에서 또는 jQuery의 선택기로 사용할 수는 없지만 (현재 2011 년 11 월) 사용할 수는 없습니다.
다시 파티에 늦었지만 가치가있는 것은 jQuery를 사용하여 좀 더 간결하게하는 것이 가능합니다. 내 경우 에는 자식에 포함 된 태그 의 <ul>부모 태그 를 찾아야했습니다 . jQuery에는 선택기가 있으므로 @Afrowave의 의견에 따라 업데이트 된 부모로 부모를 식별 할 수 있습니다 ( https://api.jquery.com/has-selector/ ).<span><li>:has
$("ul").has("#someId")
ulID가 someId 인 자식 요소가있는 요소를 선택합니다 . 또는 원래 질문에 대답하려면 다음과 같은 방법으로 트릭을 수행해야합니다 (예상되지 않음).
$("li").has(".active")
“학부모”선택기
현재 CSS에서 요소의 부모를 선택할 수있는 옵션이 없습니다 (CSS3조차도 아님). 그러나 CSS4 를 사용하면 현재 W3C 초안에서 가장 중요한 뉴스는 부모 선택기를 지원한다는 것입니다.
$ul li:hover{
background: #fff;
}
위의 목록 요소를 가리키면 흰색 배경을 추가하여 정렬되지 않은 전체 목록이 강조 표시됩니다.
공식 문서 : https://www.w3.org/TR/2011/WD-selectors4-20110929/#overview (마지막 행).
선택기 레벨 4 의 첫 번째 초안에는 선택기 의 주제 를 명시 적으로 설정하는 방법이 요약되어 있습니다. 이를 통해 OP는 선택기로 목록 요소의 스타일을 지정할 수 있습니다.$li > a.active
에서 셀렉터의 제목을 결정 :
예를 들어 다음 선택기는 정렬 된 목록 OL의 목록 항목 LI 고유 자식을 나타냅니다.
OL > LI:only-child그러나 다음은 고유 한 자식이있는 정렬 된 목록 OL을 나타내며 해당 자식은 LI입니다.
$OL > LI:only-child이 두 선택기로 표현되는 구조는 동일하지만 선택 자의 주제는 다릅니다.
편집 : 초안 사양을 "초안"하는 방법을 고려할 때 선택기 수준 4 의 CSSWG 페이지를 확인하여 탭을 유지하는 것이 가장 좋습니다 .
CSS4 선택기를 사용한 향후 답변
새로운 CSS 사양에는 :has이러한 기능을 수행 할 수 있는 실험용 의사 선택기가 포함되어 있습니다 .
li:has(a:active) {
/* ... */
}
현재 브라우저 지원 은 기본적으로 존재하지 않지만 공식 사양 에서는 고려 중입니다 .
2012 년에 틀렸고 2018 년에는 더 틀린 2012 년의 답변
CSS가 ASCEND 할 수없는 것은 사실이지만 다른 요소의 부모 요소를 잡을 수는 없습니다. 다시 반복하겠습니다 :
HTML 예제 코드를 사용하면 li을 지정하지 않고 li을 가져올 수 있습니다
ul * a {
property:value;
}
이 예에서 ul은 일부 요소의 부모이고 해당 요소는 앵커의 부모입니다. 이 방법을 사용하는 단점은 앵커가 포함 된 자식 요소가있는 ul이 있으면 지정된 스타일을 상속한다는 것입니다.
어쨌든 부모 요소를 지정해야하기 때문에 자식 선택기를 사용할 수도 있습니다.
ul>li a {
property:value;
}
이 예에서 앵커는 ul의 자식이어야하는 li의 자손이어야합니다. 즉, ul 선언 다음에 트리 내에 있어야합니다. 이것은 좀 더 구체적이 될 것이며 앵커를 포함하고 ul의 자식 인 목록 항목 만 가져옵니다.
코드로 질문에 대답하십시오.
ul.menu > li a.active {
property:value;
}
이것은 메뉴의 클래스로 ul을 가져 와서 활성 클래스가있는 앵커 만 포함하는 자식 목록 항목을 가져옵니다.
Drupal과 같은 문제가있었습니다. CSS의 한계를 감안할 때,이 작업을 수행하는 방법은 메뉴 HTML이 생성 될 때 "active"클래스를 부모 요소에 추가하는 것입니다. http://drupal.org/node/219804 에서 이것에 대한 좋은 토론 이 있습니다.이 기능은 nicemenus 모듈의 버전 6.x-2.x로 롤업되었다는 것입니다. 이것이 아직 개발 중이므로 패치를 http://drupal.org/node/465738 에서 6.x-1.3으로 백 포트 하여 프로덕션 준비 버전의 모듈을 계속 사용할 수 있습니다.
로 대답 많은 사람들이 jQuery부모,하지만 단지 내가으로 스타일링 추가 할 수 있도록 내 NAVS에 클래스를 추가하기 위해 사용하는 코드의 빠른 조각 공유하고 싶었에 추가 li'만 하위 메뉴를 가지고의하지 li의 그 하지마
$("li ul").parent().addClass('has-sub');
나는 실제로 원래 포스터와 같은 문제에 부딪쳤다. .parent()jQuery 선택기를 사용하는 간단한 솔루션이 있습니다 . 내 문제는 . .parent대신 사용하고 .parent()있었습니다. 내가 아는 멍청한 실수.
이벤트를 바인딩하십시오 (이 경우 내 탭이 모달에 있기 때문에 .live기본 대신에 바인딩해야했습니다 .click.
$('#testTab1 .tabLink').live('click', function() {
$('#modal ul.tabs li').removeClass("current"); //Remove any "current" class
$(this).parent().addClass("current"); //Add "current" class to selected tab
$('#modal div#testTab1 .tabContent').hide();
$(this).next('.tabContent').fadeIn();
return false;
})
$('#testTab2 .tabLink').live('click', function() {
$('#modal ul.tabs li').removeClass("current"); //Remove any "current" class
$(this).parent().addClass("current"); //Add "current" class to selected tab
$('#modal div#testTab2 .tabContent').hide();
$(this).next('.tabContent').fadeIn();
return false;
})
HTML입니다 ..
<div id="tabView1" style="display:none;">
<!-- start: the code for tabView 1 -->
<div id="testTab1" style="width:1080px; height:640px; position:relative;">
<h1 class="Bold_Gray_45px">Modal Header</h1>
<div class="tabBleed"></div>
<ul class="tabs">
<li class="current"> <a href="#" class="tabLink" id="link1">Tab Title Link</a>
<div class="tabContent" id="tabContent1-1">
<div class="modalCol">
<p>Your Tab Content</p>
<p><a href="#" class="tabShopLink">tabBased Anchor Link</a> </p>
</div>
<div class="tabsImg"> </div>
</div>
</li>
<li> <a href="#" class="tabLink" id="link2">Tab Title Link</a>
<div class="tabContent" id="tabContent1-2">
<div class="modalCol">
<p>Your Tab Content</p>
<p><a href="#" class="tabShopLink">tabBased Anchor Link</a> </p>
</div>
<div class="tabsImg"> </div>
</div>
</li>
</ul>
</div>
</div>
물론 당신은 그 패턴을 반복 할 수 있습니다.
순수한 CSS 솔루션이 될 수있는 또 다른 생각이 지금 나에게 일어났다. 액티브 클래스를 절대 위치 블록으로 표시하고 부모 li을 포함하도록 스타일을 설정하십시오.
a.active {
position:absolute;
display:block;
width:100%;
height:100%;
top:0em;
left:0em;
background-color: whatever;
border: whatever;
}
/* will also need to make sure the parent li is a positioned element so... */
ul.menu li {
position:relative;
}
jquery없이 자바 스크립트를 사용하려는 사람들을 위해 ...
부모를 선택하는 것은 사소한 일입니다. getElementsByClassdrupal 플러그인이 활성 아이템에 Class 대신 ID를 할당 할 수 없다면 어떤 종류 의 함수가 필요합니다 . 내가 제공 한 기능은 SO의 다른 천재에게서 얻은 것입니다. 디버깅 할 때 함수가 항상 단일 노드가 아닌 노드 배열을 반환한다는 점을 명심하십시오.
active_li = getElementsByClass("active","a");
active_li[0].parentNode.style.whatever="whatever";
function getElementsByClass(node,searchClass,tag) {
var classElements = new Array();
var els = node.getElementsByTagName(tag); // use "*" for all elements
var elsLen = els.length;
var pattern = new RegExp("\\b"+searchClass+"\\b");
for (i = 0, j = 0; i < elsLen; i++) {
if ( pattern.test(els[i].className) ) {
classElements[j] = els[i];
j++;
}
}
return classElements;
}
참고 URL : https://stackoverflow.com/questions/45004/complex-css-selector-for-parent-of-active-child
'Programing' 카테고리의 다른 글
| 버전 관리 SQL Server 데이터베이스 (0) | 2020.03.13 |
|---|---|
| UITableViewController가없는 UIRefreshControl (0) | 2020.03.13 |
| HTML5 캔버스에서 이미지 크기 조정 (0) | 2020.03.12 |
| 파이썬에서 줄 바꿈없이 파일 읽기 (0) | 2020.03.12 |
| IDENTITY_INSERT가 OFF로 설정된 경우 'table'테이블에서 ID 열에 명시 적 값을 삽입 할 수 없습니다. (0) | 2020.03.12 |