Is there any way to get text to highlight when you click on a # tag within the page?

Question

Like on wikia, when you click on a reference number and it highlights the reference at the bottom of the page? I'm very new to coding, but I'm picking it up pretty well. Just let me know if it's possible, and give me an example please. Thanks.

Answer 1

Yes, there is.

There is a CSS pseudo-class...:target.

The pseudo-class :target is used to style the target element of a URI containing a fragment identifier. For example, the URI

What that means is that if you give the text (or other element) an ID (#whatever) you can specifiy what happens when that element is referenced by a click on a link that..ahem...targets that href:

#one:target {
  background: red;
}
#two:target {
  background: green;
}
#three:target {
  background: yellow;
}
.wrap div {
  width: 50px;
  height: 50px;
  display: inline-block;
  margin: 1em;
  background: #000;
}
a {
  display: inline-block;
  padding: .5em;
  background: lightgreen;
  margin: 1em;
  color: green;
  text-decoration: none;
}

<a href="#one">First</a>
<a href="#two">Second</a>
<a href="#three">Third</a>

<div class="wrap">
  <div id="one"></div>
  <div id="two"></div>
  <div id="three"></div>
</div>