Applying the style of the div tag to the style of all its children-CodePudding

.div {
  font-size: 20px !important;
  color: black !important;
}

<div >
  <p style="font-size: 50px; color: blue">text tag p</p>
  <p><span style="font-size: 30px; color: green">text span</span></p>
</div>

I have a div tag that has children, some of these children have their own children, each of which has its own style. I want to style the div tag to apply this style to all its children and I don't know what to do please direct me

CodePudding user response：

u can use * selector like this :

 .div * {
    font-size: 20px !important;
    color: black !important;
  }

these styles will applied on all <div ></div> children and sub children.

CodePudding user response：

In CSS, if you do

.div {
    font-size: 20px !important;
    color: black !important;
}

You are saying "apply this code to all classes with the name div", you are not applying it to all real <div> elements.

You have to add the same class to all the element you want that class style, in your case:

<div >
  <p  style="font-size: 50px; color: blue">text tag p</p>
  <p>
    <span  style="font-size: 30px; color: green">text span</span>
  </p>
</div>

As you will see I added to all elements.

To add a stile to all div elements you do not use the dot in front of the class, as the dot represents "classes with this name only", so it would be:

div {
    color: red;
}

If you want EVERYTHING inside the class to match your stile you have to say .class-name * which means "Everything within/inside this class" and it would be:

.class-name *{
    color: red;
}

Idea:

You should give a name to a class that clearly states what it does, like darker-text and use on the element.

Idea 2:

These are the basics of CSS, I recommend you read some more on classes and ID, as it will really speed up your understanding, try here: https://www.w3schools.com/css/default.asp