Is this lengthy pseudo class combination a valid statement? - html

Question

This is my code:
.fontmenu .fontlist{
position: absolute;
bottom:30px;
display:none;
}
.fontbutton button:hover .fontmenu .fontlist{
display:block;
}
<div class="fontmenu">
<div class="fontbutton">
<button>fonts</button>
</div>
<div class="fontlist">
<div onclick="font(1)">Arial</div>
<div onclick="font(2)">Courier</div>
<div onclick="font(3)">Verdana</div>
<div onclick="font(4)">sans</div>
</div>
</div>
The CSS is not working. The list is not visible when I hover the button. I want to know whether the .fontbutton button:hover .fontmenu .fontlist{} is valid or not.

Answer 1

This is what you have used:
.fontbutton button:hover .fontmenu .fontlist{ }
This won't work
Why it won't work? Read on. I will explain. But first, lets see what will work.
Lets try using some selectors:
.fontbutton:hover + .fontlist {}
This WILL work
Let's see it in action:
.fontmenu .fontlist {
bottom: 30px;
display: none;
}
.fontbutton:hover + .fontlist {
display: block;
}
/* No need to include the wrapper fontmenu div,
just target the siblings, ie, fontbutton and fontlist.
The + selector must be used, otherwise, the browser will
think fontlist is the child of fontbutton */
<div class="fontmenu">
<div class="fontbutton">
<button>fonts</button>
</div>
<div class="fontlist">
<div onclick="font(1)">Arial</div>
<div onclick="font(2)">Courier</div>
<div onclick="font(3)">Verdana</div>
<div onclick="font(4)">sans</div>
</div>
</div>
Notice that the list becomes visible even if we hover to the right of the button. This is happening since we are targeting the div fontbutton and not the <button> element. So, the browser makes the list visible when we hover the div and not the button.
How to fix?
We need to change the html a little.
.fontmenu .fontlist {
display: none;
}
button:hover + .fontlist {
display: block;
}
<div class="fontmenu">
<button>fonts</button>
<div class="fontlist">
<div onclick="font(1)">Arial</div>
<div onclick="font(2)">Courier</div>
<div onclick="font(3)">Verdana</div>
<div onclick="font(4)">sans</div>
</div>
</div>
Look that I removed the .fontbutton class and made the <button> a sibling of .fontlist. So, now, you can see that the list is visible only when we hover the button.
Now you would say I could just add some selectors to your css. But I didn't because there's no way you could target <button> and then move down to .fontlist which is in a separate div.
.fontbutton > button:hover ? .fontmenu > .fontlist{ }
We will have a problem at the place of ?.
First, we need to go down to .button.
Move up to .fontbutton.
Add a + selector and switch to .fontmenu.
Move down to .fontlist.
After we move down to .button, we can't go up again to .fontbutton.
CSS doesn't have something like parent selector.
So, clearly, we can't use it that way.