not working to keep a CSS style in a selected link

Question

I'am trying to change the appearance of a selected link, without success. It should has the same appearence defined when the link is hovered.

Tried to use :focus in some syntaxes like

.menuFAQ li:hover a, li:focus a {

but, when the link lost the hover, the style gone.

What am I doing wrong?

body,
html {
  margin-left: auto;
  margin-right: auto;
  width: 70%;
}

.menuFAQ {
  background: #fff;
  font-family: Segoe ui, Calibri, sans-serif;
  font-size: 2em;
}

.menuFAQ ul {
  list-style-type: none;
  position: relative;
  margin-left: -40px;
  /* to avoid user agent chrome */
}

.menuFAQ li {
  display: inline-block;
  margin-top: 10px;
  margin-bottom: 10px;
  width: 49%;
  background: #fff;
  line-height: 80px;
  text-align: center;
  box-shadow: 2px 3px 4px 0px rgba(170, 170, 170, 1);
}

.menuFAQ li a {
  display: block;
  color: #020062;
  background: #fff;
  text-decoration: none;
}

.menuFAQ li:hover a {
  color: #fff;
  background: linear-gradient(90deg, rgba(2, 0, 98, 1) 0%, rgba(89, 120, 167, 1) 50%);
}

:target {
  color: #fff;
  font-size: 1em;
}

div.items>div:not(:target) {
  display: none
}

div.items>div:target {
  display: block;
  margin-left: auto;
  margin-right: auto;
  color: #000;
  border: 1px solid #aaa;
}

<div class="menuFAQ">
  <ul>
    <li><a class='target' href="#typeA">typeA</a></li>
    <li><a class='target' href="#typeB">typeB</a></li>
  </ul>
</div>

<div class="items">
  <div id="typeA">
    <nav>
      A long and variable text size to explain TypeA
      <br>[...]
    </nav>
  </div>
</div>

<div class="items">
  <div id="typeB">
    <nav>
      A long and variable text size to explain TypeB
      <br>[...]
    </nav>
  </div>
</div>

Answer 1

Here is how you could track the active state with javascript.

const allTargetLinks = document.querySelectorAll('.target')

allTargetLinks.forEach(targetLink => {
  targetLink.addEventListener('click', () => {
    allTargetLinks.forEach(targetLink => {
      targetLink.classList.remove('active')
    })
    targetLink.classList.add('active')
  })
})

body,html{margin-left:auto;margin-right:auto;width:70%}.menuFAQ{background:#fff;font-family:Segoe ui,Calibri,sans-serif;font-size:2em}.menuFAQ ul{list-style-type:none;position:relative;margin-left:-40px}.menuFAQ li{display:inline-block;margin-top:10px;margin-bottom:10px;width:49%;background:#fff;line-height:80px;text-align:center;box-shadow:2px 3px 4px 0 rgba(170,170,170,1)}.menuFAQ li a{display:block;color:#020062;background:#fff;text-decoration:none}.menuFAQ li .active,.menuFAQ li:hover a{color:#fff;background:linear-gradient(90deg,rgba(2,0,98,1) 0,rgba(89,120,167,1) 50%)}:target{color:#fff;font-size:1em}div.items>div:not(:target){display:none}div.items>div:target{display:block;margin-left:auto;margin-right:auto;color:#000;border:1px solid #aaa}

<div class="menuFAQ"> <ul> <li><a class='target' href="#typeA">typeA</a></li> <li><a class='target' href="#typeB">typeB</a></li> </ul></div><div class="items"> <div id="typeA"> <nav> A long and variable text size to explain TypeA <br>[...] </nav> </div></div><div class="items"> <div id="typeB"> <nav> A long and variable text size to explain TypeB <br>[...] </nav> </div></div>

Answer 2

By what I understand you'r wanting the style to stay after the link is selected and the cursor is no long hovering. If this is the case, you are not able to do it with CSS alone if you want to use targets as per: CSS: Using :target to change css on multiple ID's

However you maybe able to get away with using the :active pseudo or get jazzy with some JS?

Update:

I couldn't get :active to work, might have to use JS...

JS

This is very rudimentary but if you add this on the bottom of your body

<script>
    function selectActive(hash) {
        for (const element of document.querySelectorAll("li a")) {
            element.classList.remove("selected")
        }
        document.querySelector(`[href="${hash}"]`).classList.add("selected")
    }
    addEventListener("hashchange", () => {
        selectActive(window.location.hash);
    })
    selectActive(window.location.hash);
</script>

And add .menuFAQ li a.selected in CSS you could get the expected result

.menuFAQ li:hover a,
.menuFAQ li a.selected {
    color: #fff;

I wouldn't use it in production but it is deff food for thought :)

Answer 3

If I understand correctly, you want the link to retain the style of hovered state if it's clicked and thus displays its intended target. If so, you cannot do that with CSS alone. You could use Javascript to add/remove another class that applies the same style. Using jQuery:

$( document ).ready(function() {
    $(".target").click(function(){
        $(".target").removeClass('selected');
        $(this).addClass('selected');
    });
});

And the CSS in your question updated with

.menuFAQ li:hover a, .menuFAQ li a.selected  { color: #fff;
  background: linear-gradient(90deg, rgba(2,0,98,1) 0%, rgba(89,120,167,1) 50%);}