CSS parent div with children

Question

I have a parent div, that holds three div's. They are basically columns. I need to remove the margin on the last one but can't get the right selector HTML:

<div class="productContainer">
    <div class="productBox"></div>
    <div class="productBox"></div>
    <div class="productBox"></div>
 <!--/ productContainer --></div>

Here's the CSS:

.productContainer {
    width: 980px;
    height: 400px;
    display: block;
    float: left;
}

How do you target the third child div of a parent? this should work no?
.productContainer > .productBox {
    width: 320px;
    height: 400px;
    display: block;
    float: left;
    margin: 0 10px 0 0;
}

.produtContainer > .productBox nth:child(3) {
    margin-right: 0;
}

I've posted a similar question here: http://stackoverflow.com/questions/3786434/last-child-psuedo-class-selector-in-css-and-internet-explorer — Ant Ali, Sep 24 '10 at 16:39

score 1 · Answer 1 · answered Sep 24 '10 at 15:45

1

.productContainter div:last-child

answered Sep 24 '10 at 15:45

idrumgood

4,904
19
29

1

While being aware that this -`:last-child`- isn't available to IE < 9. – David Thomas Sep 24 '10 at 15:46
why doesn't .productContainer div:nth-child(3) work the same way? Due to IE i might have to just add a class to the last one. – Dirty Bird Design Sep 24 '10 at 15:50

score 1 · Accepted Answer · answered Sep 24 '10 at 15:51

1

While you can use the :last-child selector, it's not going to work in any version of IE before 8. Generally what I do in this situation is add a last class to the last element in the list:

<div class="productContainer">
<div class="productBox"></div>
<div class="productBox"></div>
<div class="productBox last"></div>

And then add this rule below the .productContainer .productBox rule in the stylesheet:

.produtContainer .last {
margin-right: 0;
}

answered Sep 24 '10 at 15:51

mikeocool

133
3

Yeah, I agree I still have to code for IE 7 so I have to do it this way. too bad. thx man. – Dirty Bird Design Sep 24 '10 at 15:57
It's funny that you said the same thing I did, except five minutes after me. But you get credit for the answer :P – Josh Stodola Sep 24 '10 at 18:45

score 0 · Answer 3 · answered Sep 24 '10 at 15:43

0

You can do :first-child or :last child to target the first and last element.

compatibility: http://www.quirksmode.org/css/contents.html

answered Sep 24 '10 at 15:43

Brad Herman

9,665
7
28
30

score 0 · Answer 4 · answered Sep 24 '10 at 15:44

0

You can use :last-child selector for the rule

.productContainer div:last-child
{
    // rule
}

http://www.quirksmode.org/css/firstchild.html

answered Sep 24 '10 at 15:44

Robert

21,110
9
55
65

I'm pretty sure this looks for the last .productContainer, not the last div within it. See my answer. – idrumgood Sep 24 '10 at 15:46

score 0 · Answer 5 · answered Sep 24 '10 at 15:45

You can use the last-child pseudo-selector in this case...

.productContainer > .productBox:last-child {
  margin-right: 0;
}

Note: This will not work in IE8 and older, as this is a part of CSS3. For something more portable, you might want to try this...

<div class="productBox last"></div>

.productContainer > .productBox.last {
  margin-right: 0;
}

CSS parent div with children

5 Answers5