first-child doesn't work in tbody?

Question

I'm trying to select the first td.is-active inside my tbody. The .is-active style is well accepted, but it's impossible to add a radius to the first (and only first) .is-active.

Full code here.

Or just my SCSS:

td {
      &.is-active {
            background-color: $color5;

            &:first-child {
                border-bottom-left-radius: 10px;
                border-top-left-radius: 10px;
        }
       }
}

An idea ? Thanks.

Questions seeking debugging help ("why isn't this code working?") must include the desired behavior, a specific problem or error and the shortest code necessary to reproduce it **in the question itself**. — Pete, Feb 12 '18 at 16:13

score 1 · Answer 1 · answered Feb 12 '18 at 16:18

CSS properties are not cumulative and do not support sub-selection. td.is-active:first-child will not select the first element within the .is-active group. It will select the first td if it has the .is-active class, and no td matches this condition.

td:first-child will always select the first td, regardless of its class.

You are looking for the :first-of-class selector, which, unfortunately, doesn't exist.

first-child doesn't work in tbody?

1 Answers1