#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.
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.
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>
either or, yours is more useful though, jorgeM
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.
We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.