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.

Answer 1

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.

Answer 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/