Programing

활동적인 자식의 부모를위한 복잡한 CSS 선택기

lottogame 2020. 3. 12. 08:10
반응형

활동적인 자식의 부모를위한 복잡한 CSS 선택기


이 질문에는 이미 답변이 있습니다.

클래스의 자식 요소 클래스를 기반으로 부모 요소를 선택하는 방법이 있습니까? 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>.

Wikipedia에 따르면 :

선택기가 올라갈 수 없습니다

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

이 두 선택기로 표현되는 구조는 동일하지만 선택 자의 주제는 다릅니다.

편집 : 초안 사양을 "초안"하는 방법을 고려할 때 선택기 수준 4CSSWG 페이지를 확인하여 탭을 유지하는 것이 가장 좋습니다 .


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


반응형