pas: sélecteur du premier enfant

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"?

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.

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.

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 .

div li~li {
    color: red;
}

Prend en charge IE7

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) {}

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)){}

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)

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*/
}

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 ...