What I want to do :
div#test { color: green;}
div { color: blue; background-color:white;}<div id="test">
<span>Text</span>
</div>
<div>
<span>Text2</span>
</div>I want to apply only color:green(not background-color) to div tag having id="test". But as you can see here, div tag with id="test" also has background-color...
How can I avoid this?
You will have to overwrite the background color in the ID (Charantej answer) or add a :not to the div rule. I changed the background to red to make it visible.
div#test { color: green;}
div:not(#test) { color: blue; background-color:red;}<div id="test">
<span>Text</span>
</div>
<div>
<span>Text2</span>
</div>You need to add background none property to id
div#test { color: green; background-color:none;}
div { color: blue; background-color:white;}<div id="test">
<span>Text</span>
</div>
<div>
<span>Text2</span>
</div>You should separate the style you want to apply into a class. Then add that class to an element you want apply the background style to, like so:
div#test { color: green;}
div { color: blue;}
.bg-white { background-color: white;}<div id="test">
<span>Text</span>
</div>
<div class="bg-white">
<span>Text2</span>
</div>You can use id like this
#test {
color: green;
background: red;
}
div {
color: blue;
background: none;
}<div id="test">
<span>Text</span>
</div>
<div>
<span>Text2</span>
</div>
