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

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 can do:

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

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

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

+4
source share
3 answers

No, you cannot capture an attribute and reuse it in CSS.

div[data-wo="937"] + div[data-wo="937"] - div 937 data-wo, div . , (1.) - (2.) . , CSS.

, , OP , parent, , . , , - , : () CSS.
, , , LESS SASS, , , , .

, , HTML, , HTML, 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>
Hide result
0

, .

, , , .

0

, 100% . .

, , ? ALL Direct Siblings ~

// The ~ selector is used to target all siblings of an element based on selector.
div[data-wo="821"] ~ div[data-wo="821"]

, , , . : https://jsfiddle.net/rtdLkpqg/

0

Source: https://habr.com/ru/post/1667390/


All Articles