43

I found another bug with the Tidy button in the stack snippets.

(By the way, my earlier bug report still hasn't been resolved.)

This one is about the CSS.

If one of the parts of a selector starts with a colon, the "Tidy" button removes the whitespace before it.
Example:

tr :first-child {
  background: yellow;
}
<table>
  <tr><th>h1</th><th>h2</th><th>h3</th></tr>
  <tr><td>a1</td><td>a2</td><td>a3</td></tr>
  <tr><td>b1</td><td>b2</td><td>b3</td></tr>
</table>

Hitting Tidy will change the css selector to tr:first-child, which is not the same! In this case, it selects the table's first row instead of the first column.

Steps to reproduce: Copy snippet to answer, edit the above snippet, click "Run", see the result. Now click "Tidy" and then "Run" again. See the difference!

So, can this be corrected?

Edit:
To address the comments to the (deleted) answer: yes, these are different selectors! xx:yy means pseudo-class yy on element xx, while xx :yy with a space means pseudo-class yy on any child element of element xx. This is the official definition, and it doesn't need * to be correct, validating CSS.
Also, yes, * can be used to work around the bug, but it's still a bug.

2
  • 5
    @canon can we close this as typo? :P
    – Braiam
    Nov 7, 2015 at 2:06
  • Indeed this looks like a bug. Taking a look.
    – Konamiman
    Aug 4, 2016 at 10:30

1 Answer 1

2

No point in arguing here: foo :bar is not the same as foo:bar (and the same for ::), it only takes a small test on any web sandbox to verify it. Fixed, thank you.

1

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .