Welcome!

By registering with us, you'll be able to discuss, share and private message with other members of our community.

SignUp Now!
  • Guest, before posting your code please take these rules into consideration:
    • It is required to use our BBCode feature to display your code. While within the editor click < / > or >_ and place your code within the BB Code prompt. This helps others with finding a solution by making it easier to read and easier to copy.
    • You can also use markdown to share your code. When using markdown your code will be automatically converted to BBCode. For help with markdown check out the markdown guide.
    • Don't share a wall of code. All we want is the problem area, the code related to your issue.


    To learn more about how to use our BBCode feature, please click here.

    Thank you, Code Forum.

How do I change the style of text once clicked?

Edrol97

Well-Known Coder
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.

CSS:
.title_text a:clicked {
text-decoration: underline; }
 
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.
 
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

JavaScript:
document.getElementByClass("title_text3").addEventListener("click", underline);
?
 
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:
JavaScript:
const text = document.querySelector(".title_text3 a");
text.addEventListener("click", () => {
  text.style.textDecoration = "underline";
});
 
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:
JavaScript:
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.
 
Are there more than one of the links that you want to change the colour when clicked?

If so, use querySelectorAll().
JavaScript:
const texts = document.querySelectorAll(".title_text3 a");
texts.forEach((text} => {
  text.addEventListener("click", () => {
    text.style.textDecoration = "underline";
  });
});
 
Are there more than one of the links that you want to change the colour when clicked?

If so, use querySelectorAll().
JavaScript:
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.
 
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)?
 

Buy us a coffee!

Back
Top Bottom