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

Question

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 <div> avec un enfant <span> .

Possible?

Answer 1

Est-il possible de sélectionner un élément si celui-ci contient un précis de l'élément enfant?

Malheureusement pas encore.

Le CSS2 et CSS3 sélecteur de caractéristiques ne permettent pas de faire n'importe quelle sorte de mère de sélection.

Les "Sélecteurs de Niveau 4" cahier des charges* ajoute une nouvelle fonctionnalité qui permet de spécifier le "sujet" d'un sélecteur.

Le sujet est essentiellement l'élément dans la chaîne de sélecteur qui ont des styles appliqués à elle.

_{Exemple HTML}

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

Ce sélecteur serait de style l' span élément

p span {
    color: red;
}

Ce sélecteur serait de style l' p élément

!p span {
    color: red;
}

---

* Au moment de la rédaction, les "Sélecteurs de Niveau 4" spécification est encore dans la phase de rédaction. Autant que je sache, aucun des navigateurs ont mis en place le "sujet" fonctionnalité encore.

Answer 2

Pour être complet, je voulais souligner que les Sélecteurs 4 spécification (actuellement dans la proposition), ce sera possible. Plus précisément, nous aurons le Sujet Sélecteurs, qui sera utilisé dans le format suivant:

!div > span { /* style here */

L' ! avant l' div sélecteur indique que c'est l'élément à être de style, plutôt que de l' span. Malheureusement, aucun des navigateurs modernes (au moment de cette publication) ont mis en œuvre dans le cadre de leur prise en charge de CSS. Il est, cependant, la prise en charge via une bibliothèque JavaScript appelé Sel, si vous voulez aller sur le chemin de l'exploration plus loin.

Answer 3

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