Apply CSS Rule to All Element With Specific Class But The Last

Question

can you please take a look at this demo and let me know how I can apply CSS rules to all of an spesific Class .box but NOT to the last one?

I already tried :not(:last-of-type) and :not(:last-child) but they are not doing the job

.box{
  height:40px;
  width:100%;
  padding:12px;  
}
.box:not(:last-of-type){
  border-bottom: 1px solid #ddd; 
}
.box:not(:last-child){
  border-bottom: 1px solid #ddd; 
}

<div class="box">Box 1</div>
<div class="box">Box 2</div>
<div class="box">Box 3</div>
<div class="box">Box 4</div>

So here's the actual answer. (Question closed so can't add as answer.) Stackoverflow (and jsfiddle) append extra, hidden elements `body`. `:last-child` ends up targetting these added elements and, since they're hidden, the style appears to have an unexpected effect. CodePen doesn't do this so your example works fine [there](http://codepen.io/ouroborus/pen/xgxyJv). Some of the answers suggest using a wrapper element which, of course, helps mitigate this issue, but doesn't say anything about why it's an issue. — Ouroborus, Jan 04 '17 at 07:26
@BoltClock This isn't a duplicate of that. While it talks about `:last-child`, both this question and its answers talk about a different issue. — Ouroborus, Jan 04 '17 at 07:30
@Ouroborus: The question is the same in principle: the asker wants to apply styles to (all but) the last element with a specific class, for which there isn't any other solution but to modify the HTML. This is true regardless of whether there are any hidden elements. — BoltClock, Jan 04 '17 at 08:13

score 3 · Accepted Answer · edited Jan 04 '17 at 06:56

3

try wrapping it with a parent element and try applying the styles as below

check this snippet

.box {
  height: 40px;
  width: 100%;
  padding: 12px;
  border-bottom: 1px solid #ddd;
}
.box:last-of-type {
  border:none ;
}

<div class="Wrapper">
  <div class="box">Box 1</div>
  <div class="box">Box 2</div>
  <div class="box">Box 3</div>
  <div class="box">Box 4</div>
</div>

or

you can use last-child as

.box {
  height: 40px;
  width: 100%;
  padding: 12px;
  border-bottom: 1px solid #ddd;
}
.box:last-child {
  border:none;
}

<div class="Wrapper">
  <div class="box">Box 1</div>
  <div class="box">Box 2</div>
  <div class="box">Box 3</div>
  <div class="box">Box 4</div>
</div>

Hope it helps

edited Jan 04 '17 at 06:56

BoltClock

700,868
160
1,392
1,356

answered Jan 04 '17 at 06:37

Geeky

7,420
2
24
50

The final rule should be `.box:last-child { border-bottom:none; }`. Shouldn't override things that don't need to be overridden. `.box:last-child` has a higher specificity than `.box` and so doesn't need to use `!important`. – Ouroborus Jan 04 '17 at 06:48
yaa thats right:) – Geeky Jan 04 '17 at 06:49

score 1 · Answer 2 · answered Jan 04 '17 at 06:33

1

Try this:

.box {
  height: 40px;
  width: 100%;
  padding: 12px;
  border-bottom: 1px solid #ddd;
}

.box:last-child {
  border-bottom: 0; 
}

answered Jan 04 '17 at 06:33

Khalid T.

10,039
5
45
53

Syam Pillai · Answer 3 · 2017-01-04T06:49:01.000

1

If you want to use :not(:last-child) wrap your divs in another div. The problem is otherwise browser can't identify which one is last child.

.box{
  height:40px;
  width:100%;
  padding:12px;  
}

.box:not(:last-child){
  border-bottom: 1px solid #ddd;
}

<div>
  <div class="box">Box 1</div>
  <div class="box">Box 2</div>
  <div class="box">Box 3</div>
  <div class="box">Box 4</div>
</div>

It's not suggestible to use overwriting of styles by giving styles to all and then giving another set of styles for last-child like giving border: 1px to .box and giving border: none; to .box:last-child. This is overwriting styles

edited Jan 04 '17 at 06:49

answered Jan 04 '17 at 06:40

Syam Pillai

4,967
2
26
42

Isn't `body` a container? So the last `.box` would be `:last-child` of `body`. – Ouroborus Jan 04 '17 at 06:43
Yes. It's an exception. If you want to use `:last-child` or `:not(:last-child)`, it should be wrapped inside a wrapper otherthan body. Try editing my [jsFiddle](https://jsfiddle.net/xr4zmhqt/1/) – Syam Pillai Jan 04 '17 at 06:48
I looked into it. It's not an exception, just a particular quirk of Stackoverflow snippets. SO appends a `script` element to the snippet body and so that counts as `:last-child` of `body` rather than the intended element. – Ouroborus Jan 04 '17 at 07:36
Ohh thanks. But I think preferably better to wrap in a div right? – Syam Pillai Jan 04 '17 at 07:40
1

Depends. `:not(:last-child)` is a weird construct anyway. If you just need to solve this problem then, yes, wrapping is the best solution. – Ouroborus Jan 04 '17 at 07:43

Apply CSS Rule to All Element With Specific Class But The Last

3 Answers3