Complexe sélecteur CSS pour le parent de l'enfant actif [dupliquer]

https://stackoverflow.com/questions/45004

09-06-2019
|

Question

Cette question a déjà une réponse ici:

Est-il un CSS sélecteur parent? 28 réponses

Est-il un moyen pour sélectionner un élément parent basé sur la classe d'un élément enfant dans la classe?L'exemple qui est pertinent pour moi concernant la sortie HTML en un joli menu plugin pour http://drupal.org.La sortie rend comme ceci:

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

Ma question est de savoir si ou non il est possible d'appliquer un style à l'élément de liste qui contient le point d'ancrage avec la classe active sur elle.Évidemment, je préférerais que l'élément de la liste sera marquée comme active, mais je n'ai pas de contrôle du code produit.J'ai pu effectuer ce genre de chose à l'aide de javascript (JQuery vient à l'esprit), mais je me demandais si il existe un moyen de faire cela en utilisant les sélecteurs CSS.

Juste pour être clair, je veux appliquer un style à l'élément de la liste, pas le point d'ancrage.

La solution

Malheureusement, il n'y a pas moyen de le faire avec les CSS.

Il n'est pas très difficile avec JavaScript si:

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

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

Autres conseils

Selon Wikipedia:

Les sélecteurs sont incapables de monter

CSS offre pas la possibilité de sélectionner un parent ou un ancêtre de l'élément qui satisfait à certains critères.Une version plus avancée du sélecteur de régime (comme XPath) permettrait aux plus sophistiquées, les feuilles de style.Cependant, les principales raisons de la CSS Groupe de Travail de rejeter les propositions de la société mère les sélecteurs sont liées à la performance du navigateur et incrémentale des problèmes de rendu.

Et pour tous ceux à la recherche dans l'avenir, cela pourrait aussi être appelé comme un ancêtre du sélecteur.

Mise à jour:

L' Les Sélecteurs De Niveau 4 Spec vous permet de sélectionner la partie de la sélection de l'objet:

Le sujet de la sélection peuvent être identifiés de manière explicite en ajoutant un signe dollar ($) à l'un des composés les sélecteurs dans un sélecteur.Bien que la structure de l'élément que le sélecteur représente l' même avec ou sans le signe de dollar, en indiquant l'objet de cette façon possible de modifier composé sélecteur représente le sujet de cette structure.

Exemple 1:

Par exemple, le sélecteur suivant représente un élément de la liste LI enfant de une liste ordonnée de l'OL:
OL > LI:only-child
Cependant la suivante représente une liste ordonnée de l'OL d'avoir un enfant unique, cet enfant étant un LI:
$OL > LI:only-child
Les structures représentées par ces deux sélecteurs sont les mêmes, mais les sujets de les sélecteurs sont pas.

Bien que ce n'est pas disponible (actuellement, novembre 2011) dans n'importe quel navigateur ou comme un sélecteur jQuery.

La fin de la partie, mais pour ce que ça vaut, il est possible à l'aide de jQuery pour être un peu plus concis.Dans mon cas, j'ai besoin de trouver l' <ul> balise parent pour un <span> balise contenue dans l'enfant <li>.jQuery a l' :has le sélecteur de sorte qu'il est possible d'identifier un parent par les enfants qu'elle contient (mise à jour par @Afrowave commentaire réf.: https://api.jquery.com/has-selector/):

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

allons sélectionner le ul les éléments qui ont un enfant de l'élément avec l'id someId.Ou pour répondre à la question d'origine, quelque chose comme ce qui suit devrait faire l'affaire (non testé):

$("li").has(".active")

LE “PARENT” SÉLECTEUR

Maintenant, il n'y a pas d'option pour sélectionner le parent d'un élément en CSS (même pas CSS3).Mais avec CSS4, les nouvelles les plus importantes dans le courant du W3C projet est le support pour le parent sélecteur.

$ul li:hover{
    background: #fff;
}

À l'aide de la ci-dessus, lorsque vous survolez un élément de la liste, l'ensemble de la liste non ordonnée sera mis en évidence par l'ajout d'un fond blanc pour elle.

La documentation officielle: https://www.w3.org/TR/2011/WD-selectors4-20110929/#overview (dernière ligne).

Le premier projet de Les Sélecteurs De Niveau 4 décrit une façon de définir explicitement la sujet d'un sélecteur.Cela permettrait à l'OP, pour le style de l'élément de la liste avec le sélecteur $li > a.active

À partir de La détermination de l'Objet d'un Sélecteur:

Par exemple, le sélecteur suivant représente un élément de la liste LI enfant unique d'une liste ordonnée de l'OL:

OL > LI:only-child

Cependant la suivante représente une liste ordonnée de l'OL d'avoir un enfant, de l'enfant à être un LI:

$OL > LI:only-child

Les structures représentées par ces deux sélecteurs sont les mêmes, mais les sujets de les sélecteurs sont pas.

Edit:Étant donné le degré de "courants d'air", un projet de spécification peut être, il est préférable de garder un œil sur ce en cochant la CSSWG page sur les sélecteurs de niveau 4.

Futur réponse avec CSS4 sélecteurs

De nouvelles Spécifications CSS contient un expérimentales :has pseudo sélecteur qui pourraient être en mesure de faire cette chose.

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

L' prise en charge du navigateur c'est essentiellement inexistant à cette époque, mais c'est en prenant en compte le spécifications officielles.

Réponse en 2012 que c'était faux en 2012 et est encore plus mal en 2018

S'il est vrai que les CSS ne peut pas MONTER, il est faux que vous ne pouvez pas saisir l'élément parent de l'autre élément.Permettez-moi de rappeler:

À l'aide de votre code HTML un exemple de code, vous êtes en mesure de saisir la li sans préciser li

ul * a {
    property:value;
}

Dans cet exemple, l'ul est le parent d'un élément et l'élément est le parent de l'ancre.L'inconvénient de cette méthode est que si il y a un ul avec un enfant de l'élément qui contient un point d'ancrage, il hérite des styles spécifiés.

Vous pouvez également utiliser le sélecteur d'enfant, car vous aurez à spécifier l'élément parent de toute façon.

ul>li a {
    property:value;
}

Dans cet exemple, le point d'ancrage doit être un descendant d'un li qui DOIT être un enfant de l'ul, le sens qu'il doit être à l'intérieur de l'arbre à la suite de l'ul de la déclaration.Cela va être un peu plus spécifique et ne prenez un élément de liste qui contient un point d'ancrage ET est un enfant de l'ul.

DONC, pour répondre à votre question par code.

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

Ce qui devrait retenir l'ul avec la classe de menu, et l'enfant de l'élément de liste qui contient seulement un point d'ancrage avec la classe d'actifs.

J'ai eu le même problème avec Drupal.Étant donné les limites de CSS, de la façon d'obtenir ce travail est d'ajouter la fonction "active" de la classe parent des éléments lorsque le menu HTML est généré.Il y a une bonne discussion de ce à http://drupal.org/node/219804, la conséquence est que cette fonctionnalité a été roulé dans la version 6.x-2.x de la nicemenus module.Comme c'est encore en développement, j'ai intégré le patch à 6.x-1.3 http://drupal.org/node/465738 afin que je puisse continuer à utiliser la version de production de ce module.

De nombreuses personnes ont répondu à jQuery parent, mais juste pour ajouter à ce que j'ai voulu partager un rapide extrait de code que j'utilise pour ajouter des classes pour mes trajets afin que je puisse ajouter un style à li's qui n'ont que des sous-menus et de ne pas li's qui n'en ont pas.

$("li ul").parent().addClass('has-sub');

Je l'ai fait, couru dans la même question que l'affiche originale.Il existe une solution simple de simplement en utilisant .parent() sélecteur jQuery.Mon problème a été, j'ai été en utilisant .parent au lieu de .parent().Erreur stupide, je sais.

Lier les événements (dans ce cas depuis mes onglets sont en Modal j'avais besoin de les lier avec .live au lieu d'une base .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;
})

Voici le code 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>

Bien sûr, vous pouvez répéter ce motif..avec plus de LI

Une autre pensée vint à moi tout à l'heure, qui pourraient être une pure CSS solution.Affichage de votre classe active comme absolument bloc placé et définir son style de couvrir le parent 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;
}

Pour ceux d'entre vous qui veulent utiliser du javascript sans jquery...

En sélectionnant le parent est trivial.Vous avez besoin d'un getElementsByClass la fonction de quelque sorte, à moins que vous pouvez obtenir votre drupal plug-in pour attribuer l'élément actif d'un ID au lieu de la Classe.La fonction que j'ai fourni, que j'ai saisi à partir d'un autre génie sur DONC.Il fonctionne bien, il suffit de garder à l'esprit lorsque vous déboguez que la fonction retournera toujours un tableau de nœuds, pas un seul nœud.

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;
}

Licencié sous: CC-BY-SA avec attribution

Non affilié à StackOverflow