In css, is it possible to capture an attribute value to reuse in same selector?

Question

Let's say you have a list of items as follows:

<div>
  <div data-wo="537">Element 1</div>
  <div data-wo="937">Element 2</div>
  <div data-wo="937">Element 3</div>
  <div data-wo="821">Element 4</div>
  <div data-wo="821">Element 5</div>
  <div data-wo="821">Element 6</div>
</div>

To select all direct siblings with attribute data-wo="937", you could do:

div[data-wo="937"] + div[data-wo="937"]

What I want to know is, is there a way to generalize this selector so that it works for any data-wo that is the same as its sibling?

In the example above, I want a selector that will only select: Element 3, Element 5 and Element 6.

Answer 1

No, you can't capture an attribute and reuse it in CSS.

div[data-wo="937"] + div[data-wo="937"] is the only way to select a div with the data-wo attribute value 937 that follows directly after a previous div with the same attribute value. To make this more generic you would then need to (1.) give the first one a placeholder variable and (2.) reference the variable when selecting the sibling. This is not possible as attribute values must be CSS identifiers or strings.

I've answered a similar question before, it was about using unknown values as selectors and the OP wanted to select the child that has the same attribute value as the parent, but the attribute value was unknown like in this question. The first option you have is to go with what I suggested in my answer to the linked question: bring all possible (combinations of) values to your CSS.
You are already aware of this option and it is not satisfactory, even if you use a pre-processor like LESS or SASS where it would only result in few lines of code as your attribute values are numbers and thus can be automatically incremented.

The other option I see is to add classes to the HTML, either in the code that might automatically generate the HTML or afterwards by using JS:

var prevData = "";
$("#parent div").each(function() {
  var currentData = $(this).attr("data-wo");
  if (currentData == prevData) {
    $(this).addClass("special-sibling");
  }
  prevData = currentData;
});

.special-sibling {
  color: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="parent">
  <div data-wo="537">Element 1</div>
  <div data-wo="937">Element 2</div>
  <div data-wo="937">Element 3</div>
  <div data-wo="821">Element 4</div>
  <div data-wo="821">Element 5</div>
  <div data-wo="821">Element 6</div>
</div>