macOS Sierra CSS general sibling combinator - weird behaviour

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.

Solution

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.