[css] Show multiple elements suggestions

input {
  &:hover, &:focus {
    &::placeholder {
      color: red;
    } 
  }
}

For example show it as:

<input :hover ::placeholder> or <input :focus ::placeholder>

or

<input :hover ::placeholder>
<input :focus ::placeholder>

Codepen: https://codepen.io/m0ksem/pen/qBjxxzo

[aeschli]

Yes, let’s deal with the specificity issue in a different issue. Thanks @m0ksem for bringing this to attention.

[GauravB159]

Hi @m0ksem, no worries! I’m new to open source, but really having fun contributing.

So for the specificity, I figured the values were wrong. But, there seems to be a bug in prod itself that causes the calculation to be wrong, if you check the screenshot. I’m not sure if I should address that bug in this issue, or create a separate issue for that.

Also, if you check my PR, I have added a case that has not been handled in my fix. Do you think that case should be handled, or the way it is currently coded is fine?

Edit: The issue seems to be in SCSS files only when nesting is used, CSS files work fine for specificity since there is no nesting. Can you try it out and let me know if you’re facing the same issue?

input { #id { p { color: red; } } } - Returns (0, 0, 1)

input #id p { color: red; } - Returns (1, 0, 2)