활성 자녀의 부모를 위한 복합 CSS 선택기

활성 자녀의 부모를 위한 복합 CSS 선택기

이 질문에는 이미 다음과 같은 답이 있습니다.

CSS 부모 선택기가 있습니까? (33개 답변)

마감됨10년 전에.

클래스에 있는 자식 요소의 클래스를 기준으로 부모 요소를 선택하는 방법이 있습니까?http://drupal.org 용 멋진 메뉴 플러그인의 HTML 출력과 관련된 예입니다.출력은 다음과 같이 렌더링됩니다.

<ul class="menu">  
    <li>  
        <a class="active">Active Page</a>  
    </li>  
    <li>    
        <a>Some Other Page</a>  
    </li>  
</ul>  

제 질문은 액티브 클래스가 있는 앵커가 포함된 리스트 항목에 스타일을 적용하는 것이 가능한지 여부입니다.물론 목록 항목을 활성으로 표시하고 싶지만 생성되는 코드를 제어할 수 없습니다.자바스크립트(JQuery spring)를 사용하여 이러한 작업을 수행할 수 있지만, CSS 셀렉터를 사용하여 이 작업을 수행할 수 있는 방법이 있는지 궁금합니다.

분명히 말씀드리자면, 저는 앵커가 아닌 리스트 아이템에 스타일을 적용하고 싶습니다.

위키피디아에 따르면:

셀렉터를 상승시킬 수 없습니다.

CSS는 특정 기준을 충족하는 요소의 상위 또는 상위를 선택할 수 있는 방법을 제공하지 않습니다.고급 선택기 구성표(예: XPath)를 사용하면 보다 정교한 스타일시트를 사용할 수 있습니다.그러나 CSS Working Group이 상위 선택자에 대한 제안을 거부하는 주요 이유는 브라우저 성능 및 증분 렌더링 문제와 관련이 있습니다.

향후 SO를 검색하는 사용자는 이를 조상 선택기라고도 할 수 있습니다.

업데이트:

선택기 레벨 4 사양을 사용하면 선택기에서 주제가 되는 부분을 선택할 수 있습니다.

선택기의 대상은 선택기의 복합 선택기 중 하나에 달러 기호($)를 추가하여 명시적으로 식별할 수 있습니다.선택기가 나타내는 요소 구조는 달러 기호가 있든 없든 동일하지만 이러한 방식으로 제목을 표시하면 해당 구조에서 제목을 나타내는 복합 선택기가 변경될 수 있습니다.

예 1:

예를 들어, 다음 선택기는 정렬된 목록 OL의 목록 항목 LI 고유 하위 항목을 나타냅니다.

OL > LI:only-child

그러나 다음은 고유한 자식이 있는 순서 목록 OL을 나타냅니다. 이 자식은 LI입니다.

$OL > LI:only-child

이 두 선택기로 표시되는 구조는 동일하지만 선택기의 대상은 다릅니다.

비록 이것은 어떤 브라우저에서도 (현재, 2011년 11월) 사용할 수 없거나 jQuery에서 선택기로 사용할 수 없습니다.

사용할 수 있습니다.has():

li:has(a:active) {
  /* ... */
}

---

안타깝게도, CSS로는 그렇게 할 방법이 없습니다.

그러나 JavaScript에서는 그다지 어렵지 않습니다.

// JavaScript code:
document.getElementsByClassName("active")[0].parentNode;

// jQuery code:
$('.active').parent().get(0); // This would be the <a>'s parent <li>.

다시 파티에 늦었지만 가치가 있는 것은 jQuery를 사용하는 것이 조금 더 간결해질 수 있다는 것입니다.저 같은 경우에는, 저는 그것을 찾아야 했습니다.<ul>의 부모 <span>아이에 포함된 태그<li>는 jQuery입니다.:has선택기를 사용하면 포함된 자식으로 부모를 식별할 수 있습니다(@Afrawave의 댓글 참조: https://api.jquery.com/has-selector/) :

$("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/ #dll(마지막 행).

CSS4 실렉터를 사용한 향후 답변

인 CSS가 .:has이 일을 할 수 있는 유사 선택기.

li:has(a:active) {
  /* ... */
}

이에 대한 브라우저 지원은 기본적으로 현재 존재하지 않지만 공식 사양을 고려하고 있습니다.

---

2012년에 틀렸고 2018년에는 더 틀렸습니다.

CSS가 Ascend할 수 없는 것은 사실이지만 다른 요소의 부모 요소를 잡을 수 없는 것은 잘못되었습니다.다시 한 번 말씀드리겠습니다.

HTML 예제 코드를 사용하여 li를 지정하지 않고 li를 잡을 수 있습니다.

ul * a {
    property:value;
}

이 예에서 ul은 일부 요소의 부모이고 해당 요소는 앵커의 부모입니다.이 방법을 사용할 때의 단점은 앵커를 포함하는 하위 요소에 ul이 있는 경우 지정된 스타일을 상속한다는 것입니다.

부모 요소를 지정해야 하므로 자식 선택기도 사용할 수 있습니다.

ul>li a {
    property:value;
}

이 예에서 앵커는 ul의 자식이어야 하는 li의 자손이어야 하며, 이는 ul 선언 뒤에 트리 내에 있어야 합니다.이것은 좀 더 구체적으로 설명될 것이며 앵커 AND가 포함된 목록 항목만 가져올 것이며 ul의 자식입니다.

그래서 코드로 질문에 답하기 위해서입니다.

ul.menu > li a.active {
    property:value;
}

이렇게 하면 메뉴 클래스가 포함된 ul과 활성 클래스가 포함된 앵커만 포함된 하위 목록 항목을 잡을 수 있습니다.

셀렉터 레벨 4의 첫 번째 초안은 셀렉터의 주제를 명시적으로 설정하는 방법을 설명합니다.이렇게 하면 OP가 선택기로 목록 요소를 스타일화할 수 있습니다.$li > a.active

선택기의 제목 결정에서:

예를 들어, 다음 선택기는 정렬된 목록 OL의 목록 항목 LI 고유 하위 항목을 나타냅니다.

OL > LI:only-child

그러나 다음은 고유한 자식이 있는 순서 목록 OL을 나타냅니다. 이 자식은 LI입니다.

$OL > LI:only-child

이 두 선택기로 표시되는 구조는 동일하지만 선택기의 대상은 다릅니다.

편집: 초안 사양이 얼마나 "드래프트"할 수 있는지를 고려할 때, 셀렉터 레벨 4에서 CSSWG의 페이지를 확인하여 이를 감시하는 것이 가장 좋습니다.

저도 드루팔과 같은 문제가 있었습니다.CSS의 한계를 고려할 때, 이 작업을 수행하는 방법은 메뉴 HTML이 생성될 때 "활성" 클래스를 부모 요소에 추가하는 것입니다.http://drupal.org/node/219804, 에서는 이 기능이 nicemenus 모듈의 6.x-2.x 버전에 포함되었다는 사실을 잘 설명하고 있습니다.아직 개발 중이기 때문에 운영 준비 버전의 모듈을 계속 사용할 수 있도록 패치를 http://drupal.org/node/465738 의 6.x-1.3으로 되돌렸습니다.

많은 사람들이 이렇게 대답했습니다.jQuery부모님, 하지만 덧붙이자면, 나는 내 네비에 클래스를 추가하는 데 사용하는 코드의 간단한 조각을 공유하고 싶어서 스타일링을 추가했습니다.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>

물론 당신은 그 패턴을 반복할 수 있습니다.더 많은 LI로

방금 전에 순수한 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 없이 javascript를 사용하고 싶은 분들은...

부모를 선택하는 것은 사소한 일입니다.당신은 필요합니다.getElementsByClass클래스 대신에 활성 항목에 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