Why does CSS work with fake elements?

Question

In my class, I was playing around and found out that CSS works with made-up elements.

Example:

Answer 1

Unknown elements are treated as divs by modern browsers. That's why they work. This is part of the oncoming HTML5 standard that introduces a modular structure to which new elements can be added.

In older browsers (I think IE7-) you can apply a Javascript-trick after which they will work as well.

Here is a related question I found when looking for an example.

Here is a question about the Javascript fix. Turns out it is indeed IE7 that doesn't support these elements out of the box.

Also; why didn't he know that made-up tags existed and worked with CSS. Are they uncommon?

Yes, quite. But especially: they don't serve additional purpose. And they are new to html5. In earlier versions of HTML an unknown tag was invalid.

Also, teachers seem to have gaps in their knowledge, sometimes. This might be due to the fact that they need to teach students the basics about a given subject, and it doesn't really pay off to know all ins and outs and be really up to date. I once got detention because a teacher thought I programmed a virus, just because I could make a computer play music using the play command in GWBasic. (True story, and yes, long ago). But whatever the reason, I think the advice not to use custome elements is a sound one.