Div{} style in a an HTML/CSS/JS project

Problem description

If you use the tag selector div in CSS, it impacts some divs of the replit interface, and everything look off and weared. This is an example of the issue:
div{ background-color: red; }

The solution is to use a descendent selector from body. This is a workaround that prevents the issue from happening:
body div{ background-color: red; }

Expected behavior

the tag selector div in a CSS rule should only affect the divs created in the project.

Actual behavior

the tag selector div in a CSS rule affect the divs created in the project and some divs of the replit interface.

Steps to reproduce

In an HTML/CSS/JS project
div{ border: 10px solid red; }

You would see the border in the divs of the project, and in some other divs from the interface.

Browser

Chrome

OS

Linux, Windows

Device if mobile

Android

Plan

Free

@LuisDiaz Thank you for sharing the details. I’m not sure I’m following. May I ask for an example Repl and screenshot(s) of the issue so I can better understand?

2 Likes