CODEWITHSUNDEEP
htmlcss
Chandrakant
Chandrakant

Reputation: 1981

css pseudo class last-child issue

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.

Upvotes: 3

Views: 1880

Answers (4)

Kevin Bowersox
Kevin Bowersox

Reputation: 94429

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.

Upvotes: 5

btevfik
btevfik

Reputation: 3431

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

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

last-child doesn't work.

Upvotes: 0

Pete
Pete

Reputation: 58422

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/

Upvotes: 2

Vimal Stan
Vimal Stan

Reputation: 2005

Related: Using the last-child selector

Any reason you don't want to use

.location {border:none;}

?

Upvotes: -1

Related Questions