web-dev-qa-db-fra.com

non: premier sélecteur d'enfants

J'ai une balise div contenant plusieurs balises ul.

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

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

Cependant, les tentatives suivantes pour définir les propriétés CSS pour chaque balise ul, à l'exception de 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"?

csscss-selectors
647
OTAR

Une des versions que vous avez publiées fonctionne réellement 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 anciens navigateurs, ou si vous êtes gêné par le limitation du sélecteur :not (il accepte uniquement un sélecteur simple ), vous pouvez utiliser une autre technique:

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

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 default pour chaque attribut CSS que vous définissez.

1135
Jon

Cette solution CSS2 ("toute ul après une autre ul") fonctionne également et est supportée par plus de navigateurs.

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

Contrairement à :not et :nth-sibling, le sélecteur de frères adjacents est pris en charge par IE7 +.

Si vous avez JavaScript modifie ces propriétés après le chargement de la page, vous devez examiner quelques bugs connus dans les implémentations IE7 et IE8. Voir ce lien .

Pour toute page Web statique, cela devrait fonctionner parfaitement.

137
Alex Quinn

Puisque :not n'est pas accepté par IE6-8, je vous suggérerais ceci:

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

Donc, vous choisissez chaque ul dans son élément parent sauf le premier.

Reportez-vous à l'article de Chris Coyer "Utile: nth-child Recipes" pour plus d'informations sur nth-childexamples . 

65
ed1nh0
div li~li {
    color: red;
}

Prend en charge IE7

15
zloctb

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

Au lieu de cela, essayez ceci: 

ul:not(:first-of-type) {}
5
Vinny Troia

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

Comme j'ai utilisé ul:not(:first-child) est une solution parfaite.

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

Pourquoi est-ce parfait? En utilisant ul:not(:first-child), nous pouvons appliquer le CSS aux éléments internes. Comme les tags li, img, span, a etc.

Mais quand 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 limitent uniquement les CSS au niveau ul. Supposons que nous ne puissions pas appliquer CSS sur li en tant que «div ul + ul li».

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

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

etc ...

0
Gufran Hasan

Vous pouvez utiliser votre sélecteur avec :not comme ci-dessous, vous pouvez utiliser n’importe quel sélecteur dans la :not()

any_CSS_selector:not(any_other_CSS_selector){
    /*YOUR STYLE*/
}
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
Nasser