CSS: Can I refer a value of a attribute in a attribute selector

Question

Better explain my problem using examples:

I have a html file that contains something like

<a name="2846" href="Data.Product.html#2846" class="Function"> ... </a>
<a name="2877" href="Data.Product.html#2846" class="Function"> ... </a>
<a name="2911" href="Data.Product.html#2911" class="Function"> ... </a>

I want to select (by means of CSS selectors) elements that have class "Function", with href attribute ends with the exact value of name attribute. In the example above, only the following two will be selected

<a name="2846" href="Data.Product.html#2846" class="Function"> ... </a>
<a name="2911" href="Data.Product.html#2911" class="Function"> ... </a>

I think about that, maybe something along the line a.Function[href$=?]. My question is can I refer to the value of name attribute in a selector, is there any way to do that?

Thanks!

two loops are necessary here. – Mr_Green Oct 07 '16 at 04:54 — Mr_Green, Oct 07 '16 at 04:54
it's requrie javascript are you okay ?? – Krish Oct 07 '16 at 05:05 — Krish, Oct 07 '16 at 05:05
I was looking for a solution using only CSS selectors. – Jeremy Bi Oct 07 '16 at 05:15 — Jeremy Bi, Oct 07 '16 at 05:15
@JeremyBi It's not possible in CSS – Krish Oct 07 '16 at 06:23 — Krish, Oct 07 '16 at 06:23

Mr_Green · Answer 1 · 2016-10-07T05:07:02.043

0

Two loops are necessary in your case. One to fetch all Function class elements and then check whether the href attribute has the name attribute value in it.

Try this:

var filteredEls = Array.prototype.filter.call( // Convert NodeList to Array
  document.getElementsByClassName('Function'), // Get all "Function" class elements
  function(el) {
    return el.getAttribute('href') === "Data.Product.html#" + el.name; // Filter elements with the condition
  }
);

console.dir(filteredEls); // check console

<a name="2846" href="Data.Product.html#2846" class="Function"> ... </a>
<a name="2877" href="Data.Product.html#2846" class="Function"> ... </a>
<a name="2911" href="Data.Product.html#2911" class="Function"> ... </a>

edited Oct 07 '16 at 05:07

answered Oct 07 '16 at 05:01

Mr_Green

40,727
45
159
271

Thanks! I was wondering if it is possible to use only CSS selectors. – Jeremy Bi Oct 07 '16 at 05:10
@JeremyBi I highly doubt that. Sorry I overlooked absence of JavaScript tag. I will keep this post if you are ok with it. – Mr_Green Oct 07 '16 at 05:12

CSS: Can I refer a value of a attribute in a attribute selector

1 Answers1