CSS Selector to identify first and last element of groups with part of same class

Asked Jul 15 '22 at 13:34

Active Jul 15 '22 at 13:34

Viewed 28 times

I have a list of products which can be in a bundle. I want to draw a border around each product which is part of the same bundle.

<ul>
   <li class="bundle-1">Product 1</li>
   <li class="bundle-1">Product 2</li>
   <li class="bundle-2">Product A</li>
   <li class="bundle-2">Product B</li>
   <li>Product I</li>
</ul>

The border is around Product 1 & 2 and Product A & B. Exist a CSS Selector to group some elements?

[class*="bundle-"] {
   border-left: 1px solid blue;
   border-right: 1px solid blue;
}
[class*="bundle-"]:first-child {
   border-top: 1px solid blue;
}
[class*="bundle-"]:last-child {
   border-bottom: 1px solid blue;
}

asked Jul 15 '22 at 13:34

Happo

1,375
3
16
34

Will they gonna be in same sequence everytime? – Nexo Jul 15 '22 at 13:53
I don't think you can do it in css if you can't change the structure, you'll need JS – Cédric Jul 15 '22 at 13:55
@Nikkkshit yes the order is the same. – Happo Jul 15 '22 at 14:06
only 2 bundles or they can be many ? – Temani Afif Jul 15 '22 at 14:12
https://stackoverflow.com/questions/3338680/is-there-a-css-selector-by-class-prefix – Nexo Jul 15 '22 at 14:13
1

It's impossible to select last-child of a specific class. It will always be the last child of the parent. – IT goldman Jul 15 '22 at 14:14
Here is a [pen](https://codepen.io/cedricbeausseron/pen/vYRybMq) with a structure that could work for your needs – Cédric Jul 15 '22 at 14:35

CSS Selector to identify first and last element of groups with part of same class

0 Answers0