Html Question posted in
Some basic documentation can be found here.

Html – Style link to current :target using only CSS?

Is it possible to highlight the link the the current :target, using only HMTL and CSS?

:target {
    border: 2px solid red;
}
<nav>
  <a href="#foo">Foo</a>
  <a href="#bar">Bar</a>
</nav>

<section id="foo">This is foo.</section>

<section id="bar">This is bar.</section>

The example highlights the targeted element, but the goal is, to add styling to the link, which has been clicked to get to this target.

Edit: The links will not lead to different HTML pages, only to targets within the current page. This is used as a single-page website, so the URL won’t change, but the "#foo" part at the end.

Edit 2: :local-link seems to be designed to do exactly what is desired, but it’s only a proposal and not supported by any browser. So the question is, if there is a workaround using only supported CSS.

Tags:

3

Answers


  1. Chosen as BEST ANSWER
    0

    This is a working solution, but the links have to be known and specified in the CSS:

    a {
    color: blue;
}

:target {
    border: 2px solid red;
}

body:has(#foo:target) a.foo,
body:has(#bar:target) a.bar {
    color: red;
}
    <nav>
  <a href="#foo" class="foo">Foo</a>
  <a href="#bar" class="bar">Bar</a>
</nav>

<section id="foo">This is foo.</section>

<section id="bar">This is bar.</section>

    Once a user clicks on the #foo link, the body has an element with ID #foo which also has been targeted, so the selector works and you can access child elements of this body.


  2. 0

    check this https://www.w3schools.com/howto/howto_js_tabs.asp
    you will need to add a similar function to your code

    function openCity(evt, cityName) {
  // Declare all variables
  var i, tabcontent, tablinks;

  // Get all elements with class="tabcontent" and hide them
  tabcontent = document.getElementsByClassName("tabcontent");
  for (i = 0; i < tabcontent.length; i++) {
    tabcontent[i].style.display = "none";
  }

  // Get all elements with class="tablinks" and remove the class "active"
  tablinks = document.getElementsByClassName("tablinks");
  for (i = 0; i < tablinks.length; i++) {
    tablinks[i].className = tablinks[i].className.replace(" active", "");
  }

  // Show the current tab, and add an "active" class to the button that opened the tab
  document.getElementById(cityName).style.display = "block";
  evt.currentTarget.className += " active";
}
    Login or Signup to reply.
  3. 0

    Here is a working implementation:

     <body>
    <section id="foo">This is foo.</section>
    <section id="bar">This is bar.</section>

    <a href="#foo" id="target1">Target 1</a>
    <a href="#bar" id="target2">Target 2</a>
  </body>

          :target {
        color: red;
      }

      #foo:target ~ #target1,
      #bar:target ~ #target2 {
        color: magenta;
      }
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search