web-dev-qa-db-fra.com

Sélecteur CSS - élément avec un enfant donné

Je cherche à faire un sélecteur qui sélectionnera tous les éléments s'ils ont un élément enfant spécifique. Par exemple, sélectionnez tous les <div> avec un enfant <span>.

Possible?

csscss-selectors
140
aepheus

Est-il possible de sélectionner un élément s'il contient un élément enfant spécifique?

Pas encore, malheureusement.

Les spécifications du sélecteur CSS2 et CSS ne permettent aucune sorte de sélection parent.

Une note sur les modifications de spécifications

Ceci est un avertissement concernant l'exactitude de cet article à partir de maintenant. Les sélecteurs de parents en CSS ont été discutés pendant de nombreuses années. Comme aucun consensus n'a été trouvé, les changements continuent. Je vais essayer de garder cette réponse à jour, mais sachez que il peut y avoir des inexactitudes dues à des changements dans les spécifications .

Un ancien "Projet de niveau de travail sur les sélecteurs de niveau 4" décrivait une fonctionnalité qui était la possibilité de spécifier le "sujet" d'un sélecteur . Cette fonctionnalité a été supprimée et ne sera pas disponible pour les implémentations CSS .

Le sujet allait être l'élément de la chaîne de sélecteur auquel les styles seraient appliqués.

Exemple HTML
<p><span>lorem</span> ipsum dolor sit amet</p>
<p>consecteture edipsing elit</p>

Ce sélecteur appelle l’élément span

p span {
    color: red;
}

Ce sélecteur appelle l’élément p

!p span {
    color: red;
}

Un plus récent "Brouillon de l'éditeur de sélecteurs de niveau 4" inclut "La pseudo-classe relationnelle: :has()"

:has() permettrait à un auteur de sélectionner un élément en fonction de son contenu. D'après ce que j'ai compris, cette option a été choisie pour assurer la compatibilité avec :has() de jQuery personnalisé pseudo-sélecteur *.

Quoi qu’il en soit, reprenons l’exemple précédent pour sélectionner l’élément p contenant un élément span que l’on pourrait utiliser:

p:has(span) {
    color: red;
}

* Cela me fait me demander si jQuery avait implémenté des sujets de sélecteur si les sujets seraient restés dans la spécification.

108
zzzzBov

Mise à jour 2019

Le :has() pseudo-sélecteur est défini dans la spécification CSS Selectors 4 et traitera ce cas d'utilisation une fois implémenté.

Pour l'utiliser, nous allons écrire quelque chose comme:

.foo > .bar:has(> .baz) { /* style here */ }

Dans une structure comme:

<div class="foo">
  <div class="bar">
    <div class="baz">Baz!</div>
  </div>
</div>

Ce CSS ciblera le .bar _ div - car il a la fois un parent .foo et à partir de position dans le DOM, > .baz résout un élément cible valide.

Réponse originale (à des fins historiques) - cette partie n'est plus exacte

Pour être complet, je voulais signaler que dans la spécification Selectors 4 (actuellement en proposition), cela deviendra possible. Plus précisément, nous allons gagner Subject Selectors , qui sera utilisé dans le format suivant:

!div > span { /* style here */

Le ! avant le sélecteur div indique qu'il s'agit de l'élément à styler, plutôt que le span. Malheureusement, aucun navigateur moderne (à la date de cette publication) n'a implémenté cette fonctionnalité dans le cadre de son support CSS. Il existe cependant une prise en charge via ne bibliothèque JavaScript appelée Sel , si vous souhaitez aller plus loin dans l'exploration.

45
Troy Alford

Je conviens que ce n'est pas possible en général.

La seule chose que CSS3 puisse faire (ce qui a aidé dans mon cas) est de sélectionner des éléments sans enfants:

table td:empty
{
   background-color: white;
}

Ou avoir des enfants (y compris le texte):

table td:not(:empty)
{
   background-color: white;
}
37
Sebastian K