De Style CSS si pas d'enfants
J'ai besoin d'appliquer un style à un élément si une classe n'est PAS un enfant de l'élément.
<table class="printlist" style="width:100%">
<tbody>
<tr class="list_wanted0"><td>Whatever...</td></tr>
<tr class="list_wanted1"><td>
<div class="journal">
<table><tbody>
<tr><td style="width: 9em">2011-03-12 09:36</td></tr>
</tbody></table>
</div>
</td></tr>
</tbody>
</table>
L'exemple ci-dessus est réduite à un minimum, afin de démontrer la structure.
Ce que je veux, c'est avoir la :Hover
propriétés seulement d'appliquer .printlist tr
si <tr>
a PAS .journal
enfant.
La .list_wanted0
et .list_wanted1
ne peut pas être utilisé pour sélectionner le .journal
, il peut être d'autres noms de classe là.
Le CSS, j'ai essayé:
.printlist tr:Hover * :not(itemjournal) {
color: #000;
background: #aaa
}
Évidemment, cela ne fonctionne pas comme j'en avais l'intention.
Si vous avez besoin de plus d'informations, n'hésitez pas à demander,
Merci.
Vous ne pouvez pas le style d'un ancêtre en fonction de ses enfants avec CSS; vous pouvez utiliser JavaScript (ou une bibliothèque) pour appliquer un nom de classe ou d'ajouter des styles en fonction d'une telle condition, mais pas avec css.
OriginalL'auteur Max Kielland | 2011-03-12
Vous devez vous connecter pour publier un commentaire.
C'est impossible avec les sélecteurs CSS seul; vous ne pouvez pas utiliser les CSS pour déterminer si un élément a un certain type de l'enfant ou pas. Votre meilleur pari est d'utiliser JavaScript pour appliquer des classes, et le style de ces classes à la place.
Un exemple d'utilisation de la jQuery-seulement
:a()
sélecteur:Ensuite appliquer des styles à
.printlist tr.nojournal:hover
.Xa: De cours - ma réponse a été mal formulée, donc j'ai édité.
OriginalL'auteur BoltClock
Oui, malheureusement, vous aurez besoin d'aller avec un javascript solution telle que jQuery suggéré par BoltClock, surtout si vous voulez le style CSS pour être compatible sur tous les navigateurs, compte tenu du fait que tous les navigateurs n'implémentent l'complet CSS spécifications de la norme.
Si vous voulez continuer à aller de l'avant avec les feuilles de style CSS uniquement, essayez de rechercher un cheat-sheet table de quels types de sélecteurs CSS sont pris en charge dans les navigateurs/versions.
OriginalL'auteur
Je l'ai eu à travailler
J'ai pensé que je pourrais répondre à ma propre question et de présenter mon pur CSS solution.
La solution a été de créer deux classes et de les combiner dans le
<tr>
J'ai seulement besoin d'ajouter une info-catégorie:
Sur tous les
<tr>
lignes besoins placez-je combiner importe quelle autre classe que j'aime avec le.list_hover
de la classe et de l'exclure de la.journal
ligne.Maintenant, il fonctionne exactement comme prévu. Je vous remercie pour toute l'aide que.
Donc, si j'avais ajouté le hover de la classe dès le début, mais ne définissent pas le
:Hover
droit, s'il avait été un pur CSS, alors? Même chose... 😛Je souhaite que vous pourriez downvote un commentaire. Quelle est la valeur CSS sans balisage? Vous ne pouvez pas faire n'importe quoi avec "pure css" si le correspondant balisage est jeté par la fenêtre..
Tout à fait d'accord avec le premier commentaire. Cette "solution" ne répond pas à la question d'origine. Il n'est pas "appliquer un style à un élément si une classe n'est PAS un enfant de l'élément", au lieu de cela il juste d'appliquer un style à une classe, et que la classe idéalement être ajoutés si nécessaire sans expliquer comment. Pour être juste, l'OP n'a jamais dit qu'il fallait être pur CSS, mais en fait, BoltClock première réponse n'est exactement ce que l'OP "réponse" ne, grâce à JS. Depuis BoltClock réponse fournit également les raisons pour lesquelles, il est le préféré de réponse.
OriginalL'auteur Max Kielland