-1

I have a very specific situation here that I can't find anywhere else.

I need to point to a <link> element that contains the rel="me" attribute AND an href="https://www.example.com/profile/12345" attribute that CONTAINS 12345.

<link rel="me" href="https://www.example.com/profile/12345"/>

I tried with document.querySelectorAll() but I don't know how to format it to make the AND operator work.

if (document.querySelectorAll('[rel="me"], a[href*=123456]')[0])

Any ideas on how to do this?

Khyn E M C Santos
  • 17
  • 3

1 Answers1

2

In a CSS selector "AND" is just not using a combinator at all.

If you have a type (or universal) selector, it has to go first.

The type selector to select <link> elements is link not a.

link[rel="me"][href*="12345"]

If you want the first match, use querySelector() instead of querySelectorAll()[0]

const el = document.querySelector('link[rel="me"][href*="12345"]');
console.log(el);
<link rel="me" href="https://www.example.com/profile/12345"/>
Quentin
  • 914,110
  • 126
  • 1,211
  • 1,335