类型n的行为不符合预期

Question

HTML

<div id="content">          
    <div id="ok" class="content-block warning"><div></div><span>&#10003 Everything is OK!</span> </div>         
    <div id="module_1" class="content-block small">asfdasdf</div>
    <div id="module_2" class="content-block small">asdfasdf</div>
    <div id="module_3" class="content-block small">asfasdf</div>
    <div id="module_4" class="content-block small">asdfasdf</div>
    <div id="module_5" class="content-block small">asfasdf</div>
    <div id="module_6" class="content-block small">asdfasdf</div>
    <div id="module_7" class="content-block big"></div> 
    <div id="module_8" class="content-block big"></div>     
</div>

CSS

.small:nth-of-type(1) {
    background-color: black;
    border-style: solid;
    border-width: 15px;
    border-color: black;
}

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

In this example: http://jsfiddle.net/CNBsY/2/ I can't quite figure out why nth-of-type(1) doesn't select anything while nth-of-type(2) selects the first thing I want to select. Does anybody understand why this is happening?

Answer 1

That's because it's nth-of-type , not nth-of-class .

First div in your HTML does not have small class, so there is no element matching both .small and nth-of-type(1) .

Answer 2

The pseudo selector :nth-of-type() selects the type of tag .

In your example it is a div . As you set the selector on the class ( .small:nth-of-type(1) ) the css is aplied only if the first div has that class which isn't the case.

Answer 3

Try this :

HTML

<div id="content">          
    <span id="ok" class="content-block warning">&#10003 Everything is OK!</span>
    <ul>         
        <li id="module_1" class="content-block small">asfdasdf</li>
        <li id="module_2" class="content-block small">asdfasdf</li>
        <li id="module_3" class="content-block small">asfasdf</li>
        <li id="module_4" class="content-block small">asdfasdf</li>
        <li id="module_5" class="content-block small">asfasdf</li>
        <li id="module_6" class="content-block small">asdfasdf</li>
        <li id="module_7" class="content-block big"></li> 
        <li id="module_8" class="content-block big"></li>
    </ul>    
</div>

CSS

li:nth-of-type(1) {
    background-color: black;
    border-style: solid;
    border-width: 15px;
    border-color: black;
}

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

It's a better semantic.