Do ID selectors have the same use prohibition in Codepen that it's supposed to have in a "real HTML" environment?

I'm watching the video for Class and ID Selectors with Guil Hernandez, and he says "So an element can only have one ID and a page can only have one element with the same ID name." The expected behavior (unless I'm misunderstanding) is that if you've used the ID...

<div id="main-content">

...at some point in the markup and you've put something in your CSS to style that ID element...

#main-content { yadda (yadda); yadda; }

...then if you were to use that ID again elsewhere in the markup, some kind of fail behavior would be observable...like only the last element with that specific ID gets the styling.

This particular lesson series has no attendant Treehouse Workspace environment, so I was following the link to the Codepen "Code Playground" where the project code can be saved, forked or whatever...and then toyed with. So, I toyed with it to observe the behavior.

In addition to the included ID "main-content" in an existing HTML DIV element, I changed a class in the existing footer to read as the same ID and then changed the color value for that ID element to red, saved it and...<sad trombone="on">.

Both the DIV element and the footer element change values according to what's in the "CSS" portion of the code. And I suspect but need confirmation that this is due to Codepen being a web app and not (I'm just guessing here) a bona fide, actual HTML environment.

The behavior that I observe seems exactly as if it were a class element with an attribute that can be shared wherever in the markup...and I want to make sure that this is a special case error...and to trust that the info about ID and class selectors really is that they are different in 'real-world' scenarios...for lack of a better phrase.

I'll keep the code in my Forked version the same for this question, in perpetuity, at http://codepen.io/RavingNoah/pen/mAwyl