使用 css last-child 更改边框

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>

Answer 1

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>

Answer 2

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>

Answer 3

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