CSS - Premier enfant sans une certaine classe

Est-il possible d'écrire une règle CSS pour sélectionner le premier enfant d'un élément sans une classe spécifique?

exemple:

<div>
    <span class="common-class ignore"></span>
    <span class="common-class ignore"></span>
    <span class="common-class"></span>
    <span class="common-class"></span>
</div>

Dans ce cas, je voudrais sélectionner la première span sans classe ignore.
J'ai essayé ceci, mais ne semble pas fonctionner:

.common-class:first-child:not(.ignore) {
    ...some rules...
}

Mise à JOUR:

Si j'ajoute une classe à la div parent nommé parent-class, une version modifiée de la sélection proposée par Jukka fonctionne sauf lorsque le premier span avec classe ignore vient après le premier sans. Le ci-dessus mentionné de sélection est le suivant:

.parent-class > .common-class.ignore + .common-class:not(.ignore) {
    ...some rules...
}
  • que faire si vous essayez de cette façon, vérifier la DÉMO. jsbin.com/jozibazi/1/edit
  • Dans ce cas précis: .ignore + .common-class {/* style the first */} pourrait fonctionner, mais il est probablement assez fragile (et cette approche permettrait de style d'un élément de .common-class à chaque fois qu'il a suivi un élément de .ignore).
InformationsquelleAutor se7entyse7en | 2014-08-06
  1. 13

    Cette question est similaire à Sélecteur CSS pour le premier élément avec la classe, sauf pour le premier élément sans une classe. Comme mentionné, :first-child:not(.ignore) représente un élément qui est le premier enfant de sa mère et n'a pas la classe "ignorer", pas le premier enfant de correspondance le reste de la sélection.

    Vous pouvez utiliser de la primauté de la technique avec un frère ou une sœur du combinator que j'ai décrit dans ma réponse à la question, en remplaçant le sélecteur de classe avec le :not() pseudo-classe contenant un sélecteur de classe:

    .common-class:not(.ignore) {
    /* Every span without class .ignore, including the first */
}

.common-class:not(.ignore) ~ .common-class:not(.ignore) {
    /* Revert above declarations for every such element after the first */
}
    • Fonctionne parfaitement, doit être marqué correct.
    • Pas si vous avez".cc|.cc.ignorer|.cc|.cc.ignorer'... etc. Vous ne pouvez pas arrêter CSS après le premier match. Il va continuer à chercher le motif jusqu'à la fin de DOM. (ou malheur?)
    InformationsquelleAutor BoltClock
  2. 6

    Cette sélectionne tous span avec un .common-class et sans .ignore classe.

    span.common-class:not(.ignore) {
  color: blue;
}

    Mais, parce que nous voulons sélectionner uniquement la première, vous pouvez remplacer les frères et sœurs qui suivent avec le ~ sélecteur.

    span.common-class:not(.ignore) ~ span {
  color: black;   /* or   color: inherit; */
}

    jsBin démo

    Si vous êtes déjà à l'aide de jQuery, cela peut aussi être fait avec 

    $("span.common-class:not(.ignore):first").css('color', 'blue');
    InformationsquelleAutor Jose Rui Santos
  3. 5

    Non, il n'est pas possible. Le sélecteur de :first-child:not(.ignore) sélectionne un élément qui est le premier enfant de son parent et n'appartient pas à la classe ignore. Il n'y a pas de “premier de la classe” sélecteur et pas de “premier pas de la classe” sélecteur soit.

    Vous pouvez utiliser le sélecteur de .ignore + :not(.ignore), mais il correspond à tout élément qui n'est pas dans la classe ignore et suit immédiatement un élément de la classe. Mais elle correspond à trop de choses, et pas seulement le premier de ces éléments. En fonction de la structure de majoration, ce sélecteur peut toujours être adapté à une situation particulière, même si elle n'est pas une réponse à la question générale posée.

    • J'ai utiliser le sélecteur vous l'avez suggéré,.ignore + :not(.ignore), mais pour éviter de trop d'éléments, j'ai ajouté une classe à la div parent (parent-class) et à utiliser ce sélecteur .parent-class > .ignore + :not(.ignore)
    InformationsquelleAutor Jukka K. Korpela
  4. 0

    Vous n'avez pas à sélectionner la div à l'aide d'une classe. Quels sont les autres css solutions comme nth-child etc.? Bien sûr, cela nécessite la connaissance de la structure d'un document.

    • Pas de réponse. Doit avoir été posté un commentaire, si à tous.
    • Eh bien, cela dépend de réglage réel, c'est peut-être la structure fixe, même si je reconnais que j'ai mal interprété la question. La paix et l'amour
    InformationsquelleAutor ondObno