Est-il un CSS sélecteur parent?
Comment puis-je sélectionner le <li>
élément qui est un parent direct de l'élément ancre?
Dans l'exemple de mon CSS serait quelque chose comme ceci:
li < a.active {
property: value;
}
Évidemment, il ya des façons de le faire avec du JavaScript mais je suis en espérant qu'il y est une sorte de solution de contournement existe natif de CSS Niveau 2.
Le menu que je suis en train de style est vomie par un CMS donc je ne peux pas déplacer l'élément actif de la <li>
élément... (à moins que je thème, le menu de création de module, je préfère ne pas le faire).
Des idées?
Plus de la discussion de ce problème dans le stackoverflow.com/questions/45004/...
Existe-il des mises à jour à cette question? Je crois que le dernier enregistrement de la correspondance sur la question a eu lieu en Mars 2014. Ce qui se passe avec elle?
Est-il en parler ou non de ce qui va arriver? Cette question est y a quelques années, je me demandais.
Avez-vous vu les observations en vertu de la accepté de répondre? Ils se sont contentés de documenter les progrès qui ont été réalisés au fil des ans.
Les gens semblent oublier que css est synonyme de
Existe-il des mises à jour à cette question? Je crois que le dernier enregistrement de la correspondance sur la question a eu lieu en Mars 2014. Ce qui se passe avec elle?
Est-il en parler ou non de ce qui va arriver? Cette question est y a quelques années, je me demandais.
Avez-vous vu les observations en vertu de la accepté de répondre? Ils se sont contentés de documenter les progrès qui ont été réalisés au fil des ans.
Les gens semblent oublier que css est synonyme de
OriginalL'auteur jcuenod | 2009-06-18
Vous devez vous connecter pour publier un commentaire.
Il n'existe actuellement aucun moyen de sélectionner le parent d'un élément en CSS.
Si il y avait un moyen de le faire, il serait dans le courant de sélecteurs CSS spécifications:
En attendant, vous aurez recours à JavaScript si vous avez besoin de sélectionner un élément parent.
La Les Sélecteurs De Niveau 4 Du Projet De Travail comprend un
:has()
pseudo-classe qui fonctionne de la même que la jQuery mise en œuvre. À compter de 2019, ce n'est pas encore pris en charge par n'importe quel navigateur.À l'aide de
:has()
la question d'origine pourrait être résolu avec cette:Apparemment, le soumis le sélecteur a été revisité, sauf à l'aide d'un
!
maintenant:The subject of the selector can be explicitly identified by appending an exclamation mark (!) to one of the compound selectors in a selector.
La préfixé
$
regardé mieux pour moi... le annexée!
peut être négligée plus facilement.Les principaux rebondissement! Les Sélecteurs de 4 WD a été juste mis à jour aujourd'hui pour exclure le sujet de l'indicateur de la rapidité de profil, qui sera utilisé par les CSS implémentations. Si ce changement reste, cela signifie que vous ne serez pas en mesure d'utiliser l'objet de l'indicateur dans les feuilles de style (sauf si vous utilisez ajouter une sorte de polyfill comme celle décrite dans une autre réponse) - vous ne pouvez l'utiliser avec l'API de Sélecteurs et de n'importe où d'autre que le profil complet peut être mis en œuvre.
Une autre mise à jour importante: on dirait qu'ils envisagez de faire disparaître l'objet sélecteur de syntaxe tout à fait et en le remplaçant par le
:has()
pseudo tout le monde a appris à connaître et amour de jQuery. Les dernières ED a supprimé toutes les références à l'objet de l'indicateur, et l'a remplacé par le:has()
pseudo. Je ne connais pas les raisons exactes, mais la CSSWG a organisé un sondage il y a quelques temps et les résultats doivent avoir influencé cette décision. Il est le plus probable pour la compatibilité avec jQuery (donc il peut tirer parti de l'asq sans modifications), et parce que le sujet de l'indicateur de la syntaxe s'est avéré trop à confusion.OriginalL'auteur Dan Herbert
Je ne pense pas que vous pouvez sélectionner le parent en css uniquement.
Mais comme vous avez déjà semblent avoir un
.active
classe, ne serait-il pas plus facile de déplacer cette classe à lali
(au lieu de laa
)? De cette façon, vous pouvez accéder à la fois à lali
et laa
via css.Aquilina Prendre un coup d'oeil à la question, l'OP est d'utiliser une classe, pas un pseudo-sélecteur.
OriginalL'auteur jeroen
Vous pouvez utiliser cette script.
Cela permet de sélectionner n'importe quel parent d'un texte d'entrée. Mais attendez, il ya encore beaucoup plus. Si vous le souhaitez, vous pouvez sélectionner un parent spécifié:
ou sélectionnez-la lorsqu'elle est active:
Découvrez ce HTML:
vous pouvez sélectionner
span.help
lorsque leinput
est active et le montrer:Il y a beaucoup plus de fonctionnalités; il suffit de consulter la documentation du plugin.
BTW, il fonctionne sous IE.
patent()
serait plus rapide. Ce besoin de test, cependantIl échoue lorsque vous avez CSS déclaration d'un Sélecteur de matière, sans sélecteur d'enfant (
#a!
seul jette une erreur,#a! p
œuvres), et donc les autres ne fonctionne pas, soit en raison deUncaught TypeError: Cannot call method 'split' of undefined
: voir jsfiddle.net/HerrSerker/VkVPsJe pense que #a! n'est pas valide sélecteur, que doit-elle choisir?
Je ne sais pas. La spec ne dit pas que c'est illégal. #un! doit sélectionner lui-même. Au moins leur doit y avoir aucune erreur dans le code JavaScript
Par mon commentaire sur la accepté de répondre, il semble que le polyfill peut être requis, même dans un avenir proche, après tout, parce que l'objet de l'indicateur ne peut jamais être mis en œuvre par les navigateurs dans le CSS.
OriginalL'auteur Idered
Comme mentionné par un couple de d'autres, il n'y a pas un moyen de style d'un élément parent/s en utilisant juste le CSS mais les ouvrages suivants, avec jQuery:
<
sélecteur n'existe pas (vérifié à l'aide de jQuery 1.7.1).Peut-être que
<
-syntaxe travaillé en 2009, mais je l'ai mis à jour (pour 2013).Mieux encore, utiliser jQuery est intégré dans
:has()
sélecteur:$("li:has(a.active)").css("property", "value");
. Il se lit de la même manière aux feuilles de style CSS 4 est proposé!
sélecteur. Voir aussi::parent
sélecteur,.parents()
méthode,.parent()
méthode.Et plutôt que d'utiliser
.css("property", "value")
de style les éléments sélectionnés, vous devez généralement.addClass("someClass")
et avoir dans votre CSS.someClass { property: value }
(via). De cette façon, vous pouvez noter le style avec toute la puissance de CSS et tout les préprocesseurs vous utilisez.OriginalL'auteur zcrar70
Il n'est pas parent sélecteur; juste la façon dont il n'y a pas de précédent sélecteur de frères. Une bonne raison pour ne pas avoir ces sélecteurs est parce que le navigateur à parcourir par le biais de tous les enfants d'un élément afin de déterminer si une classe doit être appliquée. Par exemple, si vous avez écrit:
Puis le navigateur devra attendre jusqu'à ce qu'il a chargé et a analysé le tout jusqu'à l'
</body>
afin de déterminer si la page doit être rouge ou pas.Cet article Pourquoi nous n'avons pas un parent sélecteur l'explique en détail.
en fait, le sélecteur de ferait un très rapide navigateur paraître lents.
J'espère que les développeurs de navigateurs serait de venir avec une mise en œuvre qui est (au moins) aussi rapide que la version javascript, qui est celui que les gens finissent par utiliser de toute façon.
"nous vivons dans un lent, le monde primitif" la toux la toux nouvelle apple watch contre la toux la toux
OriginalL'auteur Salman A
il n'y a pas un moyen de le faire dans css2. vous pouvez ajouter la classe de la li et de la référence de l'un
c'est effectivement une solution simple et élégante et, dans de nombreux cas, il est logique de définir la classe sur le parent.
OriginalL'auteur Josh
Essayez de passer
a
àblock
de l'écran, puis utilisez n'importe quel style que vous voulez.a
élément de remplissageli
élément et vous serez en mesure de modifier le look que vous voulez. N'oubliez pas de mettreli
padding à 0.OriginalL'auteur Raseko
oui:
:a()
prise en charge du navigateur: aucun
OriginalL'auteur Yukulélé
Le sélecteur CSS “Général Frère Combinator” pourrait peut-être utilisé pour ce que vous voulez:
Cela correspond à n'importe quel
F
élément est précédée par uneE
élément.OriginalL'auteur cobaasta
Pas en CSS 2, pour autant que je suis au courant. CSS 3 est plus robuste sélecteurs mais n'est pas appliqué de façon uniforme sur tous les navigateurs. Même avec l'amélioration des sélecteurs, je ne crois pas qu'elle permettra d'obtenir exactement ce que vous avez spécifié dans votre exemple.
OriginalL'auteur Mark Hurd
Je sais que l'OP a la recherche d'un CSS solution mais elle est simple à réaliser à l'aide de jQuery. Dans mon cas, j'ai besoin de trouver les
<ul>
balise parent pour un<span>
balise contenue dans l'enfant<li>
. jQuery a la:has
le sélecteur de sorte qu'il est possible d'identifier un parent par les enfants, il contient:sélectionnera les
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é):$yourSpan.closest("ul")
et vous obtiendrez le parent UL de votre élément span. Cependant, votre réponse est totalement hors-sujet à mon humble avis. Nous pouvons répondre à toutes les CSS-taged questions avec jQuery solution.Comme identifié dans d'autres réponses, il n'y a aucun moyen de le faire à l'aide de CSS 2. Compte tenu de cette contrainte, la réponse que j'ai fournie est celui que je connais est efficace et c'est la façon la plus simple de répondre à la question à l'aide de javascript à mon humble avis.
Compte tenu de votre upvotes, certaines personnes sont d'accord avec vous. Mais la seule réponse reste la accepté; pure et simple, "il ne peut être fait de la façon dont vous le voulez". Si la question est de savoir comment obtenir 60 mph sur un vélo et vous y répondez avec "simple; monter dans une voiture et a frappé le gaz.", c'est quand même pas une réponse. D'où mon commentaire.
Cette approche rendrait DONC presque complètement inutile. Je recherche DONC pour savoir comment résoudre les problèmes, de ne pas trouver "la seule réponse" ne pas aborder la question. C'est pourquoi est si impressionnant, car il y a toujours plus d'une façon à la peau d'un chat.
OriginalL'auteur David Clarke
C'est le plus discuté de l'aspect de la Sélecteurs de Niveau 4 spécification.
Avec le sélecteur serez en mesure de style d'un élément en fonction de son enfant à l'aide d'un point d'exclamation après le sélecteur de donnée (!).
Par exemple:
permettra de définir un arrière-plan rouge-couleur si l'utilisateur déplace sur toute l'ancre.
Mais nous devons attendre les navigateurs de mise en œuvre 🙁
OriginalL'auteur Marco Allori
Vous pouvez essayer d'utiliser de lien hypertexte en tant que parent, puis changer l'intérieur des éléments sur le vol stationnaire. Comme ceci:
De cette façon, vous pouvez changer le style dans de multiples intérieure balises, basé sur la substitution de l'élément parent.
a
balise de certains éléments seulement, si vous voulez être conformes aux normes XHTML. Par exemple, vous ne pouvez pas utiliser undiv
dansa
, sans l'obtention d'un avertissement de violer le schéma.Totalement droit Ivaylo! "un" est un non-élément de type block, ne peut donc pas utiliser les éléments de bloc à l'intérieur.
En HTML5, il est parfaitement bien de mettre les éléments de bloc à l'intérieur de liens.
et du point de vue sémantique, il est parfaitement faux
... si c'était sémantiquement mal, ils n'auraient pas permis en HTML5, où il n'était pas avant.
OriginalL'auteur riverstorm
Quelqu'un a suggéré quelque chose comme cela? Juste une idée pour le menu horizontal...
partie de HTML
partie de CSS
Mise à jour de la démo et le reste du code
Un autre exemple comment l'utiliser avec le texte-entrées - sélectionnez parent fieldset
Je n'ai pas essayer de l'appliquer à des scénarios du monde réel, c'est pourquoi je dis "Pas pour la production". Mais je pense qu'Il peut être appliqué aux 2 niveaux de menu fixe, largeur de l'objet. "quelles sont les parties de cette CSS font ce qu'" - .test-frère est, en réalité, d'arrière-plan de l'élément parent (la dernière ligne de CSS).
Ajouté explication (section css de jsfiddle, à partir de "PARTIE PRINCIPALE")... Et je me trompe peut - être n'importe quel nombre de sous-niveaux.
OriginalL'auteur Ilya B.
Actuellement, il n'existe pas de parent sélecteur & il n'est même pas en cours de discussion dans les pourparlers du W3C. Vous avez besoin de comprendre comment CSS est évaluée par le navigateur pour comprendre si on en a besoin ou pas.
Il y a beaucoup de technique, explication ici.
Jonathan Snook explique comment CSS est évaluée.
Chris Coyier sur les pourparlers de Parent sélecteur.
Harry Roberts à nouveau sur l'écriture efficace sélecteurs CSS.
Mais Nicole Sullivan a quelques faits intéressants sur des tendances positives.
Ces gens sont tous de première classe dans le domaine du développement front end.
need
est défini par les développeurs web les exigences, que ce soit pour l'avoir dans la spec est décidé par d'autres facteurs.OriginalL'auteur Suraj Naik
Techniquement il n'y a pas de moyen direct pour ce faire, toutefois, vous pouvez trier ce soit avec jquery ou javascript.
Cependant,r, vous pouvez faire quelque chose comme cela.
jQuery
Si vous souhaitez obtenir ce à l'aide de jQuery, ici, est la référence pour jQuery parent sélecteur
OriginalL'auteur Prabhakar
Il y a un plugin qui s'étend CSS à inclure certaines caractéristiques non standard qui peut vraiment aider lors de la conception de sites web. Il est appelé EQCSS.
L'une des choses EQCSS ajoute un parent sélecteur. Il fonctionne dans tous les navigateurs IE8 et. Voici le format:
Donc, ici, nous avons ouvert un élément de la requête sur chaque élément
a.active
, et pour les styles à l'intérieur de cette requête, des choses comme$parent
sens parce qu'il y a un point de référence. Le navigateur peut trouver le parent, car il est très similaire àparentNode
en JavaScript.Voici une démo de
$parent
et un autre$parent
démo qui fonctionne dans IE8, ainsi que une capture d'écran au cas où vous n'avez pas IE8 autour de tester avec.EQCSS comprend également méta-sélecteurs
$prev
de l'élément avant de l'élément sélectionné,$this
uniquement pour les éléments qui correspondent à un élément de la requête, et plus encore.OriginalL'auteur innovati
Le W3C exclu, un sélecteur à cause de l'énorme impact de la performance sur un navigateur.
Les sélecteurs CSS file sélecteur de commande est évalué plutôt que le document de XPath ou DOM hiérarchie.
Au moins, c'est ce qu'ils nous ont dit.
OriginalL'auteur rgb
Réponse courte est PAS, nous n'avons pas
parent selector
à ce stade dans le CSS, mais si vous n'avez pas de toute façon pour permuter les éléments ou les classes, la seconde option est l'utilisation de JavaScript, quelque chose comme ceci:ou plus Courte, si vous utilisez jQuery dans votre application:
OriginalL'auteur Alireza
Bien qu'il n'est pas parent sélecteur CSS standard à l'heure actuelle, je travaille sur un (personnel) projet appelé axe (ie. Augmentée Sélecteur CSS Syntaxe /ACSSSS) qui, parmi ses 7 nouveaux sélecteurs, comprend à la fois:
<
(qui permet à l'inverse de la sélection de>
)^
(qui permet à l'inverse de la sélection de[SPACE]
)axe est actuellement dans une relativement au début de la phase de BÊTA de développement.
Voir une démo ici:
http://rounin.co.uk/projects/axe/axe2.html
(comparer les deux listes à gauche de style avec la norme sélecteurs et les deux listes sur le droit de style avec axe sélecteurs)
<script src="https://rouninmedia.github.io/axe/axe.js"></script>
à la fin de votre document html, juste avant</body>
.OriginalL'auteur Rounin
C'est maintenant 2019, et le dernier projet en date de la CSS Module d'Imbrication a effectivement quelque chose de ce genre. L'introduction de
@nest
à des règles.(copier-collé de l'URL ci-dessus).
Exemple de valable sélecteurs en vertu de la présente spécification:
OriginalL'auteur Roberrrt
Pas vous ne pouvez pas sélectionner le parent en css uniquement.
Mais comme vous avez déjà semblent avoir un
.active
classe, wouldnt être plus facile de déplacer cette classe à lali
(au lieu de laa
)? De cette façon, vous pouvez accéder à la fois à lali
et laa
via css.OriginalL'auteur Gaurav Aggarwal
C'est possible avec esperluette dans SASS:
CSS de sortie:
Ce n' pas sélectionnez
h3
parent, qui était l'objectif. Ce serait sélectionnezh3
s qui sont des descendants de.some-parent-selector
.OriginalL'auteur Rodolfo Jorge Nemer Nogueira
En CSS, nous pouvons en cascade sur les propriétés en bas de la hiérarchie, mais pas dans le oppostite direction.
Pour modifier le style parent sur l'enfant, sans doute utiliser jQuery.
OriginalL'auteur Sukhminder Parmar