Solution 1 :

I would avoid using ids as they have to be unique (no more than one per page). If you have to target specific list items use data attributes.

ul li[data-type="name"] { color: red; }
  <li data-type="name">Bobby</li>
  <li data-type="age">26</li>

Solution 2 :

either you can use the JS also add style to the Element.

document.getElementById(id) = new style

Add inline style using Javascript

Or you need to load the script before the style.

Solution 3 :

If you assign a id to any tag or element you don’t need to use element or tag name to style it. Directly use id. by #id li { background: red; } it means inside the element(which has id) it search for another li element.

#id {
  background: red;

Solution 4 :

if your creating element dynamically it’s better to apple style that time
for example

var el = document.createElement('div');

 'background-color: red; color: white; width: 150px; height: 150px; border: 1px red solid');
 var container = document.getElementById('container-id');

Solution 5 :

I would avoid using ids as they have to be unique

.bgred { background: red;color:#fff }
.bggreen { background: green;color:#fff }
  <li class="bgred">Bobby</li>
  <li class="bggreen">26</li>

Problem :

If i use HTML tags inside javascript file, how can i select them and use them in a css file?

for example:
<li id="id"> name </li>

how can i select and use id in the stylesheet?

I tried it this way but it didnt work
#id li { background: red;}


Comment posted by Developer Inside

#id { background: red;}