des données d'expérience des bibliothèques actives pour enfants

Question

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. É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.

Answer 1

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:

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.

Answer 2

Malheureusement, il n’y a aucun moyen de le faire avec CSS.

Il n’est cependant pas très difficile avec JavaScript :

Answer 3

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, il contient:

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

va sélectionner l' ul élément qui a 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)")

Answer 4

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 arrière-plan blanc.

Answer 5

Le premier projet de Sélecteurs de Niveau 4 décrit une façon de définir explicitement l' objet 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é la façon dont les "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.