Question 184266 in CSS Question posted in
Some basic documentation can be found here.

Css – How to use nested class selector for tr and td?

If this is my html structure:

<tr class="editing">
   <td class="col-2"></td>
   <td class="col-2"></td>
</tr>

how come this nested css works fine:

.editing {
    padding: 1em 1.5em;      
    .col-2 {
        font-size: 11em;
    }
}

but this does not:

.editing {
    padding: 1em 1.5em;      
    td {
        font-size: 11em;
    }
}

I am using Chrome 114 and according to https://caniuse.com/css-nesting CSS nesting is supported. I know how to use a non-nested approach this is an exercise in using a newly supported CSS feature.

Tags:

2

Answers


  1. 0

    nested CSS selectors are not supported (yet) in all browsers. It’s not really recommended to do that right now.

    You should just use them un-nested like this:

    .editing {
  padding: 1em 1.5em;
}

.editing .col-2 {
  font-size: 11em;
}
/* or */
.editing td {
  font-size: 11em;
}
    Login or Signup to reply.
  2. 0

    According to this article:

    HTML elements currently require the & symbol in front or being wrapped with :is().

    …and the spec:

    The selector of nested style rules must not start with an identifier or a functional notation.

    This means you need to rewrite your second rule as:

    .editing {
  padding: 1em 1.5em;

  :is(td) {
    font-size: 11em;
  }
}

    …or:

    .editing {
  padding: 1em 1.5em;

  & td {
    font-size: 11em;
  }
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search