0

With CSS selectors, is it possible to select elements with an attribute value that is the same as the attribute value of another specified element? For example:

<a class="important" href="foo.bar"></a>

will always appear on the page, but the href might be anything. Then further on the page may be something like this:

<li>
    <a href="bar.foo"></a>
    <a href="foo.bar"></a>
    <a href="bar.bar"></a>
    <a href="foo.bar"></a>
</li>

This list again may contain anything but could contain <a> elements with the same href="foo.bar".

I want to be able to select those <a> elements within the list that have an href attribute that matches the href attribute of any <a class="important">

Is this possible with CSS alone? I know this could of course be done in javascript by making sure those specific <a> elements within the list are created with a class attribute, but I'm interested in if there is a purely CSS solution.

Erik Philips
  • 53,428
  • 11
  • 128
  • 150
objectfly
  • 1
  • Not only can you use a selector that matches `[attr="value"]`, you can do a partial on a value which may increase the range of matched elements. ex. `[title^="Java"]` The `^=` means the value begins with... So that selector would mean find elements with the `title` attribute that has any value that begins with "Java" so `
    ` and `` would both match.
     – zer00ne Apr 17 '18 at 00:46

1 Answers1

1

yes,

syntax

[{attri}={value}]

like this

.important{
   color:#0f0;
}

.important[href="bar.foo"]{
   color:#00f;
}

.important[href="bar.bar"]{
   color:#f00;
}

Mozilla Documentation - Attribute selectors

Erik Philips
  • 53,428
  • 11
  • 128
  • 150
Hugo Stiven Laguna Rueda
  • 159
  • 6
  • This matches the .important element itself, not the other elements. Of course, you could write something like .important[href="bar.foo"] ~ ul a[href="bar.foo"], etc assuming the ul is a following sibling of .important, but that misses the point of the question I would think. – BoltClock Apr 17 '18 at 02:10