Why can't I select the first div with the class 'offer'?

Question

I'm trying to set the background color of the first div with the class offer. I thought .offer:first-child would do the trick, but that isn't working.

I've also tried using :nth-child(1), but that's not working either.

Any suggestions is greatly appreciated.

My fiddle: http://jsfiddle.net/MNQar/

CSS

.offer:first-child { background-color: indianred; }

.special-offers .title, 
.special-offers .offer, 
.special-offers .more {
    height: 200px;
}
[class*="column"] {
    display: inline;
    float: left;
    margin: 0;
}
.column2 { width: 190px;}
.column3 { width: 285px;}

HTML

<div class="row row-spacer special-offers">
    <div class="column2 title">
        <h2>Offers</h2>
    </div>
    <div class="column3 offer padding">
        <div class="date">10. June</div>
        <h3>Høyer tømmer lageret!</h3>
    </div>
    <div class="column3 offer padding">
        <div class="date">10. June</div>
        <h3>Super salg hos Vivikes</h3>

    </div>
    <div class="column1 more">
        <div class="caret"></div>
        <a href="#">More offers</a>
    </div>
</div>

score 3 · Answer 1 · answered Jul 14 '13 at 22:55

3

.offer:first-child means "An element With the class 'offer' that is the first child beneath its parent", not "the first child with class 'offer'".

I believe you have to re-think how you do this. For example, stick a separate class to the first child or something, then use a selector like .offer.highlight.

answered Jul 14 '13 at 22:55

Arve Systad

5,471
1
32
58

I like the combination of two classes to infer additional semantics. – tvanfosson Jul 14 '13 at 22:59
Well, then `.offer:first-child` should actually work, shouldn't it? I'm trying to use CSS since this would will be dynamically created in a loop thus making it a bit harder to add class to the first element. – Steven Jul 14 '13 at 23:11
No, none of the .offer divs are the first child - the first one of them is a second child. – Arve Systad Jul 15 '13 at 15:23

score 3 · Answer 2 · edited May 23 '17 at 11:49

CSS Only

This should work:

.offer { background-color: #ccc; }
.offer ~ .offer {background-color: transparent; }

It first sets all .offer elements to have a background color, then uses the sibling selector (~) to undo it for all subsequent .offer elements. Kind of a hack but it should be okay if you're not willing to use javascript. See here for a much more complete explanation: CSS selector for first element with class

And here's a fiddle: http://jsfiddle.net/MNQar/4/

JS

Alternatively, this is really easy to do with Javascript: $(".offer").eq(0).css("background-color","#ccc");

Fiddle: http://jsfiddle.net/MNQar/6/

score 2 · Accepted Answer · answered Jul 14 '13 at 22:54

2

The problem is that there is a div that precedes the first offer, making it the second element, not the first. The best solution is to give the first offer a different class, offer-first and use that. If that's not possible and the first offer is always the second child, you can use :nth-child(2)

Using :nth-child(2)

http://jsfiddle.net/MNQar/3/

answered Jul 14 '13 at 22:54

tvanfosson

524,688
99
697
795

Thanks. It works, but the logic is not sound (or I don't understand it) because; `.offer:nth-child(2)` tells me that you are selecting the second element called `.offer`. But in reality, you are selecting the second element of `special-offers`. If I add an extra div before the first `offer`, then `(2)` is wrong. See http://jsfiddle.net/MNQar/5/. – Steven Jul 14 '13 at 23:06
1

@Steven you are selecting an element that has class `.offer` and is the second child of it's parent. The `nth-child` doesn't apply to the order within the elements matching the class, but the order considering all children of the parent. – tvanfosson Jul 14 '13 at 23:08

Why can't I select the first div with the class 'offer'?

3 Answers3

CSS Only

JS