skip to Main Content

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


  1. It probably is in most browsers, if you’re having trouble use scss, you can indent there and it compiles to normal CSS.

    Login or Signup to reply.
  2. 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.

    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search