web-dev-qa-db-fra.com

Comment sauter le premier enfant?

<div id="main">    
  <p> one </p>    
  <p> two </p>
  <p> three </p>
  <p> four </p>
  <p> five </p>
<div>

Je ne veux pas appliquer css le premier <p>One</p>

p {color:red}

J'ai besoin juste en face de :first-child.

csscss-selectors
45
Jitendra Vyas

Avec la pseudo-classe de négation :

p:not(:first-child) { color: red; }

Le support du navigateur est très fort maintenant, mais les alternatives incluent:

p { color: red; }
p:first-child { color: black; }

et:

* + p { color: red; }
79
Quentin

La solution :not() de Quentin fonctionne très bien pour les navigateurs modernes:

p:not(:first-child) { color: red; }

Son alternative pour les navigateurs plus anciens fonctionne également bien, sauf qu'elle utilise une règle impérative pour le premier enfant. Ce n'est pas requis , cependant ...

Vous pouvez simplement utiliser un sélecteur frère pour appliquer la même règle que celle ci-dessus, sans avoir à la remplacer pour p:first-child. L'une ou l'autre de ces règles fonctionnera:

Les deux combinateurs fonctionnent de manière identique ici; les différences subtiles entre eux ne s'appliquent que lorsque vous avez d'autres éléments dans le mélange. Reportez-vous aux liens fournis pour plus de détails.

22
BoltClock

Je pense que :nth-child() fera l'affaire.

p:nth-child(n+2){
  background-color:red;
}

Cela stylise toutes les balises p à l'exception de la première car elle démarre sur le 2ème enfant. Vous pouvez ensuite styliser la première balise p séparément avec p:first-child.

13
jjgarza

Fonctionne à chaque fois et n'a pas besoin d'être annulé:

p + p {
  /* do 15 special things */
}

Il faut chaque P précédé d'un P. Ne définissez pas de propriété pour l'annuler plus tard. Vous devez seulement ajouter, si vous pouvez l'aider, pas soustraire.

6
Rudie

Vous pouvez également utiliser l'opérateur "tilde" (~)

<!DOCTYPE html>
<html>
<head>
    <style> 
    p ~ p {
        background:#ff0000;
        }
    </style>
</head>
<body>

    <h1>This is a heading</h1>
    <p>The first paragraph.</p>
    <p>The second paragraph.</p>
    <p>The third paragraph.</p>
    <p>The fourth paragraph.</p>


</body>
</html>

Voici la démo JSFiddle http://jsfiddle.net/RpfLa/344/

A fait un test rapide sur FF 17, Chrome 23, Safari 5.1, IE9, IE1-8 en mode compaitability

2
MonteCristo

:nth-child(1n+2) a bien fonctionné pour moi. Cela saute le premier enfant et continue vers le reste des éléments.

p:nth-child(1n+2){
  color: red; 
}

J'espère que cela t'aides.

0
Alfredo Barillas