CODEWITHSUNDEEP
csscss-selectors
Camathon
Camathon

Reputation: 524

css style for :nth-child selector on class includes other elements

Hi smart people of stack, I have this completely unreasonable issue with :nth-child. Its not "locking" on to the specific class Im trying to attach it too.

In my first picture I had to make it skipp the first 3 excessive elements I want to skipp even though I've specified it to apply to the ".pageGrid" class. As you can see the first <hr>, then the <div>, then another <hr> have no class.

enter image description here

My second issue uses the same css as in another place and I had to add a invisible element because the :nth-child is again not applying to only the element I want to apply it on.

enter image description here

What am I missing?! Im really not getting this..

Edit:

Heres some code:

.wrapperProductList .prodListPage:nth-child(4n+1) {
    margin-right: 0;
}

The "+1" is to skipp the first element..

.pageGrid:nth-child(3n+3) {
    margin-right: 0!important;
}

The "+3" here is to skipp the 3 first element that dont even have the .pageGrid class :(

<div class="clearfix wrapperProductList pageGrid">
<h1>Compact/Stackable</h1>
<a class="prodListPage" href="">
<a class="prodListPage" href="">
<a class="prodListPage" href="">
<a class="prodListPage" href="">

Belongs to this markup

Upvotes: 0

Views: 833

Answers (1)

BoltClock
BoltClock

Reputation: 724222

:nth-child() doesn't "lock" onto class names or tag names the way you think it does. It only cares that the element is the nth child of its parent together with all of its other siblings, regardless of whether the other siblings are different elements or don't have specific classes, etc.

Having the +1 and +3 there is fine if you know you always want to skip the first element and first 3 elements respectively. That's just how :nth-child() works.

Upvotes: 3

Related Questions