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>