How do I fix my CSS active link not working? - Html

needhelpforschool
February 27, 2023
208 views
0 votes
2 Answers

I’m pretty new to this stuff, but I’m creating a website for a project and currently I’ve been trying to fix my active link and nothing so far has worked. I am also using W3school spaces.

HTML:

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
<div id="navbar"> 
<ul> 
    <li id="link1"><a href="home.html">Home</a></li>
    <li id="link2"><a href="info.html">Info</a></li>
    <li id="link3"><a href="photo.html">Photos</a></li>
    <li id="link4"><a href="credit.html">Credits</a></li>
</ul> 
</div>
</body>
</html>

CSS:

ul  {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #333;
}

li {
    float: left;
}

li a {
    display: block;
    color: white;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
}

#navbar ul #link1 a:hover { 
    background-color: #C62222; 
}

#navbar ul #link2 a:hover { 
    background-color: #0000ff; 
}

#navbar ul #link3 a:hover { 
    background-color: #BB29BB; 
}

#navbar ul #link4 a:hover { 
    background-color: #28C622; 
}

a:active {
  background: #29abe2;
}

The reason for the multiple links and colors is the rubric required for all links on the navbar to be assigned a different color.

These are what i’ve tried:

.navigation a:active{
  background: #29abe2;
  color: #fff;
  border-radius: 5px; }

#page1:target, #page2:target, #page3:target, #page4:target, #page5:target{
  background: #29abe2;
  color: #fff;
  border-radius: 5px;
}

Sadly none of these have worked for me

Tags: css html

Answers

You can use !important (see this question for more concise information about this keyword: What does !important mean in CSS?). This is not the best solution but it’ll works with low-effort.

Snippet:

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #333;
}

li {
  float: left;
}

li a {
  display: block;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

#navbar ul #link1 a:hover {
  background-color: #C62222;
}

#navbar ul #link2 a:hover {
  background-color: #0000ff;
}

#navbar ul #link3 a:hover {
  background-color: #BB29BB;
}

#navbar ul #link4 a:hover {
  background-color: #28C622;
}

a:active {
  background: #29abe2 !important; /* <-- NOTICE THE !important HERE */
}

<!DOCTYPE html>
<html>

<head>
  <link rel="stylesheet" href="styles.css">
</head>

<body>
  <div id="navbar">
    <ul>
      <li id="link1"><a href="home.html">Home</a></li>
      <li id="link2"><a href="info.html">Info</a></li>
      <li id="link3"><a href="photo.html">Photos</a></li>
      <li id="link4"><a href="credit.html">Credits</a></li>
    </ul>
  </div>
</body>

</html>

Why:

Your CSS selectors #navbar ul #linkN a:hover are too specific and they override the :active style. The other (cleaner, btw) solution is to get more specific in your selectors for the :active, or rather less specific for the :hover ones (they are currently very very specific!)

ID’s in CSS have a very high specificity loading, for this reason they should be used with caution. I’ve replaced these with the attribute selector.

You also need to make your active selector more specific.

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #333;
}

li {
  float: left;
}

li a {
  display: block;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

#navbar ul [id=link1] a:hover {
  background-color: #C62222;
}

#navbar ul [id=link2] a:hover {
  background-color: #0000ff;
}

#navbar ul [id=link3] a:hover {
  background-color: #BB29BB;
}

#navbar ul [id=link4] a:hover {
  background-color: #28C622;
}


/*Make the selector more specific*/
#navbar ul li[id] a:active {
  background: #29abe2 ; 
}

<!DOCTYPE html>
<html>

<head>
  <link rel="stylesheet" href="styles.css">
https://stackoverflow.com/questions/75585706/how-do-i-fix-my-css-active-link-not-working#</head>

<body>
  <div id="navbar">
    <ul>
      <li id="link1"><a href="home.html">Home</a></li>
      <li id="link2"><a href="info.html">Info</a></li>
      <li id="link3"><a href="photo.html">Photos</a></li>
      <li id="link4"><a href="credit.html">Credits</a></li>
    </ul>
  </div>
</body>

</html>

Note that :active responds to user action, not the actual page (https://developer.mozilla.org/en-US/docs/Web/CSS/:active). If you want to highlight the current page you will need to use a class.

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #333;
}

li {
  float: left;
}

li a {
  display: block;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

#navbar ul [id=link1] a:hover {
  background-color: #C62222;
}

#navbar ul [id=link2] a:hover {
  background-color: #0000ff;
}

#navbar ul [id=link3] a:hover {
  background-color: #BB29BB;
}

#navbar ul [id=link4] a:hover {
  background-color: #28C622;
}


/*This rule will highlite an elment with the class active, while the ul is not "active"*/
#navbar ul:not(:active) li.active a,
/*This rule will highlight the class undergoing class action*/
#navbar ul li[id] a:active {
  background: #29abe2;
}

<div id="navbar">
  <ul>
    <li id="link1"><a href="home.html">Home</a></li>
    <li id="link2"><a href="info.html">Info</a></li>
    <li id="link3"><a href="photo.html">Photos</a></li>
    <li id="link4" class="active"><a href="credit.html">Credits</a></li>
  </ul>
</div>

Please signup or login to give your own answer.

Click here to cancel reply.

How do I fix my CSS active link not working? – Html

Answers