How to use first-child?

Question

I would like to select the first div called "aProduct" but I'm a bit confused on how to do this. I already tried this:

<div id="kasticketProducts">
    <div class="aProductHeader"></div>
    <div class="aProduct"></div>
    <div class="aProductHeader"></div>
    <div class="aProduct"></div>    
</div>

This is my current CSS:

#kasticketProducts:first-child .aProduct {
    margin-top: 30px;
    background: red;
}

Answer 1

#kasticketProducts:first-child .aProduct Using above css means first it'll search for id with kasticketproducts in that first-child, here first child refer to aProductHeader from here you are trying to search aProduct but it is not there. Actually from DOM hierarchy aProduct class div is at second child this will be referred in css as nth-child(2) here and no need of again .aProduct .So the final solution for this is write as #kasticketProducts div:nth-child(2)

Answer 2

First, whats the difference?

From MDN :

:first-child()

The :first-child CSS pseudo-class represents any element that is the first child element of its parent.

---

:first-of-type()

The :first-of-type CSS pseudo-class represents the first sibling of its type in the list of children of its parent element.

So inshort, :first-child() is somewhat a loose pseudo selector compared to :first-of-type()

---

Unfortunately :first-child or :first-of-type doesn't respect classes or ids, they are only concerned with the DOM elements. So if you do something like, will fail

#kasticketproducts div.aProduct:first-of-type {
    color: red;
}

So in this case the best you can do with CSS is use :nth-of-type() with 2 as a value, now obviously it will fail if your element doesn't have a class of aProduct

#kasticketproducts div:nth-of-type(2) {
    color: red;
}

Demo

OR

you can use adjacent selector with :first-of-type()

#kasticketproducts div:first-of-type + div {
    color: red;
}

Demo

Second solution is MORE COMPATIBLE as far as IE is concerned

Answer 3

DEMO

Code is not working because aProductHeader class is before first occurrence of aProduct class.

See demo.

Answer 4

You can't target the first element of a class, but you can target the elements that come after, so you can set the styles on all the aProduct elements and then override it on all aProduct that comes after the first one using the ~ opreator:

#kasticketproducts .aProduct {
    margin-top: 30px;
    background: red;
}
#kasticketproducts .aProduct ~ .aProduct {
    margin-top: 0;
    background: none;
}

Demo: http://jsfiddle.net/a9W5T/

Answer 5

You can use

:first-child, :nth-of-type(1), :first-of-type or :nth-child(1n)

And why your code donst work, is because you use:

#kasticketProducts:first-child .aProduct

this will take the first element #kasticketProducts, use this instead: #kasticketProducts .aProduct:nth-child(2) { color: red; } <-- This will take the first element .aProduct inside your ID element

Answer 6

Another solution would be to style .aProduct, and then override the style for any succeeding occurrences of .aProduct using the general sibling combinator:

#kasticketProducts .aProduct {
    // effectively becomes the style for the first occurrence of .aProduct
}

#kasticketProducts .aProduct ~ .aProduct {
    // overrides the style set above for all occurrences of .aProduct,
    // apart from the first
}

The biggest advantage of this approach is that it doesn't rely on the structure of the markup.

General sibling selectors on MDN

Here's an example

Answer 7

Check the #id, it's case sensitive

Also, be careful with quotes, you are not closing them.

<div id="kasticketProducts">
<div class="aProductHeader">aaa</div>
<div class="aProduct">aaa</div>
<div class="aProductHeader">aaaa</div>
<div class="aProduct">aaa</div> 

For the first .aProduct get selected:

#kasticketProducts .aProduct:nth-child(2) {
    /* your styles */
}

Sorry for that, thought was for getting the first kasticketProduct. Apologizes.