Question

Unfortunately, for me, the nth-of-type selector is refusing to obey the orders in a simple scenario shown here

This is the HTML used to test:

<div class="help-title">
    TITLE
</div>
<div class="help-warn-left">
    ERROR
</div>
<div class="help-warn-right">
    ERROR MESS
</div>

<div class="help-section">
    <div class="help-header">
        TEXT1
    </div>
    <div class="help-body">
        TEXT2
    </div>
</div>


<div class="help-section">
    <div class="help-header">
        TEXT3
    </div>
    <div class="help-body">
        TEXT4
    </div>
</div>


<div class="help-section">
    <div class="help-header">
        TEXT5
    </div>
    <div class="help-body">
        TEXT6
    </div>
</div>


<div class="help-section">
    <div class="help-header">
        TEXT7
    </div>
    <div class="help-body">
        TEXT8
    </div>
</div>

This is the CSS:

div.help-section{
    color:blue;
    /*background:yellow;*/
}

div.help-section:nth-of-type(2)
{
background:#ff0000;
}

When I remove comment around the yellow background, the help-section will have a yellow background, so it clearly agrees to having a background set. However, the order given below, which demands that the 2nd help-section have a red background but it is simply refusing to obey me! Is it my browser? Firefox v24.0? Or is it I that doesn't know what nth-of-type does?

What I expect it to do is to select the 2nd div with the class help-section found within the body. Obviously, I am missing something here.

Was it helpful?

Solution 2

Another option would be to use a different element just for these sections

fiddle

HTML

<section class="help-section">
    <div class="help-header">
        TEXT1
    </div>
    <div class="help-body">
        TEXT2
    </div>
</section>

CSS

section:nth-of-type(2) {
    background-color: red;
}

OTHER TIPS

I believe the issue is that you have to specify the parent from which you want to count the child that match your selector. So you would have to change your css to be similar to:

div.container div.help-section:nth-of-type(3)
{
    color:red;
}

and add

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

around your helper section. I tried this using body selector but with no luck.

More info here : http://reference.sitepoint.com/css/pseudoclass-nthoftype

JSFIDDLE

http://jsfiddle.net/HJm49/1/

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top