HTML Code

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>jQuery scoped hreflang selector</title>
  <style>
    nav, footer { padding: 10px; margin: 8px 0; border: 1px dashed #94a3b8; }
    a { margin-right: 10px; }
    .locale-en { background: #dcfce7; border-bottom: 2px solid #16a34a; }
  </style>
</head>
<body>
  <nav id="main-nav">
    <a href="#" hreflang="en">Nav EN</a>
    <a href="#" hreflang="en-GB">Nav EN-GB</a>
    <a href="#" hreflang="fr">Nav FR</a>
  </nav>
  <footer>
    <a href="#" hreflang="en">Footer EN (not styled)</a>
  </footer>
  <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
  <script>
    $("#main-nav a[hreflang|='en']").addClass("locale-en");
  </script>
</body>
</html>

Lines: 0 | Characters: 0

Live Preview Auto-refresh on Run

jQuery scoped a[hreflang|='en'] (Try It)