May I nest declarations inside another selector?
td:hover
{
background-color: darkblue;
color: white;
border-color: purple;
text-decoration: underline double;
img
{
border: solid 2.5px purple;
}
}
Is it valid and correct by using CSS?
2
Answers
It probably is in most browsers, if you’re having trouble use scss, you can indent there and it compiles to normal CSS.
Yes, you can nest CSS declarations within other selectors as a core part of CSS techniques. It’s q way to create more specific styling rules that are applied only in certain contexts.
With
td:hover
the outer selector targets table cells () when the user hovers over them. With the nested styles, the styles within the curly braces ({ }) will be applied only to elements that are within the hovered table cell ().Be good to spend some more time digging into the mozilla docs for more examples and experiments.