CSS :last-child unexpected behaviour

Question

Hi I am trying to use the last-child operator to hide the last div which applies a border. My issue is that the las div still has the border on the bottom

Below is the HTML for my Test

<div class="car-search">
    <!--other divs removed for example-->
    <div class="border-bottom"></div>
</div>

<div class="car-search">
    <!--other divs removed for example-->
    <div class="border-bottom"></div>
</div>

The CSS

.car-search .border-bottom{
    border-bottom: 1px solid $lighterGrey;
    padding-top: 15px;
    margin-bottom: 15px;
    width: 770px;
    margin-left: 15px;
}
.car-search:last-child .border-bottom{
    display: none;
}

I have no idea why the border is being displayed on the last .car-search

Current Output:

.car-search .border-bottom {
  border-bottom: 1px solid #000;
  padding-top: 15px;
  margin-bottom: 15px;
  width: calc(100% - 30px);
  margin-left: 15px;
}
.car-search:last-child .border-bottom {
  display: none;
}

Attempts

I have also tried using the !important tag with no success

I have tried :last-of-type with no success

@Amitsingh No! Don't use `!important` at all. There should be no requirement to use `!important` here anyway, since there is no definition for `display` on the preceding selector. — BenM, Aug 24 '15 at 11:00
@Kieranmv95: Do you have any elements after the last `.car-search`? If you do then the `.car-search` is not the `:last-child` of its parent and hence the selector won't work. Have a look at this thread for details on how `:last-child` works - http://stackoverflow.com/questions/18995362/last-child-not-working-as-expected/18995451#18995451. — Harry, Aug 24 '15 at 11:00
@Kieranmv95: As I said in my earlier comment, you might be having some other children tag after the last `.car-search` within the `body` or whichever is the parent. — Harry, Aug 24 '15 at 11:06
Possible duplicate: http://stackoverflow.com/questions/7298057/css-last-child-selector-select-last-element-of-specific-class-not-last-child-i or http://stackoverflow.com/questions/3203313/nth-child-doesnt-respond-to-class-selector — cimmanon, Aug 24 '15 at 11:08
@cimmanon its not a dupe because last-of-type also doesnt work for me :/ — Kieranmv95, Aug 24 '15 at 11:09
The answers specifically specifies what you're trying to do doesn't work. Just because the alternative doesn't work does not make it not a duplicate. — cimmanon, Aug 24 '15 at 11:10
@Kieranmv95: In case you didn't understand my previous comments, have a look at this fiddle - http://jsfiddle.net/hari_shanx/sabsdc6m/. The `.car-search` is not the `:last-child` here because the last child is the `div` without any class. `last-of-type` also won't work here because the last `div` is the last of its type and hence the border would remain. I may sound like a broken record but please look at all the three threads linked here to see how exactly `:last-child` and `last-of-type` work. Judging by comments, I do think you have an extra `div` element after the last `.car-search`. — Harry, Aug 24 '15 at 11:12
can you do something like this instead of adding another `div` for `border` http://jsfiddle.net/sabsdc6m/1/ — Vitorino fernandes, Aug 24 '15 at 11:17

BenM · Answer 1 · 2015-08-24T11:08:33.343

Unfortunately there is no last-of-class selector inside of CSS. You'll either need to remove the .border-bottom element from your last .car-search element, or fall back to Javascript / jQuery to remove the element from the DOM.

For example, you could run the following jQuery code to remove the last .car-search element's .border-bottom:

$('.car-search').last().children('.border-bottom').remove();

jsFiddle Demo

Alternatively, if you wish to use pure CSS for this, you could wrap your .car-search elements inside of a container <div> and use the :last-of-type selector.

For example, your new structure might look like:

<div class="car-search-wrapper">    
    <div class="car-search">
        <!--other divs removed for example-->
        <div class="border-bottom"></div>
    </div>
    <div class="car-search">
        <!--other divs removed for example-->
        <div class="border-bottom"></div>
    </div>
</div>

Then you may use:

.car-search:last-of-type .border-bottom {
    display: none;
}

jsFiddle Demo

Even that might not work if there is another element of type `div` after the `.car-search`. — Harry, Aug 24 '15 at 11:02
Another option (instead of falling back to JS) is to wrap all the `.car-search` inside an wrapper element (like a `div`) — GreyRoofPigeon, Aug 24 '15 at 11:06

Louis Serre · Accepted Answer · 2015-08-24T11:19:31.847

1

As said above there is no :last-of-class selector for now so the only way to do it is javascript. With jQuery you can run the following code:

jQuery('div.car-search:last .border-bottom').css({display:'none'});

Moreover with scss you can write

.car-search {
    .border-bottom {
        border-bottom: 1px solid $lighterGrey;
        padding-top: 15px;
        margin-bottom: 15px;
        width: calc(100% - 30px);
        margin-left: 15px;    
    }

    &:last-of-type {
        .border-bottom {
            display: none;
        }
    }
}

Which is a bit less of scss lines.

In compiled CSS:

.car-search .border-bottom {
    border-bottom: 1px solid $lighterGrey;
    padding-top: 15px;
    margin-bottom: 15px;
    width: calc(100% - 30px);
    margin-left: 15px;    
}

.car-search:last-of-type .border-bottom {
    display: none;
}

edited Aug 24 '15 at 11:19

answered Aug 24 '15 at 11:05

Louis Serre

148
1
10

Doesn't work if there are other `
` children after the last `.car-search`.
– BenM Aug 24 '15 at 11:06
You might want to use/add the compiled CSS in this answer. Not everyone uses or understands SCSS. – Paulie_D Aug 24 '15 at 11:06
http://jsfiddle.net/p7xbmryr/1/ – BenM Aug 24 '15 at 11:06
1

I really like this solution but it isn't working for me, thanks for showing me you can add things to the end though. I'm new to scss – Kieranmv95 Aug 24 '15 at 11:07

CSS :last-child unexpected behaviour

2 Answers2