This started as me thinking I had a problem understanding SCSS creating CSS. Now it appears that I don’t understand how a:visited {} works.
The questions are in the code.
Thank you for giving us of your time.
– Fred
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>0922test</title>
<style>
/* a:hover MUST come after a:link and a:visited. a:active MUST come after a:hover */
/* 1. unvisited link */
a {color: blue;}
/* 2 visited link */
a:visited {color: red; text-decoration: line-through; }
a:visited:before {
content: "✓ ";
}
/* 3 mouse over link */
a:hover {background: lightgrey;}
/* 4 selected link */
a:active {color: hotpink;}
</style>
</head>
<body>
<h1>Learning SCSS</h1>
<p><a href="https://www.koderhq.com/tutorial/sass/operator/#concatenation"
target="_blank" rel="noopener">
https://www.koderhq.com/tutorial/sass/operator/#concatenation</a> gives
an example of:</p><pre><code>$content: "\2713" + " ";
a:visited:before {
content: "#{$content}";
}</code></pre>
creating this css:<pre><code>@charset "UTF-8";
a:visited:before {
content: "✓ ";
}</code></pre>
<p>which it does (without the @charset "UTF-8";).</p>
<p>Also <a href="https://webdesign.maratz.com/lab/visited_links_styling/" >
https://webdesign.maratz.com/lab/visited_links_styling/</a> has several examples
using a:visited:hover {}. None seem to work for me.</p>
<p>My question is: What am I doing wrong?</p>
<p>None work for me in Firefox 117.0.1 (64-bit) or Chrome 116.0.5845.188 (Official Build) (64-bit)</p>
<p>Look at <a href="https://sass-lang.com/documentation/syntax/" target="_blank"
rel="noopener">Sass Documentation</a>. </p>
</body></html>
<style>
a {color: blue;} /* This works */
a:visited {
color: red; /* This works */
background: lightgray; /* This fails */
border: 1px solid black; /* This fails */
}
a:hover {background: lightgrey;} /* This works */
a:active {color: hotpink;} /* This fails */
</style>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>0922test</title>
<style>
body, :link {
background: whitesmoke;
}
:link {
outline: 1px soild whitesmoke;
border: 1px solid whitesmoke;
}
a {color: blue;}
a:visited {
background-color: yellow;
border-color: red;
color: green;
}
a:hover {background: lightgrey;} */
a:active {color: green;} */
</style>
</head>
<body>
<p>My links did not work like
https://developer.mozilla.org/en-US/docs/Web/CSS/:visited#examples .</p>
<p>On the MDN web docs I kept seeing an invitation to try AI Help (Beta).
Why not? <br>
I signed up and asked: Why doesn't "a:visited { background-color: yellow;<br>
border-color: hotpink; color: hotpink; }" work as shown on<br>
https://developer.mozilla.org/en-US/docs/Web/CSS/:visited#examples ?</p>
<p>The responce surprised and impressed me. In part the answer was:</p>
<blockquote>"To work around this limitation, the documentation suggests giving these properties <br>
a base value outside the :visited selector. This means that you need to specify a different <br>
value for color and other properties outside the :visited selector, so that changes made <br>
within the :visited selector will apply." - https://developer.mozilla.org/en-US/plus/ai-help
</blockquote>
<p>So, I added :link {
outline: 1px soild whitesmoke;
border: 1px solid whitesmoke;
} and this works.</p>
<p><a href="https://google.com/test-2" target="_blank" rel="noopener">
Have you visited google?</a></p>
<p>Also <a href="https://yahoo.com/test-2" >have you visited Yahoo?</a>
<p>Firefox 117.0.1 (64-bit) or Chrome 116.0.5845.188 (Official Build) (64-bit)</p>
</body></html>