pas: sélecteur du premier enfant


811

J'ai un divtag contenant plusieursul balises.

Je ne peux définir les propriétés CSS que pour la première ulbalise:

div ul:first-child {
    background-color: #900;
}

Cependant, mes tentatives suivantes pour définir des propriétés CSS pour chaque autre ulbalise, sauf la première, ne fonctionnent pas:

div ul:not:first-child {
    background-color: #900;
}

div ul:not(:first-child) {
    background-color: #900;
}

div ul:first-child:after {
    background-color: #900;
}

Comment puis-je écrire en CSS: "chaque élément, sauf le premier"?

Réponses:


1415

L'une des versions que vous avez publiées fonctionne en fait pour tous les navigateurs modernes (où les sélecteurs CSS de niveau 3 sont pris en charge ):

div ul:not(:first-child) {
    background-color: #900;
}

Si vous devez prendre en charge les navigateurs hérités, ou si vous êtes gêné par la limitation:not du sélecteur (il n'accepte qu'un simple sélecteur comme argument), vous pouvez utiliser une autre technique:

Définissez une règle dont la portée est supérieure à celle que vous envisagez, puis révoquez-la conditionnellement, en limitant sa portée à ce que vous avez l'intention:

div ul {
    background-color: #900;  /* applies to every ul */
}

div ul:first-child {
    background-color: transparent; /* limits the scope of the previous rule */
}

Lorsque vous limitez la portée, utilisez la valeur par défaut pour chaque attribut CSS que vous définissez.


savez-vous exactement sur quelles versions cela n'est pas pris en charge?
Simon_Weaver

9
@Simon_Weaver: En pratique tout sauf IE <9 le supporte. Caniuse.com est une excellente ressource pour obtenir ce type d'informations .
Jon

2
Hmm .. attention aux restrictions de la première solution: caniuse.com/#feat=css-not-sel-list La seconde me paraissait plus raisonnable. Merci!
iorrah

@iorrah votre lien caniuse est pour une liste de sélecteurs, et oui, le support est encore très limité. L'OP n'utilise pas de liste de sélecteurs. Je pense donc que https://caniuse.com/#feat=css-sel3 est plus approprié avec un grand soutien au-delà des jours d'IE8.
secretwep

Cela fonctionne même sans l'élément div au départ en chrome.
Achraf JEDAY

158

Cette solution CSS2 ("toute ulaprès l'autre ul") fonctionne également et est prise en charge par plus de navigateurs.

div ul + ul {
  background-color: #900;
}

Contrairement à :notet :nth-sibling, le sélecteur de frère adjacent est pris en charge par IE7 +.

Si JavaScript change ces propriétés après le chargement de la page, vous devriez regarder certains bogues connus dans les implémentations IE7 et IE8 de ceci. Voir ce lien .

Pour toute page Web statique, cela devrait fonctionner parfaitement.


4
@Leven: Ce lien quirksmode indique qu'il devrait fonctionner dans IE7, mais uniquement de manière statique. Si votre JS place un autre élément devant lui, il peut ne pas être mis à jour correctement. Est-ce le problème que vous avez vu?
Alex Quinn

pourrait être intéressant de noter que dans une séquence d'éléments comme: ul ul div ul(où ces éléments sont des frères et sœurs), seul le deuxième ul sera sélectionné, car le dernier n'a pas de ulprécédent pour lui
Brian

79

Puisqu'il :notn'est pas accepté par IE6-8 , je vous suggère ceci:

div ul:nth-child(n+2) {
    background-color: #900;
}

Vous choisissez donc chaque ulélément dans son élément parent, sauf le premier .

Reportez-vous à l'article "Utile: Recettes du nième enfant" de Chris Coyer pour d'autres nth-child exemples .


qui utilise encore IE6-8 en 2019?
oldboy

15
Considérant que la réponse était de 2013?
aasukisuki


14

not(:first-child)ne semble plus fonctionner. Au moins avec les versions les plus récentes de Chrome et Firefox.

Essayez plutôt ceci:

ul:not(:first-of-type) {}

6
Ils fonctionnent tous les deux, mais ils ont une signification différente. ul:not(:first-child)signifie littéralement "tout ulélément qui n'est pas le premier enfant de son parent", donc il ne correspondra même pas au 1er uls'il est précédé d'un autre élément ( p, en-tête, etc.). Au contraire, ul:not(:first-of-type)signifie "tout ulélément sauf le 1er uldans le conteneur". Vous avez raison de dire que OP avait probablement besoin de ce dernier comportement, mais votre explication est plutôt trompeuse.
Ilya Streltsyn

9

Vous pouvez utiliser n'importe quel sélecteur avec not

p:not(:first-child){}
p:not(:first-of-type){}
p:not(:checked){}
p:not(:last-child){}
p:not(:last-of-type){}
p:not(:first-of-type){}
p:not(:nth-last-of-type(2)){}
p:not(nth-last-child(2)){}
p:not(:nth-child(2)){}

4

Je n'ai pas eu de chance avec certains des éléments ci-dessus,

C'était le seul qui fonctionnait vraiment pour moi

ul:not(:first-of-type) {}

Cela a fonctionné pour moi lorsque j'essayais que le premier bouton affiché sur la page ne soit pas affecté par une option de marge gauche.

ce fut l'option que j'ai essayé en premier, mais cela n'a pas fonctionné

ul:not(:first-child)


4

Vous pouvez utiliser votre sélecteur avec :notcomme ci-dessous, vous pouvez utiliser n'importe quel sélecteur à l'intérieur du:not()

any_CSS_selector:not(any_other_CSS_selector){
    /*YOUR STYLE*/
}

vous pouvez également utiliser :notsans sélecteur de parent.

   :not(:nth-child(2)){
        /*YOUR STYLE*/
   }

Plus d'exemples

any_CSS_selector:not(:first-child){
    /*YOUR STYLE*/
}
any_CSS_selector:not(:first-of-type){
    /*YOUR STYLE*/
}
any_CSS_selector:not(:checked){
    /*YOUR STYLE*/
}
any_CSS_selector:not(:last-child){
    /*YOUR STYLE*/
}
any_CSS_selector:not(:last-of-type){
    /*YOUR STYLE*/
}
any_CSS_selector:not(:first-of-type){
    /*YOUR STYLE*/
}
any_CSS_selector:not(:nth-last-of-type(2)){
    /*YOUR STYLE*/
}
any_CSS_selector:not(:nth-last-child(2)){
    /*YOUR STYLE*/
}
any_CSS_selector:not(:nth-child(2)){
    /*YOUR STYLE*/
}

0

Comme je l'ai utilisé, ul:not(:first-child)c'est une solution parfaite.

div ul:not(:first-child) {
    background-color: #900;
}

Pourquoi est-ce parfait parce qu'en utilisant ul:not(:first-child), nous pouvons appliquer CSS sur les éléments internes. Commeli, img, span, a balises, etc.

Mais lorsqu'il est utilisé d'autres solutions:

div ul + ul {
  background-color: #900;
}

et

div li~li {
    color: red;
}

et

ul:not(:first-of-type) {}

et

div ul:nth-child(n+2) {
    background-color: #900;
}

Celles-ci ne restreignent que le CSS de niveau ul. Supposons que nous ne pouvons pas appliquer CSS sur li`div ul + ul li '.

Pour les éléments de niveau intérieur, la première solution fonctionne parfaitement.

div ul:not(:first-child) li{
        background-color: #900;
    }

etc ...

En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.