CSS Selector compare 2 attributes

Question

I\'m looking for a way to build a selector that would match where two attributes have the same value, but can\'t find a syntax. Is this possible? How?

What I hoped would

Answer 1

This is not possible with standard CSS.

Although you hadn't exactly asked "Well in that case, what can I do?", leaving this answer on its own feels completely insufficient, so here's also a jQuery solution for something that might do the trick.

Assuming you are looking for divs only, the code below will work. Otherwise, you can edit the selector in the first line of the jQuery to be something other than $("div")

    $("[data-valueA]").each(function() {
        $this = $(this);
        var firstAttr = $this.data("valuea");
        var secondAttr = $this.data("valueb");
        if (firstAttr == secondAttr) $this.addClass("redBackground");
    });

  div {
      padding: 20px;
      margin: 20px;
      border: 1px solid black;
  }
  
  .redBackground {
      background-color: red;
  }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div data-valueA="MyValue" data-valueB="MyValue">
    ValueA and ValueB match
</div>

<div data-valueA="XXX" data-valueB="YYY">
    ValueA and ValueB do not match
</div>

Answer 2

Not much useful, but if you know the attribute values won't exceed a certain length, and the possible set of characters is limited, you can programmatically generate all the possibilities.

For example, with characters abc and a maximum length of 4,

[data-valueA=""][data-valueB=""],
[data-valueA="a"][data-valueB="a"],
[data-valueA="aa"][data-valueB="aa"],
[data-valueA="aaa"][data-valueB="aaa"],
[data-valueA="aaaa"][data-valueB="aaaa"],
[data-valueA="aaab"][data-valueB="aaab"],
[data-valueA="aaac"][data-valueB="aaac"],
[data-valueA="aab"][data-valueB="aab"],
[data-valueA="aaba"][data-valueB="aaba"],
[data-valueA="aabb"][data-valueB="aabb"],
[data-valueA="aabc"][data-valueB="aabc"],
[data-valueA="aac"][data-valueB="aac"],
[data-valueA="aaca"][data-valueB="aaca"],
[data-valueA="aacb"][data-valueB="aacb"],
[data-valueA="aacc"][data-valueB="aacc"],
[data-valueA="ab"][data-valueB="ab"],
[data-valueA="aba"][data-valueB="aba"],
[data-valueA="abaa"][data-valueB="abaa"],
[data-valueA="abab"][data-valueB="abab"],
[data-valueA="abac"][data-valueB="abac"],
[data-valueA="abb"][data-valueB="abb"],
[data-valueA="abba"][data-valueB="abba"],
[data-valueA="abbb"][data-valueB="abbb"],
[data-valueA="abbc"][data-valueB="abbc"],
[data-valueA="abc"][data-valueB="abc"],
[data-valueA="abca"][data-valueB="abca"],
[data-valueA="abcb"][data-valueB="abcb"],
[data-valueA="abcc"][data-valueB="abcc"],
[data-valueA="ac"][data-valueB="ac"],
[data-valueA="aca"][data-valueB="aca"],
[data-valueA="acaa"][data-valueB="acaa"],
[data-valueA="acab"][data-valueB="acab"],
[data-valueA="acac"][data-valueB="acac"],
[data-valueA="acb"][data-valueB="acb"],
[data-valueA="acba"][data-valueB="acba"],
[data-valueA="acbb"][data-valueB="acbb"],
[data-valueA="acbc"][data-valueB="acbc"],
[data-valueA="acc"][data-valueB="acc"],
[data-valueA="acca"][data-valueB="acca"],
[data-valueA="accb"][data-valueB="accb"],
[data-valueA="accc"][data-valueB="accc"],
[data-valueA="b"][data-valueB="b"],
[data-valueA="ba"][data-valueB="ba"],
[data-valueA="baa"][data-valueB="baa"],
[data-valueA="baaa"][data-valueB="baaa"],
[data-valueA="baab"][data-valueB="baab"],
[data-valueA="baac"][data-valueB="baac"],
[data-valueA="bab"][data-valueB="bab"],
[data-valueA="baba"][data-valueB="baba"],
[data-valueA="babb"][data-valueB="babb"],
[data-valueA="babc"][data-valueB="babc"],
[data-valueA="bac"][data-valueB="bac"],
[data-valueA="baca"][data-valueB="baca"],
[data-valueA="bacb"][data-valueB="bacb"],
[data-valueA="bacc"][data-valueB="bacc"],
[data-valueA="bb"][data-valueB="bb"],
[data-valueA="bba"][data-valueB="bba"],
[data-valueA="bbaa"][data-valueB="bbaa"],
[data-valueA="bbab"][data-valueB="bbab"],
[data-valueA="bbac"][data-valueB="bbac"],
[data-valueA="bbb"][data-valueB="bbb"],
[data-valueA="bbba"][data-valueB="bbba"],
[data-valueA="bbbb"][data-valueB="bbbb"],
[data-valueA="bbbc"][data-valueB="bbbc"],
[data-valueA="bbc"][data-valueB="bbc"],
[data-valueA="bbca"][data-valueB="bbca"],
[data-valueA="bbcb"][data-valueB="bbcb"],
[data-valueA="bbcc"][data-valueB="bbcc"],
[data-valueA="bc"][data-valueB="bc"],
[data-valueA="bca"][data-valueB="bca"],
[data-valueA="bcaa"][data-valueB="bcaa"],
[data-valueA="bcab"][data-valueB="bcab"],
[data-valueA="bcac"][data-valueB="bcac"],
[data-valueA="bcb"][data-valueB="bcb"],
[data-valueA="bcba"][data-valueB="bcba"],
[data-valueA="bcbb"][data-valueB="bcbb"],
[data-valueA="bcbc"][data-valueB="bcbc"],
[data-valueA="bcc"][data-valueB="bcc"],
[data-valueA="bcca"][data-valueB="bcca"],
[data-valueA="bccb"][data-valueB="bccb"],
[data-valueA="bccc"][data-valueB="bccc"],
[data-valueA="c"][data-valueB="c"],
[data-valueA="ca"][data-valueB="ca"],
[data-valueA="caa"][data-valueB="caa"],
[data-valueA="caaa"][data-valueB="caaa"],
[data-valueA="caab"][data-valueB="caab"],
[data-valueA="caac"][data-valueB="caac"],
[data-valueA="cab"][data-valueB="cab"],
[data-valueA="caba"][data-valueB="caba"],
[data-valueA="cabb"][data-valueB="cabb"],
[data-valueA="cabc"][data-valueB="cabc"],
[data-valueA="cac"][data-valueB="cac"],
[data-valueA="caca"][data-valueB="caca"],
[data-valueA="cacb"][data-valueB="cacb"],
[data-valueA="cacc"][data-valueB="cacc"],
[data-valueA="cb"][data-valueB="cb"],
[data-valueA="cba"][data-valueB="cba"],
[data-valueA="cbaa"][data-valueB="cbaa"],
[data-valueA="cbab"][data-valueB="cbab"],
[data-valueA="cbac"][data-valueB="cbac"],
[data-valueA="cbb"][data-valueB="cbb"],
[data-valueA="cbba"][data-valueB="cbba"],
[data-valueA="cbbb"][data-valueB="cbbb"],
[data-valueA="cbbc"][data-valueB="cbbc"],
[data-valueA="cbc"][data-valueB="cbc"],
[data-valueA="cbca"][data-valueB="cbca"],
[data-valueA="cbcb"][data-valueB="cbcb"],
[data-valueA="cbcc"][data-valueB="cbcc"],
[data-valueA="cc"][data-valueB="cc"],
[data-valueA="cca"][data-valueB="cca"],
[data-valueA="ccaa"][data-valueB="ccaa"],
[data-valueA="ccab"][data-valueB="ccab"],
[data-valueA="ccac"][data-valueB="ccac"],
[data-valueA="ccb"][data-valueB="ccb"],
[data-valueA="ccba"][data-valueB="ccba"],
[data-valueA="ccbb"][data-valueB="ccbb"],
[data-valueA="ccbc"][data-valueB="ccbc"],
[data-valueA="ccc"][data-valueB="ccc"],
[data-valueA="ccca"][data-valueB="ccca"],
[data-valueA="cccb"][data-valueB="cccb"],
[data-valueA="cccc"][data-valueB="cccc"]

I generated that with this code:

function generateString(chars, maxLen) {
  var current = new Array(maxLen);
  return function* main(pos) {
    yield current.join('');
    if (pos == maxLen) return;
    for (let ch of chars) {
      current[pos] = ch;
      yield* main(pos+1);
    }
    current[pos] = '';
  }(0);
}
for (let value of generateString("abc", 4)) {
  value = CSS.escape(value);
  document.write('[data-valueA="'+value+'"][data-valueB="'+value+'"],<br />');
}

Of course, this becomes too absurdly huge to be useful in practice. If you want to allow the 26 latin letters in lowercase and uppercase, the 10 digits, and 2 additional symbols, that's 64 possible characters. With a maximum length of 10, there are these many possibilities:

64^0 + 64^1 + ... + 64^10 = 1.171221845949812801 * 10^18