CODEWITHSUNDEEP
htmlcss
Nguyễn VŨ
Nguyễn VŨ

Reputation: 181

How to force all tag using style in parent's tag?

I have some code html like:

<div style=color: green>
  <span style="color:black>Some text</span>
  <p style="color:red>Some text</p>
  <div style="color:blue>Some text</div>
</div>

I want all 'Some text' have red follow by it's parent, please help!

Upvotes: 0

Views: 1066

Answers (3)

Awais
Awais

Reputation: 4912

Welcome to SO Dear

Use * selector with !important as you use inline style so !important need for override that.

div *{
 color: inherit !important;//parent color you can change it
}
<div style="color: green">
  <span style="color:black">Some text</span>
  <p style="color:red">Some text</p>
  <div style="color:blue">Some text</div>
</div>

And also you missed " around your styles

Upvotes: 2

jwchang
jwchang

Reputation: 10864

I recommend the parent div to have a class like parent. From there, I would do.

.parent {
  color: green;
}

.parent * {
  color: inherit !important;
}

Upvotes: 0

hackemate
hackemate

Reputation: 537

the best and smart way to make that is creating a class to reuse the code in a future, you can make this

.custom-parent > .custom-child{
     color:green !important;
}

<div class="custom-parent">
   <p class="custom-child">some text</p>
   <a href="#" class="custom-child">some text</a>
   <spam class="custom-child">some text</span>
</div>

Upvotes: 0

Related Questions