Member Avatar for davy_yg 
#languages {margin: -70px 0 0 820px; text-decoration:none;}
#languages a:link{color:black; text-decoration:underline;}

<div id="languages"><a href="../index.php">ID</a> | <a href="index.php">EN</a></div>

which one is #languages a:link ? Why both of them are underline? I wonder since I only choose one of them.

  • 3 Contributors
  • 4 Replies
  • 127 Views
  • 11 Hours Discussion Span
  • Latest Post Latest Post by davy_yg

Dani AI

Generated

Short answer: mark the currently selected language on the link itself (class or ARIA) and style that state, rather than trying to target links with state pseudo-classes or styles on the parent. and were on the right track — here is a clean, accessible pattern that covers server- and client-side cases and avoids surprises from pseudo-class behavior.

Example CSS (default = underlined; selected = no underline):

#languages a { text-decoration: underline; color: #000; }
#languages a.active,
#languages a[aria-current="page"] { text-decoration: none; font-weight: 600; }

Minimal HTML (server should output the active class for the current language):

<div id="languages">
  <a href="/id/" class="active" aria-current="page">ID</a> |
  <a href="/en/">EN</a>
</div>

If you cannot set the class server-side, use this small client-side fallback to match the current path and add the active class and ARIA attribute:

(function(){
  const current = location.pathname.replace(/\/$/, '');
  document.querySelectorAll('#languages a').forEach(link=>{
    const hrefPath = new URL(link.href, location.origin).pathname.replace(/\/$/, '');
    if (hrefPath === current) {
      link.classList.add('active');
      link.setAttribute('aria-current','page');
    }
  });
})();

Troubleshooting tips: avoid styling only :link (it targets unvisited links and can be misleading); check cascade and specificity if your rule is ignored (make sure this stylesheet loads after others); prefer a class or aria-current for reliability and accessibility. For reference on the properties used, see MDN: text-decoration and .

Recommended Answers

All 4 Replies

Member Avatar for TonyG_cyprus

Because both links are within the languages div.

<html>
<head>
  <title></title>
</head>
<body>

<div id="languages"><a href="../index.php" style="text-decoration:none">ID</a> | <a href="index.php">EN</a></div>

</body>
</html>

works.

Member Avatar for JorgeM

With the selector you choose, it includes both because you are indicating that anchor:link found within the element with an ID = "languages" should be selected. If you only want to choose one of the links, then, you should add a unique ID to the target anchor element and select it as follows:

<!DOCTYPE html>
<html>
<head>
<style>
  #languages a:link {text-decoration:none;}
  #languages #link1:link {color:black; text-decoration:underline;}
</style>
</head>
<body>

<div id="languages">
 <a id="link1" href="../index.php">ID</a> | <a href="index.php">EN</a>
</div>

</body>
</html>
Member Avatar for TonyG_cyprus

either or, yours is more useful though, jorgeM

Member Avatar for davy_yg

The thing is: the selected link must have no underline whereas the deselected link must have underline. and if in different time anyone change the language mode, the selected link will be change.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.