Q:

nth-of-type acting like nth-child

I have this html code:
 <div class="productWarp">
    <div class="clear"></div>
    <div class="productLine" ></div>
    <div class="clear"></div>
    <div class="productLine" ></div>
    </div>

css:
  .productWarp .productLine {
        background-color: #DFDDDD;
        border-bottom: 1px solid #B7B7B7;
        padding-right: 5px;
    }

    .productWarp .productLine:nth-of-type(2)
    {
        background-color: white;
        border-bottom: 1px solid #B7B7B7;
        padding-right: 5px;
    }

This choosing the second child of productWarp(first productLine) and not the second productLine,so it acting Exactly as nth-child selector
<div class="productWarp">
    <div class="clear"></div>
    <div class="productLine" ></div>//this one is choose
    <div class="clear"></div>
    <div class="productLine" ></div>//this one should be choose
    </div>

any idea what wrong here?

A:

:nth-of-type() looks at an element's type, not its class. In this case, all your elements are of the type div, which is why :nth-of-type() works exactly the same as :nth-child().
If you have only two .productLine elements, use the following selector to style your second one instead:
.productWarp .productLine ~ .productLine
{
    background-color: white;
    border-bottom: 1px solid #B7B7B7;
    padding-right: 5px;
}

Otherwise you'll just have to go by :nth-child() indices, in this case :nth-child(4), or override styles for subsequent .productLine elements by adding more rules repeating the ~ .productLine part as necessary.

