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;
}

If you have multiple divs with the same IDs and you want to target first one. then it's a bad practice! — Dhaval Marthak, May 14 '14 at 10:09
My apologies, this is just a simplified version of my code which I quickly typed (my original code doesn't miss them). — 2339870, May 14 '14 at 10:10
This *might* be a dupe of [this question](http://stackoverflow.com/q/5428676/419956) (about "`nth-of-class()`" selectors), as I guess [the accepted answer](http://stackoverflow.com/a/5428766/419956) talks about what you *actually* need? — Jeroen, May 14 '14 at 10:16

saikiran.vsk · Accepted Answer · 2014-05-14T10:37:57.457

3

#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)

edited May 14 '14 at 10:37

answered May 14 '14 at 10:13

saikiran.vsk

1,788
1
10
11

Glad to hear that. I'm not very good in English, thanks for understanding. – saikiran.vsk May 14 '14 at 10:21
@Dipaks It is perfectly supported. `#kasticketProducts:nth-child(2)` will match the second occurence of `#kasticketProducts` which doesn't exist in the DOM. I believe you mean [`#kasticketProducts div:nth-child(2)`](http://jsfiddle.net/c2Cdy/2/) – George May 14 '14 at 10:28
@oGeez Seems I lost my mind for that time ;) Stupid! – Dipak May 14 '14 at 10:41

Mr. Alien · Answer 2 · 2014-05-14T10:25:41.433

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

score 0 · Answer 3 · answered May 14 '14 at 10:17

0

DEMO

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

See demo.

answered May 14 '14 at 10:17

shyammakwana.me

5,562
2
29
50

RubberPoint · Answer 4 · 2014-05-14T10:24:20.533

0

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

edited May 14 '14 at 10:24

answered May 14 '14 at 10:18

RubberPoint

142
7

score 0 · Answer 5 · answered May 14 '14 at 10:23

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/

score 0 · Answer 6 · edited Jun 20 '20 at 09:12

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

Zander · Answer 7 · 2014-05-14T10:26:25.187

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.

How to use first-child?

7 Answers7

General sibling selectors on MDN

Here's an example