CODEWITHSUNDEEP
csscss-selectors
Maartje
Maartje

Reputation: 688

I'm having problems with the nth-child

I am having soome problems with the :nth-child pseudoclass. What I want to do is select the 9th child, and than every following 6th child.

so first 9 than 15 than 21 than 27 than 33

etc.. etc..

I thought that it should work by putting this in my css:

.child-div:nth-child(9n+6) p {
    margin: 0;
}

It didn't..

I tried al diffrent formules like 10n+6, 6+9n and so on.. I followed this tutorial But that didn't explain it eighter.

Does someone know why it doesn't work, can you only make formules like 4n+4 or something?

Upvotes: 0

Views: 106

Answers (4)

sush
sush

Reputation: 379

It should be 

.child-div p:nth-of-type(6n+9){
        margin: 0;
    }

Upvotes: 1

Akaryatrh
Akaryatrh

Reputation: 531

You were close to solution :

.child-div:nth-child(6n+9) p {
    margin: 0;
}

Working example here : http://jsfiddle.net/5Y49A/1/

Upvotes: 2

Charlie74
Charlie74

Reputation: 2903

I believe you want 

.child-div:nth-child(6n+9) p {
    margin: 0;
}

This means every 6th item, starting at 9.

Using a formula (an + b). Description: a represents a cycle size, n is a counter (starts at 0), and b is an offset value.

Upvotes: 1

damian
damian

Reputation: 5444

That's what you need:

.child-div:nth-child(6n+9) p {
    margin: 0;
}

This means it selects every sixth element starting from the ninth.

Check out this online tool if you have problems with nth-child:

:nth tester

Upvotes: 2

Related Questions