3

I'm trying to visually group a list of elements by generating a header above every break in the sequence of attributes. I've been able to accomplish it when the group names are known ahead of time. But what if I want to support an unknown variety of groups? Is it possible to determine a match when the actual attribute value is a variable?

This is how it currently works with the attributes values predefined. It's not very extensible.

https://jsfiddle.net/6g7qesja/1/

CSS

.item:first-child:before,
.item:not([data-group="First Group"]) + .item[data-group="First Group"]:before,
.item:not([data-group="Second Group"]) + .item[data-group="Second Group"]:before,
.item:not([data-group="Third Group"]) + .item[data-group="Third Group"]:before {
    content: attr(data-group);
    display: block;
    font-weight: bold;
}

HTML

<div class="item" data-group="First Group">one</div>
<div class="item" data-group="First Group">two</div>
<div class="item" data-group="First Group">three</div>
<div class="item" data-group="Second Group">four</div>
<div class="item" data-group="Second Group">five</div>
<div class="item" data-group="Second Group">six</div>
<div class="item" data-group="Third Group">seven</div>
<div class="item" data-group="Third Group">eight</div>
<div class="item" data-group="Third Group">nine</div>

RENDERS

First Group

one

two

three

Second Group

four

five

six

Third Group

seven

eight

nine

George Hess
  • 639
  • 1
  • 8
  • 15
  • I don't know a way to do this with pure CSS. Are you just trying to avoid including the header elements in the actual HTML? Or are you unable to modify the HTML at all? – showdev Aug 04 '17 at 22:22
  • For performance reasons I'm trying to do it with pure CSS because of the size and dynamic nature of the list. That is, if it's even possible. – George Hess Aug 04 '17 at 22:43
  • If you are generating the list with a server-side script, you could add attributes to specify each heading value at its appropriate position. Then use CSS to add pseudo-element based on those attribute. Just an idea. – showdev Aug 04 '17 at 22:45
  • (I was thinking [something like this](https://jsfiddle.net/ff46d5w0/), but that might not be what you're aiming for.) – showdev Aug 04 '17 at 22:58

0 Answers0