nth-child() selector working only on select few elements

Question

I have the following markup:

<div class="heading-container">
        <p class="stroke">Who we</p>
        <h2 class="section-title extreme-bold">Contact us</h2>
        <p class="stroke"></p>
</div>

Now I can select the 1st .stroke using the following selector:

.heading-container .stroke:nth-child(1){
    max-width: 200px;
}

but the The following does't work for the 2nd stroke class:

.heading-container .stroke:nth-child(2){
    max-width: 200px;
}

but the following again works:

.heading-container .stroke:nth-child(3){
    max-width: 200px;
}

Now why does the value 3 work for the 2nd nth-child slection?

For the 2nd nth-child is't the followig suppose to be appropriate:

.heading-container .stroke:nth-child(2){
    max-width: 200px;
}

@Tenali i din see that line of code is working?can you please say how that line solved your problem? — Leo the lion, May 25 '15 at 08:28
@tenali i checked your fiddle and still h2 is not selected but the next one got red background..then? — Leo the lion, May 25 '15 at 09:15
@Leothelion , The objective is to select the last .stroke class `.heading-container .stroke:nth-of-type(2){` does the job , `.heading-container .stroke:nth-child(2){` deos't . — Tenali Raman, May 25 '15 at 09:46

score 10 · Accepted Answer · answered May 25 '15 at 08:22

nth child, as explained here selects based on elements that are the nth child of their parents.

so 1 is working, because the first stroke is the first child. 3 works because the second stroke is the third child. 2 won't work, because there are no strokes that are 2nd children, just h2

nth-child() selector working only on select few elements

1 Answers1