-2

This snippet with 'spaces' around the tilde does not work.

  h3 ~ p {
   color: red;
  }
<!doctype html>
<html>
<head>
 <meta charset="utf-8">
 <meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
 <title></title>

</head>
<body>
<h3>this does not work</h3>
<p>sibling</p>
<p>sibling</p>
<p>sibling</p>
</body>
</html>

This snippet without the spaces does work.

  h3~p {
   color: red;
  }
<!doctype html>
<html>
<head>
 <meta charset="utf-8">
 <meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
 <title></title>

</head>
<body>
<h3>this does work</h3>
<p>sibling</p>
<p>sibling</p>
<p>sibling</p>
</body>
</html>

Undo will revert to not working whereas when I put 'new' blank spaces around the tilde it works.

  h3 ~ p {
   color: red;
  }
<!doctype html>
<html>
<head>
 <meta charset="utf-8">
 <meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
 <title></title>

</head>
<body>
<h3>this does work</h3>
<p>sibling</p>
<p>sibling</p>
<p>sibling</p>
</body>
</html>

Since CSS in general has the power to make me want to tear my hair out it would be nice if someone could help me avoid these kinds of problems.

Fpunkt
  • 976
  • 7
  • 13
  • Are you using VSCode, Atom, Sublime or a similar IDE meant for development? Since you think this is potentially related to your operating system, it could be macOS putting invalid characters in your document if you're using Apple TextEdit or something like that. – Jon Uleis Feb 22 '18 at 22:41
  • It's the same whether I use Sublime Text or Textmate or vim. That's why I think it has to do with the OS. – Fpunkt Feb 22 '18 at 22:56
  • Can you reproduce the issue in a Stack Overflow snippet? – Jon Uleis Feb 22 '18 at 23:00

1 Answers1

0

It's because you have a non-breaking space right after the tilde in your first example. It appears if you accidentally press option+space instead of space.

Read more here

The errors like this is a real headache sometimes!

Kosh
  • 16,966
  • 2
  • 19
  • 34
  • Wow. Thanks. I'm on a german keyboard, ~ = option+n. The solution to this is in the link above but here it is anyway: Create ~/Library/KeyBindings/DefaultKeyBinding.dict if that does not already exist and type: { "~ " = ("insertText:", " "); } This will prevent non-breaking space ( NBSP ) after the tilde. – Fpunkt Feb 23 '18 at 00:41
  • @fx____, happy to help! – Kosh Feb 23 '18 at 00:43