User-select not working on a:visited - html

Question

I'm working on a Math website, and it has some exercises on it with solutions on the bottom of the page. I want to make so solutions are hidden when the user scrolls by them, and needs to click on the block for it to show the answer. I want to achieve this using only css and html. Here's what I have made so far:
HTML:
<div class="solution s1">
2+2=4
</div>
CSS:
.solution {
width:80%;
margin:25px auto;
}
.solution a:visited{
color:black;
background-color:white;
user-select:text;
}
.solution a{
background-color:#49FF59;
display:block;
width:100%;
padding:25px;
text-align:center;
color:#49FF59;
text-decoration:none;
user-select: none;
}
This code works great, except for the user-select. I want it so that the user can't copy the solution, before the block is clicked on. But the a:visited won't apply the user-select:text; I have tried to add more classes, but i wasn't able too fix it. Keep in mind most of the CSS is for asterisk.

Answer 1

If I'm correct, the approach you're trying to take is to prevent someone from doing a select all and seeing the solutions on screen due to the text being highlighted.
If that's the case there are better style properties to use for this, particularly visibility or display.
For example you can use visibility: hidden or display: none to hide the solution until a specific condition is met.
I'd also advise against using :visited for something like this, unless you have specific urls for each question that you plan to override (if you use href='#') for everything, then once you click one, they are all 'visited'). You're going to also have struggles with browser caches when using :visited.
As an example, you could alter your container to be the clickable element, and hide your content using visibility, then show the answer on the :active state as opposed to the :visited state. This will show the answer while the mouse button is pressed. Under normal circumstances the text isn't selectable because it's hidden. If you want to keep it shown after a click but not use :visited you'll need a javascript solution.
Worth stating that this solution will not hide answers in the source code, but as you mentioned above that is not a concern for you.
.solution {
width:80%;
margin:25px auto;
background-color:#49FF59;
display:block;
width:100%;
padding:25px;
text-align:center;
}
.solution:active {
color:black;
background-color:white;
user-select:text;
}
.solution:active a {
color:black;
background-color:white;
visibility:visible;
}
.solution a{
text-align:center;
text-decoration:none;
visibility: hidden;
}
<div class="solution s1">
2+2=4
</div>