CODEWITHSUNDEEP
htmlcss
user3595632
user3595632

Reputation: 5730

How can I separate css property using id or class?

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?

Upvotes: 1

Views: 219

Answers (4)

Prasath V
Prasath V

Reputation: 1356

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>

Upvotes: 0

KevinAdu
KevinAdu

Reputation: 129

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>

Upvotes: 0

Sergio Tx
Sergio Tx

Reputation: 3856

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>

Upvotes: 3

Charantej Golla
Charantej Golla

Reputation: 598

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>

Upvotes: 1

Related Questions