Why this CSS not valid? - css

Question

I have this CSS:
.optionQuiz a:hover{
.Qtick{
background-color: green;
}
}
My HTML:
<div class="optionQuiz">
<a href="#">
<span class="Qtick">1</span>
</a>
</div>
My GOAL:
My Goal is when the user hovers the mouse over the <a> the span with class within the '<a>' to be highlighted.
MY Question:
Why this CSS didn't work? This is indeed good way but seems such thing have not been invented? Why? Should I use JavaScript? I don't want. I want it in CSS way.
Any kind of help is appreciated.

Answer 1

You don't need to use JavaScript. You can solve it with CSS only on a very simple way. See the following snippet:
.optionQuiz a:hover .Qtick {
background-color: green;
}
.optionQuiz a:hover .other1 {
background-color: blue;
}
.optionQuiz a:hover .other2 {
background-color: yellow;
}
<div class="optionQuiz">
<a href="#">
<span class="Qtick">1</span>
<span class="other1">2</span>
<span class="other2">3</span>
</a>
</div>

Answer 2

With plain CSS you can't use nested selectors.
You can do it using a pre-processor like Sass, PostCSS, Less...
If you want to use just CSS you have to use something like this:
a:hover span.Qtick{
color:red;
}
<div class="optionQuiz">
<a href="#">
<span class="Qtick">1</span>
</a>
</div>

Answer 3

Not sure what
.Qtick{
background-color: green;
}
is for...
if you want to change the color
this will do:
.optionQuiz a:hover{
background-color: green;
}
if you want only the span to be highlighter use the following selector:
.optionQuiz a:hover >span.Qtick{
background-color: green;
}