How to remove border for the last div with a particular class name? [:last-child] is not working

Question

I tried removing border for the last-child with class name "true". :last-child is not working.

<div>
    <div class="common true">1111</div>
    <div class="common">2222</div>
    <div class="common true">3333</div>
    <div class="common true">4444</div>
    <div class="common true">5555</div>
    <div class="common true">6666</div>
    <div class="common true">7777</div>
    <div class="common">8888</div>
</div>

css:

.common.true {
    display: block;
    border-top: 1px solid;
} 

.true:last-child {
    border-top: none;
}

JSFIDDLE: http://jsfiddle.net/C23g6/1253/

CSS has no selector to select the last element with a specific class. It has only `last-child` and `last-of-type`. Neither works for this case. You need to use JS. (Related threads - http://stackoverflow.com/questions/18995362/last-child-not-working-as-expected/18995451#18995451 and http://stackoverflow.com/questions/2717480/css-selector-for-first-element-with-class/8539107#8539107). — Harry, Nov 16 '15 at 08:18
I haven't voted to close as dupes just in-case you want to edit and accept JS/jQuery answers. — Harry, Nov 16 '15 at 08:24
if you can then add a class in your last true element
7777
and the css .common.true.last{ border-top: 0 none; } — Domain, Nov 16 '15 at 10:28

Aminesrine · Answer 1 · 2015-11-16T08:51:18.007

5

You should use js to resolve it. With css you can use last-child or last-of-type, but in this case, they can't resolve the problem, because:

The :last-child selector matches every element that is the last child of its parent.

in your case .true isn't the last child

and

The :last-of-type selector matches every element that is the last child, of a particular type, of its parent.

in your case all elements are div and you can't select the div with specific class with last-of-type

you can try:

$(".true").last().css( "border-top", "none" );

jsfiddle

edited Nov 16 '15 at 08:51

answered Nov 16 '15 at 08:30

Aminesrine

2,082
6
35
64

Thanks for your answer. But i want to use CSS. Is there any way to do it in CSS? – Radha Nov 16 '15 at 09:06

score 0 · Answer 2 · answered May 10 '17 at 09:20

0

The :last-of-type selector allows you to target the last occurence of an element within its container.

.true:last-of-type {
    border-top: none;
}

answered May 10 '17 at 09:20

Adeeb basheer

1,422
10
19

:last-of-type selector only selects elements not classes – Grant Jun 29 '17 at 16:31
`.true:last-of-type` means it select last element with true class – Adeeb basheer Jun 29 '17 at 19:58
.true is a class not an element, that is why it doesn't work. p:last-of-type or div:last-of-type would all work not .true:last-of-type – Grant Jun 30 '17 at 10:25

How to remove border for the last div with a particular class name? [:last-child] is not working

2 Answers2