Question Y a-t-il un sélecteur parent CSS?


Comment puis-je sélectionner le <li> élément qui est un parent direct de l'élément d'ancrage?

Dans mon exemple, mon CSS serait quelque chose comme ceci:

li < a.active {
    property: value;
}

Évidemment, il existe des façons de le faire avec JavaScript, mais j'espère qu'il existe une solution de contournement qui existe dans le niveau 2 de CSS.

Le menu que j'essaie de styler est craché par un CMS, donc je ne peux pas déplacer l'élément actif vers le <li> élément ... (à moins que je ne thème le module de création de menu que je préfère ne pas faire).

Des idées?


2507
2018-06-18 19:59


origine


Réponses:


Il n'y a actuellement aucun moyen de sélectionner le parent d'un élément dans CSS.

S'il y avait un moyen de le faire, ce serait dans l'une des spécifications de sélecteurs CSS en cours:

En attendant, vous devrez recourir à JavaScript si vous devez sélectionner un élément parent.


le Sélectionneurs Niveau 4 Working Draft comprend un :has() pseudo-classe qui fonctionne de la même manière que le Implémentation de jQuery. À partir de 2018, ce n'est toujours pas pris en charge par un navigateur.

En utilisant :has() la question originale pourrait être résolue avec ceci:

li:has(> a.active) { /* styles to apply to the li tag */ }

2007
2018-06-18 20:16



Je ne pense pas que vous pouvez sélectionner le parent dans CSS seulement.

Mais comme vous semblez déjà avoir un .active classe, ne serait-il pas plus facile de déplacer cette classe à la li (à la place du a)? De cette façon, vous pouvez accéder à la fois le li et le a via css seulement.


119
2018-06-18 20:08



Vous pouvez utiliser ceci scénario.

*! > input[type=text] { background: #000; }

Cela sélectionnera tout parent d'une entrée de texte. Mais attendez, il y a encore beaucoup plus. Si vous le souhaitez, vous pouvez sélectionner un parent spécifié:

.input-wrap! > input[type=text] { background: #000; }

ou sélectionnez-le quand il est actif:

.input-wrap! > input[type=text]:focus { background: #000; }

Découvrez ce code HTML:

<div class="input-wrap">
    <input type="text" class="Name"/>
    <span class="help hide">Your name sir</span>
</div>

tu peux choisir ça span.help quand le input est actif et montrez-le:

.input-wrap! .help > input[type=text]:focus { display: block; }

Il y a beaucoup plus de capacités; il suffit de consulter la documentation du plugin.

BTW, cela fonctionne dans IE.


99
2017-08-13 10:13



Comme mentionné par un couple d'autres, il n'y a pas un moyen de styler le / s parent (s) d'un élément en n'utilisant que CSS mais le suivant fonctionne avec jQuery:

$("a.active").parents('li').css("property", "value");

74
2017-12-14 14:51



Il n'y a pas de sélecteur parent; juste la manière il n'y a aucun sélecteur de frère précédent. Une bonne raison de ne pas avoir ces sélecteurs est que le navigateur doit traverser tous les enfants d'un élément pour déterminer si une classe doit ou non être appliquée. Par exemple si vous avez écrit:

body:contains-selector(a.active) { background: red; }

Ensuite, le navigateur devra attendre jusqu'à ce qu'il ait chargé et analysé tout jusqu'à ce que </body> pour déterminer si la page doit être rouge ou non.

Cet article Pourquoi nous n'avons pas de sélecteur parent l'explique en détail.


44
2018-01-21 08:43



il n'y a pas moyen de le faire dans css2. vous pouvez ajouter la classe à la LI et référence le un

li.active > a {
    property: value;
}

39
2018-06-18 20:06



Le sélecteur CSS "Combinateur Général de Fratrie"Pourrait peut-être être utilisé pour ce que vous voulez:

E ~ F {
    property: value;
}

Cela correspond à tout F élément qui est précédé d'un E élément.


26
2018-06-30 14:00



Essayez de passer a à block afficher, puis utiliser le style que vous voulez. aélément va remplir li élément et vous serez en mesure de modifier son apparence comme vous le souhaitez. Ne pas oublier de mettre li rembourrage à 0.

li {
  padding: 0;
  overflow: hidden;
}
a {
  display: block;
  width: 100%;
  color: ..., background: ..., border-radius: ..., etc...
}
a.active {
  color: ..., background: ...
}

24
2017-11-23 09:03



Pas en CSS 2 autant que je sache. CSS 3 a des sélecteurs plus robustes mais n'est pas systématiquement implémenté sur tous les navigateurs. Même avec les sélecteurs améliorés, je ne crois pas qu'il accomplira exactement ce que vous avez spécifié dans votre exemple.


19
2018-06-18 20:09



Je sais que le PO cherchait une solution CSS, mais il est simple d'utiliser jQuery. Dans mon cas, j'avais besoin de trouver le <ul> balise parent pour un <span> tag contenu dans l'enfant <li>. jQuery a le :has sélecteur de sorte qu'il est possible d'identifier un parent par les enfants qu'il contient:

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

sélectionnera le ul élément qui a un élément enfant avec id someId. Ou pour répondre à la question initiale, quelque chose comme ce qui suit devrait faire l'affaire (non testé):

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

17
2018-05-16 22:04