See example here:
<div class="wrapper">
<div class="group">Test</div>
<div class="group">Test</div>
<div class="group">Test</div>
</div>
.wrapper {
}
.group {
position: relative;
width: 50px;
padding: 5px;
margin: 5px;
background-color: red;
border-left: 1px solid black;
}
.wrapper > .group {
border-top: 1px solid black;
border-bottom: 1px solid black;
}
.wrapper > .group ~ .group {
border-top: none;
}
https://jsfiddle.net/0j984bg3/22/
I successfully apply a border top only to the first element with the group class using:
.wrapper > .group {
border-top: 1px solid black;
}
.wrapper > .group ~ .group {
border-top: none;
}
Is there any similar hack for applying a css rule only to the last element with a specific class? In my case I want to apply border-bottom: 1px solid black; only to the last element with the group class.
Note:
I know that there are work arounds like last-of-type where I insert something like an empty tag of other type before and after the group. I don't want to use work-arounds. I want to use last-of-class somehow.
