복잡한 CSS 선택을 위해 부모의 활성 아이[중복]

StackOverflow https://stackoverflow.com/questions/45004

  •  09-06-2019
  •  | 
  •  

문제

이 질문은 이미 있는 대답을 여기:

는 방법이 있을 선택하는 상위 요소를 기반으로 클래스 아이의 요소에 등?예 관련하여 나에 관한 HTML 을 출력하여 좋은 플러그인 메뉴 http://drupal.org.출력은 다음과 같이 렌더링됩니다. 

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

나의 질문에는지 여부 가능한 스타일을 적용하려는 목록 항목을 포함하는 앵커로 활동 등에습니다.분명히 알고 싶다는 목록 항목으로 표시될 active,but I don't 어 있는 코드를 생성한다.내가를 수행할 수 있는 것은 이런 종류의 javascript 를 사용하여(JQuery 천하는 마음)이었지만,궁금해 있는 경우에 이를 수행하는 방법을 사용하여 CSS selectors.

그걸 분명히 하기 위해서,내가 원하는 스타일을 적용하는 목록 항목하지 않습니다.

도움이 되었습니까?

해결책

불행하게도,방법은 없는 CSS.

그것은 매우 어려운 자바 스크립트만:

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

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

다른 팁

에 따른 위키피디아:

선택기 못하는 승천

CSS 을 제공하지 않은 방법을 선택하려 부모 또는 조상의 요소가 특정 조건을 만족.더 진보 선택기 체계(XPath)용을 더한 스타일 시트.그러나,주요한 이유 CSS 실무 그룹에 대한 제안을 거부하는 부모의 선택기와 관련된 브라우저의 성능과 증대 연출 문제입니다.

고 누구나 찾 그래서 미래에 이것을 수도 있습라고 조상기를 선택하세요.

업데이트:

이 선택기준 4Spec 를 선택할 수 있는 부분을 선택하는 주체:

의 주제를 선택할 수 있는 명시적으로 식별을 앞에 추가하여 에 달러 표시($)를 하나의 화합물에서 선택기기를 선택하세요.지만 요소 구조는 선택을 나타내는 동 함께 또는없이 달러 기호를 나타내는 주체에서 이 방법을 변경할 수 있는 화합물 선별기 나타내에서 주제는 구조입니다.

예제 1:

예를 들어,다음과 같은 선택을 나타내는 목록 항목 리 독특한 아이의 정렬된 목록 OL:

OL > LI:only-child

그러나 다음 중 하나를 나타내는 주문 목록의 충실한 독특한 아동, 그 아이는 리튬:

$OL > LI:only-child

구조물에 의해 표현된 이러한 두 개의 선택은 동일 그러나 주제의 선택은 없습니다.

이지는 않지만 사용할 수 있습니다(현재,월 2011)에서 어떤 브라우저 또는에서 선택기 jQuery.

늦은 파티에 다시지만 무엇을 위해 그것은 그것의 가치가 사용하여 가능한 jQuery 는 조금 더 간단합니다 있습니다.내 경우에 필요하 찾기 <ul> 부모는 태그 <span> 태그에 포함된 아 <li>.jQuery 가 :has 선택도 가능하여 식별 부모가 아이들이 그것을 담고(updated 당@Afrowave 의 의견 ref: https://api.jquery.com/has-selector/):

$("ul").has("#someId")

을 선택합니다 ul 는 요소는 아이 요소의 id 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:

OL > LI:only-child

그러나 다음 중 하나를 나타내는 주문 목록의 충실한 독특한 아이는 아이가 LI:

$OL > LI:only-child

구조물에 의해 표현된 이러한 두 개의 선택은 동일한지만,주제의 선택은 없습니다.

편집:주어진 어떻게"원"초안 spec 될 수 있습니다,그것은 최고의 탭을 유지하는 이에 의해 확인 CSSWG 페이지에서 선택기준 4.

미래의 답으로 선택기 CSS4

새로운 CSS 스펙을 포함하는 실험 :has 의사 선택할 수 있는 이것을 할 수 있을 것입니다.

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

이 브라우저 지원 이에 기본적으로 존재하지 않는 이 시간에,그러나 그것은 고려에 공식 사양.

답 2012 년에는 잘못되었고 2012 년에는 더욱 잘못된 2018

그러나 그것은 사실 CSS 할 수 없는 상승,그것은 잘못된 것입할 수 없다는 것을 잡아 부모 요소의 또 다른 요소입니다.되풀이 하자:

를 사용하여 HTML 예제 코드에,당신이 잡을 수 있을 리튬을 지정하지 않고 li

ul * a {
    property:value;
}

이 예제에서,ul 부모의 일부 요소와 요소는 부모의 앵커.의 단점은 이 방법을 사용하는 경우가 있 ul 으로 어떤 아이 요소를 포함하는 앵커,상속받는 스타일을 지정합니다.

사용할 수도 있습니다 아이를 선택뿐만 아니라있을 것이기 때문에 부모 요소를 지정하는 어쨌든.

ul>li a {
    property:value;
}

이 예제에서는 앵커해야 합 후손의 리야 하는 아이의 ul,그것을 의미 내에 있어야합니다 나무는 다음과 같은 ul 선언입니다.이 될 것입니다 조금 더 특정 및만 잡는 목록 항목을 포함하는 앵커 자식의 ul.

그래서,당신의 질문에 대답하여 코드입니다.

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

이것을 잡아 ul 클래스의 메뉴,그리고 아동 목록에 포함된 항목만 앵커의 클래스로 활성화됩니다.

나는 같은 문제를 가지고 있었습니다 Drupal.한 CSS,을 얻을 수있는 방법 이 작업을 추가하는 것이"active"클래스를 상위 요소는 경우 HTML 을 생성됩니다.좋은 토론이 http://drupal.org/node/219804, 고,결과는 이 기능이 있습니다에 버전 6.x-2.x 의 nicemenus 모듈이 있습니다.으로 이전에,나는 백 포트에 패치를 6.x1.3 에 http://drupal.org/node/465738 그래서 저는 계속 사용할 수 있습니다 양산 버전의 모듈이 있습니다.

많은 사람들과 대답 jQuery 부모이지만,추가하고 싶다는 공유 빠른 코드를 사용하는을 위한 추가한 클래스를 제 navs 그래서를 추가할 수 있습니다 스타일링 li's 만 있는 하위 메뉴지 li's 는 하지 않습니다.

$("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...

선택하면 부모가 하는 것입니다.필요하신 getElementsByClass 기능의 일부를 정렬하지 않는 한,당신은 당신을 얻을 수 있습니다 drupal 플러그인을 할당하는 항목이 활성 ID 신의 클래스입니다.기능을 제공했을 잡았에서 다른 천재 합니다.그것은 잘 작동하면 마음에 디버깅 기능이 항상 배열을 반환의 노드,단지 단일 노드입니다.

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;
}
라이센스 : CC-BY-SA ~와 함께 속성
제휴하지 않습니다 StackOverflow
scroll top