CODEWITHSUNDEEP
htmlcsscss-selectors
Vamiris
Vamiris

Reputation: 91

CSS Select every 4th child not working

The nth-child selector nth-child(4n) should normally select every fourth child matching.

I have an example which matches every 3rd child, and I don't know why.

Could you help me with this?

.line_4:nth-child(4n){
   background: #ff0000;
}

http://jsfiddle.net/YPRB9/33/

.line_4:nth-child(4n) {
  background: #ff0000;
}
<div class="mod_article first last block" id="article-591">
  <h1 class="ce_headline first"> Kategorieübersicht</h1>
  <div class="ce_text line_4 block">
    <h3>hydraulische Handpumpen</h3>
  </div>
  <div class="ce_text line_4 block">
    <h3>elektr.Hydraulikpumpen</h3>
  </div>
  <div class="ce_text line_4 block">
    <h3>Handhebelventile &amp; Steuerventile</h3>
  </div>
  <div class="ce_text line_4 block">
    <h3>Hydraulikschläuche</h3>
  </div>
  <div class="ce_text line_4 block">
    <h3>Hydraulikkupplungen</h3>
  </div>
  <div class="ce_text line_4 block">
    <h3>Hydraulikverschraubungen</h3>
  </div>
  <div class="ce_text line_4 block">
    <h3>Kardanringe und Lagerböcke</h3>
  </div>
  <div class="ce_text line_4 last block">
    <h3>Hydraulikventile</h3>
  </div>
</div>

Upvotes: 2

Views: 3824

Answers (6)

Saso Lekoski
Saso Lekoski

Reputation: 66

According to the fiddle/code, what you are doing here is this:

  • Apply red background to the element with class line_4 (this is clear), but only if the element is 4th child which means the parent is <div class="mod_article first last block" id="article-591"> and the 1st child is the .

So basically if you want to achieve what you want to achieve without touching the CSS you should move h1 outside the parent div, or if you want without touching the HTML then as @Rion Williams suggested use 4n + 1 :)

Upvotes: 5

Rafe Goldberg
Rafe Goldberg

Reputation: 152

Per @Michael_B's answer, the :nth-child() pseudo-selector applies to all children of the parent element. However, assuming that the tag structure of the .mod_article module will always be consistent with your example, you might try your luck with the :nth-of-type selector.

The critical difference between these two selectors: where :nth-child() considers all children, :nth-of-type() only looks at children elements of a given tag. So to get the desired result, I replaced your CSS (in your linked jsFiddle) to the following:

.mod_article > div:nth-of-type(4n){
  background: #ff0000;
}

In your markup the initial <h1> tag was throwing off the count by one, so we can use the :nth-of-type() selector to correct for this by targeting only divs. Sorry if my explanation is a bit convoluted– but try messing around with the :nth-of-type() selector in your jsFiddle; you should get the hang of it pretty quickly.

(More details on the :nth-of-type() selector at the MDN docs.)

Upvotes: 1

Shanjedul Hassan
Shanjedul Hassan

Reputation: 11

Try this.... Hope it will work

.line_4:nth-child(4n-7) {  /* or 4n+1 */
   background: #ff0000;
}

And please look after about class. If i was there my code will be as like

li:nth-child(4n-7) {  /* or 4n+1 */
    color: green;   
}

or

.line:nth-child(4n-7) {  /* or 4n+1 */
       background: #ff0000;
  }

Upvotes: 0

Michael Benjamin
Michael Benjamin

Reputation: 371539

The nth-child() pseudo-class counts all children of the same parent.

It appears you're trying to count all elements containing the class line_4. The selector doesn't care about class.

It starts counting from the first child, which happens to be h1 in your code.

Since all elements with class line_4 also happen to be divs, and there are no other div siblings in the container, consider using nth-of-type() instead (revised demo).

More details in the spec: https://www.w3.org/TR/css3-selectors/#selectors

Upvotes: 6

Nenad Vracar
Nenad Vracar

Reputation: 122077

You can use :nth-of-type() if you are using line_4 class only on div elements so it should work in your example DEMO

.line_4:nth-of-type(4n){
  background: #ff0000;
}

Upvotes: 1

Rion Williams
Rion Williams

Reputation: 76577

The nth-child() selector will include all children that have the same parent, additionally, it's going to include the first <h1> element along with your other classes, which throws things off by 1.

If you wanted to match every 4th element with your existing code, consider using 4n+1 as your nth-child argument (to start after the <h1> element) :

.line_4:nth-child(4n + 1){
 background: #ff0000;
}

Example

.line_4:nth-child(4n + 1){
 background: #ff0000;
}
<div class="mod_article first last block" id="article-591">
    <h1 class="ce_headline first"> Kategorieübersicht</h1>
    <div class="ce_text line_4 block">    
        <h3>hydraulische Handpumpen</h3>
    </div>
    <div class="ce_text line_4 block">
        <h3>elektr.Hydraulikpumpen</h3>
    </div>
    <div class="ce_text line_4 block">
        <h3>Handhebelventile &amp; Steuerventile</h3>
    </div>
    <div class="ce_text line_4 block">
        <h3>Hydraulikschläuche</h3>
    </div>
    <div class="ce_text line_4 block">
        <h3>Hydraulikkupplungen</h3>
    </div>
    <div class="ce_text line_4 block">
        <h3>Hydraulikverschraubungen</h3>
    </div>
    <div class="ce_text line_4 block">
        <h3>Kardanringe und Lagerböcke</h3>
    </div>
    <div class="ce_text line_4 last block">
        <h3>Hydraulikventile</h3>
    </div>
</div>

Upvotes: 2

Related Questions