Use css last-child change border

Question

Is that possible to use CSS last-child to do this?

Can I use the same class to add last-child and make the second border to smaller px? Or the only way to do so is by adding the different class name?

.border {
  border: 3px solid black;
  width: 80px;
  display: inline-block;
}

<div class="border"></div>
<div class="border"></div>

you can get this with last-child pseudo class. however, using pseudo elements like `before` and `after` would be better solution — Aryan Twanju, May 30 '18 at 10:42
@AryanTwanju yea, I think of doing it as well, but usually with no luck. I always cannot get any result using pseudo elements like `before` and `after`. Do you mind showing me some example in this case? Would like to learn more from it. Thanks! — R3y, May 31 '18 at 01:56

Zuber · Accepted Answer · 2018-05-30T11:22:15.247

3

You need to wrap border divs and after that, with the use of :last-child you can achieve this.

The reason behind using wrapper is :last-child will only try to match the very last child of a parent element

.border {
  border: 3px solid black;
  width: 80px;
  display: inline-block;
}

.border:last-child {
  width: 40px;
}

<div class="wrapper">
  <div class="border"></div>
  <div class="border"></div>
</div>

edited May 30 '18 at 11:22

answered May 30 '18 at 10:42

Zuber

3,393
1
19
34

maybe you can explain why we need to wrap within another div ;) – Temani Afif May 30 '18 at 11:03
Sorry but this is not the explanation of why we should add a wrapper ... your element already have a parent element which is the body but jSfiddle add other element that you don't see and match the last-child ;). And you wrapper isn't mandatory in all the cases – Temani Afif May 30 '18 at 11:26
well fiddle or stack snippet here, it's the same issue ;) Try your code within a html file you created locally and remove the wrapper, it will work fine – Temani Afif May 30 '18 at 11:28
check this : https://stackoverflow.com/questions/48632929/how-can-i-select-the-first-or-the-last-child-with-css-correct/48632960#48632960 – Temani Afif May 30 '18 at 11:30
i just explained so that the questioner can understand. you are already master of `css` @TemaniAfif – Zuber May 30 '18 at 11:30
But I am explaining to you that the wrapper is not needed for last-child to work it's only needed here in the snippet because you don't have full control of the generated code. We simply need to pay attention about any confusion ;) – Temani Afif May 30 '18 at 11:33
@ZuberGot it! Thanks! – R3y May 31 '18 at 01:57

Ali · Answer 2 · 2018-05-30T11:10:10.613

0

Yeh, You can use the last-child. last-child selector need a parent div. Please check the code.

.border {
  border: 3px solid black;
  width: 80px;
  display: inline-block;
}
div.border:last-child {
  width: 40px;
}

<div>
<div class="border"></div>
<div class="border"></div>
</div>

edited May 30 '18 at 11:10

answered May 30 '18 at 10:44

Ali

1,326
1
17
38

@TemaniAfif The `last-child` selector is used to select the last child element of a parent. So it does not work without a parent div. – Ali May 30 '18 at 11:14
1

no this is false ;) every element have a parent element .. you forget the `body` element maybe? – Temani Afif May 30 '18 at 11:25
@TemaniAfif if the elements are only in `body` tag, that will be work. But here some another elements are included(a script tag and another hidden div included), Please inspect the result box. I hope then you can understand. – Ali May 30 '18 at 11:44
I already know this and I answered a similar issue here https://stackoverflow.com/questions/48632929/how-can-i-select-the-first-or-the-last-child-with-css-correct/48632960#4863296 .. .but I asked you the question because your explanation was wrong and we never need a parent element for last-child to work – Temani Afif May 30 '18 at 11:57
Okay. "The `:last-child` selector matches every element that is the last child of its parent." is this the definition of `:last-child` selector? – Ali May 30 '18 at 12:08
Let us [continue this discussion in chat](https://chat.stackoverflow.com/rooms/172070/discussion-between-sarbaz-and-temani-afif). – Ali May 30 '18 at 12:20

Temani Afif · Answer 3 · 2020-03-13T11:59:54.497

0

What about an easier way with one element and without complex selector:

.border {
  height:5px;
  width: 160px;
  background:
    /*the gradient will create the separation of the background*/
    linear-gradient(#fff,#fff) 100px 0 /5px 100%  no-repeat,
    #000;
}

<div class="border"></div>

And here is how you can do it to make it like your image:

.border {
  height:80px;
  width: 200px;
  background:
    linear-gradient(red,red)     left  20px top 50% /100px 5px,
    linear-gradient(green,green) right 20px top 50% /50px  5px,
    orange;
  background-repeat:no-repeat;
}

<div class="border"></div>

Related question for more details: Using percentage values with background-position on a linear-gradient

edited Mar 13 '20 at 11:59

answered May 30 '18 at 10:56

Temani Afif

245,468
26
309
415

Once again thanks for the answer, I never thought of using `linear-gradient`. As you mention that "we never need a parent element for `last-child` to work" so my question is do you mind showing me how can I use `last-child` in my cases? Or it wasn't proper to use `last-child` for this question? Would like to learn more from it. Thanks! :) – R3y May 31 '18 at 01:54

Use css last-child change border

3 Answers3