css pseudo class last-child issue

Question

I am facing an issue when using the :last-child pseudo selector.

I have the following markup:

   <div class="apply_container">
        <form class="margin">
            <div class="apply_inn border">
                <span>Tell me why you want the job?</span>
            </div>
            <div class="apply_inn">
                <span>Some other details</span>
            </div>
            <div class="apply_inn location">
                <span>Apply at a particular location</span>
            </div>
            <div class="form-actions">
                <button type="submit" class="pull-right btn btn-info">
                    Submit
                </button>
            </div>
        </form>
    </div>

And apply these styles:

.apply_container .apply_inn {
    border-bottom: 1px dashed #E6E6E6;
    margin: auto;
    padding: 18px 0;
    width: 790px;
}

.apply_container .apply_inn:last-child {
    border:none;
}

My goal is to prevent the last div.apply_inn from being styled with a bottom-border like the rest of the div.apply_inns. The style does not seem to get applied. Can anyone explain what is happening?

Here is the original fiddle of my problem. As well as a simplified fiddle demonstrating the issue.

it was is very light color changed color to red http://jsfiddle.net/QSeU2/1/ — Chandrakant, Mar 21 '13 at 09:04
you seem to have something wrong with tags. some of them show red. make sure you close them right — btevfik, Mar 21 '13 at 09:11
@btevfik- its not possible due to - I copied it from firebug, and also main thing is, coded with HAML. so thats why all tags must be closed..!! :) — Chandrakant, Mar 21 '13 at 09:16
@btevfik: That's an issue with jsFiddle's highlighting treating void elements incorrectly (thinking they're not closed). It's valid HTML as far as I can see. — BoltClock, Mar 21 '13 at 09:34
@Chandrakant Thanks for asking this question, I fought like hell to figure out the issue, but I definitely learned something. — Kevin Bowersox, Mar 21 '13 at 09:48
@Kevin Actually I want to say thanks to you, for edit ..thnax alot — Chandrakant, Mar 21 '13 at 11:59

Kevin Bowersox · Accepted Answer · 2013-03-21T12:18:32.167

The problem is that the div with class .apply_inn is not the last-child within its parent. The CSS last-child pseudo-class operates as follows:

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

When ready very literally, it will only apply to an element that is the last child within its parent. It does not take into consideration the context you (mentally) create when you add the additional class selectors to it.

When applying the pseudo-class the browser doesn't understand the context created by the selector. Basically, its checking that the element matches the selector .apply_container .apply_inn, then asking the question, "Is this the last child within the parent?". It asks this question without any consideration of the aforementioned selector. In your case, the answer is no since there is another div after the last div.apply_inn.

In your example, the div with the class form-actions is actually the last child.

The same can be said for each part of a compound selector. `div` = "Is this a `div`?", `.apply_inn` = "Does this have a class `apply_inn`?", `:last-child` = "Is this the last child of its parent?" The element has to match all of these conditions, but independently of every other condition. — BoltClock, Mar 21 '13 at 09:55
@BoltClock Great supplementing info! From a theoretical perspective, CSS boils down to a bunch of questions being asked by the browser. I'm guessing mastering CSS is all about learning the specifics of the questions the browser is asking/answering. — Kevin Bowersox, Mar 21 '13 at 10:03

score 2 · Answer 2 · answered Mar 21 '13 at 09:33

2

You can only use the last-child selector if it is the last child of it's parent container - although it was the last child with that class name it wasn't the last child of the container

https://developer.mozilla.org/en-US/docs/CSS/:last-child

Here is a fiddle showing your code with the last child style applied

http://jsfiddle.net/QSeU2/7/

answered Mar 21 '13 at 09:33

Pete

57,112
28
117
166

Yes. There isn't a way to select the last element with the class name so one has to rely on workarounds such as those listed in the other answers. – BoltClock Mar 21 '13 at 09:35
the div with `apply_inn` is the first element of it's parent container (`margin`) – Pete Mar 21 '13 at 09:37
Ohh ok..Now Resolved all puzzles regarding last and first child, Thank you guys :) – Chandrakant Mar 21 '13 at 09:50

btevfik · Answer 3 · 2013-03-21T09:36:59.643

0

target for border-top and remove the first-child's border-top

http://jsfiddle.net/btevfik/QSeU2/6/

last-child doesn't work.

edited Mar 21 '13 at 09:36

answered Mar 21 '13 at 09:30

btevfik

3,391
3
27
39

yea it's good solution, I appreciate, but I'm trying to find out the reason - why last-child is not working, always this thing happens with me :) – Chandrakant Mar 21 '13 at 09:32
2

The reason is because the last `.apply_inn` is not the last child. There is another element without that class after the last one. – BoltClock Mar 21 '13 at 09:32
@BoltClock- I did't getting you- in .apply_container div, number of .apply_inn is approx 5-6, and I want to select last one from those 5-6. – Chandrakant Mar 21 '13 at 09:35
1

@Chandrakant: Yes but that last one has another element after it so it's not the last child. – BoltClock Mar 21 '13 at 09:40
@BoltClock :last-child is used to select the last element that matches the preceding selector. So in this case, it should match the last div with the .apply_in class. – Vimal Stan Mar 21 '13 at 09:50
@Vimal Stan: Um, no. I'm not sure where you pulled that from. – BoltClock Mar 21 '13 at 09:52
@VimalStan thats what i thought too. but apperantly that's not how it works. if i were to do it, i would do it that way as well. – btevfik Mar 21 '13 at 09:52
@BoltClock The definition says "The :last-child selector matches every element that is the last child of its parent." I assumed that it would work the way I described. Thanks for the correction. Learnt something new today :) – Vimal Stan Mar 21 '13 at 09:56

score -1 · Answer 4 · edited May 23 '17 at 10:30

-1

Related: Using the last-child selector

Any reason you don't want to use

.location {border:none;}

?

edited May 23 '17 at 10:30

Community

1
1

answered Mar 21 '13 at 09:06

Vimal Stan

2,007
1
12
14

.location will change on every page, depends upon what the content is, so I cant use .location as selector – Chandrakant Mar 21 '13 at 09:07
Check out the answer by @Branden-Silva in the SO link I've added, it should help you solve your problem. – Vimal Stan Mar 21 '13 at 09:10
I haven't problem with only IE, actually it's not working within all browsers – Chandrakant Mar 21 '13 at 09:13

css pseudo class last-child issue

4 Answers4

Linked