Question about id & # in CSS

MDN Learn
#1

In going through the CSS tutorial, it’s mentioned several times that the distinction between id and class is that class can be reused multiple times, while id can only be used once. While playing around with CSS though, I tried adding the same id to two different elements (an h1 and a p), and then adding a rule for that id; it didn’t cause any problems, they both followed the rule I had assigned (color: green;) without any issues, without even showing an error in the Console.

Am I misunderstanding how this works? Code below (CSS inline):

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<title>My CSS experiments</title>
</head>
<style>
	span {
		background-color: yellow;
	}

	strong {
		color: rebeccapurple;
	}
	
	em {
		color: rebeccapurple;
	}
	
	h1 {
		color: blue;
	}
	
	#single {
		color: green;
	}
</style>
<body>
	<h1 id="single">Type selectors</h1>
	<p id="single">Veggies es bonus vobis, proinde vos postulo essum magis <span>kohlrabi welsh onion</span> daikon amaranth tatsoi tomatillo
		melon azuki bean garlic.</p>
	<p>Gumbo beet greens corn soko <strong>endive</strong> gumbo gourd. Parsley shallot courgette tatsoi pea sprouts fava bean collard
		greens dandelion okra wakame tomato. Dandelion cucumber earthnut pea peanut soko zucchini.</p>
	<p>Turnip greens yarrow ricebean rutabaga <em>endive cauliflower</em> sea lettuce kohlrabi amaranth water spinach avocado
		daikon napa cabbage asparagus winter purslane kale. Celery potato scallion desert raisin horseradish spinach</p>
</body>
</html>
#2

Hi @VoodooInfinity! You are right — even though you are not supposed to have more than one of each ID on a page, you can do, and your HTML will render without complaining, and you can even style multiple IDs with CSS without it complaining.

This is because HTML and CSS are designed to be permissive languages — you can make a few mistakes, and you’ll still get content rendered, rather than everything falling to pieces if you include a single syntax error. The idea is that it is better for the web to allow content to render where possible, rather than being ultra picky about syntax.

However, it is better to get syntax right whever possible, as in certain places syntax errors may start to cause unexpected behavior, or bugs.

For example, in JavaScript, you may want to select a rendered element to manipulate it in some way, using its unique ID; you’d do this using document.getElementById(). This may not work correctly if you have multiple IDs.

As another example, <label> elements reference the form input element they are providing a text label for, using their unique ID. This also won’t work correctly if you have multiple IDs the same. This will cause accessibility problems for people using assistive technology.

And linking to specific parts of documents using document fragments relies on unique IDs, for example https://developer.mozilla.org/en-US/docs/Web/CSS/display#Browser_compatibility