Open In App

Why does CSS work with fake elements ?

Last Updated : 01 Jun, 2022
Improve
Improve
Like Article
Like
Save
Share
Report

CSS (Cascading Style Sheets) is a stylesheet language used to design a webpage to make it attractive. The reason for using this is to simplify the process of making web pages presentable. It allows you to apply styles on web pages. More importantly, it enables you to do this independent of the HTML that makes up each web page.

In this article, we are going to learn about CSS work with fake elements. 

Fake elements: Fake elements are elements in HTML that are not specified in the HTML document. It is possible to create fake elements. Just create an element with any name you want to but it is not recommended to use. let us see why it is not recommended to use.

Example 1: In the below example, we have created some fake elements. We have created one element named “GeeksforGeeks” and it is working fine with the browser.

HTML




<!DOCTYPE html>
<html>
  
<head>
    <title>GeeksforGeeks</title>
    <style>
        body {
            text-align: center;
        }
  
        GeeksforGeeks {
            color: green;
            font-size: 60px;
        }
    </style>
</head>
  
<body>
    <GeeksforGeeks>GeeksforGeeks</GeeksforGeeks>
</body>
  
</html>


Output: 

 

Why CSS is working with this element?

This is because some browsers are designed to be compatible with future additions to HTML and unrecognized elements are parsed into the DOM but have no functions. Let us see the default functionality of the fake element.

Example 2: In the below example, we will see the default functionality of fake elements.

HTML




<!DOCTYPE html>
<html>
  
<head>
  
    <style>
        body {
            text-align: center;
        }
  
        h1 {
            color: green;
            font-size: 60px;
        }
    </style>
</head>
  
<body>
    <h1>GeeksforGeeks</h1>
  
    <GeeksforGeeks>GeeksforGeeks</GeeksforGeeks><br>
    <is>GeeksforGeeks</is><br>
    <a>GeeksforGeeks</a><br>
    <computer>GeeksforGeeks</computer><br>
    <science>GeeksforGeeks</science><br>
    <portal>GeeksforGeeks</portal><br>
    <for>GeeksforGeeks</for><br>
    <geeks>GeeksforGeeks</geeks><br>
  
</body>
  
</html>


Output:

 

We recommended not to use fake elements for developing any web page because of the following reason:

  • Fake elements are not allowed by the HTML specification.
  • Fake elements might conflict with future standard elements with the same name.
  • In HTML specification there must be a better element with some specialty because fake elements do nothing by default.


Like Article
Suggest improvement
Share your thoughts in the comments

Similar Reads