web-dev-qa-db-fra.com

CSS nth-child pour plus que et moins que

Dans mon HTML j'ai,

<div class="container">
</div>
<div class="container">
</div>
<div class="container">
</div>
<div class="container">
</div>
..................
..................

Dans le code HTML ci-dessus, j'ai la classe container. Dans mon CSS, je dois ajouter quelques styles à .container:nth-child(3,4,5,6,..and so on). Cela signifie que je dois appliquer tous les nth-child À côté de 1 et 2.

htmlcsscss3css-selectors
53
user960567

:nth-child() ne fonctionne pas sur les classes, il recherche l'élément lui-même. Vous devez emballer les divs .container avec un wrapper et utiliser les éléments suivants:

.wrapper div:nth-child(n+3) {
   /* put your styles here... */
}

<div class="wrapper">
    <div class="container"></div>
    <div class="container"></div>
    <div class="container"></div>
    <div class="container"></div>
</div>

Démo de travail.

Clarifier sur :nth-child()

Utiliser .container:nth-child(n+3) peut ou peut ne pas fonctionner. Parce que :nth-child() pseudo-classe représente nth élément enfant correspondant au sélecteur (.container dans ce cas).

Si l'élément .container n'est pas le nième enfant de son parent, il ne sera pas sélectionné.

De la Spec :

La notation de pseudo-classe :nth-child(an+b) représente un élément précédé de an+b-1 frères dans l'arborescence du document, pour tout entier positif ou zéro valeur de n, et possède un élément parent.

Considérons cet exemple:

<div class="parent">
    <div>1st</div>
    <div>2nd</div>
    <div>3rd</div>
    <div class="container">4th</div>
    <div class="container">5th</div>
    <div class="container">6th</div>
    <div>7th</div>
    <div class="container">8th</div>
    <div>9th</div>
</div>

Dans ce cas, .container:nth-child(2) ne sélectionnera pas le 2e élément div.container (qui a le contenu 5th). Parce que cet élément n'est pas l'enfant 2nd de son parent, dans l'arborescence enfants de ce dernier.

De plus, .container:nth-child(n+3) sélectionnera tous les éléments div.container car n commence à partir de 0 pour le premier élément de l'arborescence des enfants du parent et le premier div.container est le . 4ème enfant de son parent.

n starts from 0

n = 0: (0 + 3) = 3 => 3rd element
n = 1: (1 + 3) = 4 => 4th element
n = 2: (2 + 3) = 5 => 5th element
...

Ainsi, div.container:nth-child(n+3) représente tous les 3e , 4e , ( 5e , ... éléments enfants correspondant au sélecteur div.container.

Démo en ligne.

89
Hashem Qolami

css:

.wrapper div:nth-child(n+3) {    /* you style*/   }

Motif et explication 

 (0+3) = 3 = 3rd Element
 (1+3) = 4 = 4th Element
 (2+3) = 5 = 5th Element  and so on ... where n=0,1,2,3.....

Exemple en direct >>

9
suraj rawat

Essayez le code suivant. Il appliquera des styles à tous les .container classes sauf 1 et 2:

.container+.container~.container{
   /*styles*/
}

violon de démonstration

3
Zword

Si ce n'est que 1 et 2, vous ne voulez pas que le style soit appliqué, vous pouvez faire quelque chose comme ceci:

.container {
    background: yellow;
}

.container:first-child,
.container:first-child + .container {
    background: transparent;
}

L'arrière-plan jaune s'appliquera à tous les conteneurs, à l'exception du premier enfant et de celui qui le suit.

2
pstenstrm

Pour ceux qui recherchent une solution dynamique (si vous ne voulez pas coder en dur les largeurs de colonne, etc.), j'ai publié un solution javascript , basé sur cette excellente réponse .

Exemple de travail

Utilisation: 

// After including tableColumnFreeze.js
var freezer = document.getElementById('freezer');
new TableColumnFreeze(freezer);

Balisage: 

<div id="freezer">
  <table>
    <thead>
      <tr><th>Column 1</th><th>Column 2</th><th>Column 3</th></tr>
    </thead>
    <tbody>
      <tr><th>Frozen</th><td>Not frozen</td><td>Not frozen</td></tr>
      <tr><th>Frozen</th><td>Not frozen</td><td>Not frozen</td></tr>
      <tr><th>Frozen</th><td>Not frozen</td><td>Not frozen</td></tr>
      <tr><th>Frozen</th><td>Not frozen</td><td>Not frozen</td></tr>
     </tbody>
  </table>
</div>
1
toomanyredirects