How do I change the style of text once clicked?

[Edrol97]

Hi all, I know how to change the style of text on hover but is there a css styling for text links once clicked, i.e.

.title_text a:clicked {
text-decoration: underline; }

 

[Johna]

If you mean while the mouse is being held down, then use the :active pseudo-class.
If you want to change the style of a link that has been clicked any time in the past, use the :visited pseuo-class.
Otherwise, you'll have to use JavaScript with a click event listener.

 

[Edrol97]

If you mean while the mouse is being held down, then use the :active pseudo-class.
If you want to change the style of a link that has been clicked any time in the past, use the :visited pseuo-class.
Otherwise, you'll have to use JavaScript with a click event listener.

so would it be something like

document.getElementByClass("title_text3").addEventListener("click", underline);

?

 

[Johna]

You probably meant to use document.getElementsByClassName().

Unless underline is an existing function that you've written, that's not going to work.
Do something like this:

const text = document.querySelector(".title_text3 a");
text.addEventListener("click", () => {
  text.style.textDecoration = "underline";
});

 

[Edrol97]

You probably meant to use document.getElementsByClassName().

Unless underline is an existing function that you've written, that's not going to work.
Do something like this:

const text = document.querySelector(".title_text3 a");
text.addEventListener("click", () => {
  text.style.textDecoration = "underline";
});

Hi John,

This hasn't worked. I'm not sure what I'm doing wrong.

 

[Johna]

Are there more than one of the links that you want to change the colour when clicked?

If so, use querySelectorAll().

const texts = document.querySelectorAll(".title_text3 a");
texts.forEach((text} => {
  text.addEventListener("click", () => {
    text.style.textDecoration = "underline";
  });
});

 

[Edrol97]

Are there more than one of the links that you want to change the colour when clicked?

If so, use querySelectorAll().

const texts = document.querySelectorAll(".title_text3 a");
texts.forEach((text} => {
  text.addEventListener("click", () => {
    text.style.textDecoration = "underline";
  });
});

I think I've figured out the problem. The text is part of my navigation bar div. It doesn't have a specific style associated with it. Problem is I don't know how to make it so that this text underlines when it's clicked as it's not even part of a div class.

 

[Johna]

Can you show the HTML? It'll be easier for me to help you if I can see your markup.

 

[tomliv]

I think I've figured out the problem. The text is part of my navigation bar div. It doesn't have a specific style associated with it. Problem is I don't know how to make it so that this text underlines when it's clicked as it's not even part of a div class.

@Johna's script should work if elements are being selected. The target elements don't need a style beforehand. Is it possible something with !important applied may be overriding this style? Is the text targeted inside an <a> in your html (I hope so)?