Why Does CSS Work with Fake Elements

Why does CSS work with fake elements?

Why does CSS work with fake elements?

(Most) browsers are designed to be (to some degree) forward compatible with future additions to HTML. Unrecognised elements are parsed into the DOM, but have no semantics or specialised default rendering associated with them.

When a new element is added to the specification, sometimes CSS, JavaScript and ARIA can be used to provide the same functionality in older browsers (and the elements have to appear in the DOM for those languages to be able to manipulate them to add that functionality).

(There is a specification for custom elements, but they have specific naming requirements and require registering using JavaScript.)

Why doesn't my professor want me to use made-up elements?

• They are not allowed by the HTML specification
• They might conflict with future standard elements with the same name
• There is probably an existing HTML element that is better suited to the task

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

Yes. People don't use them because they have the above problems.

Does the scope of css include special elements?

"special" doesn't have any defined meaning in HTML or CSS terms.

*:not(body):not(p) will select all elements that aren't the body or a p including html, head meta, etc.

Why CSS-Modules is affecting globally when working with html elements?

Write like this.

Make a Class or ID and call them where is needed.

.bu{
    width: 10vw;
    min-width: 150px;
    background-color:red;
}

<button class="bu">button1 </button><br><br>
<button>button2 ! </button>