将CSS应用于特定div的所有元素

Question

I have this code:

 <div class="main"> <div class="div1"> <div> <p> <a href="#"></a> </p> <span></span> </div> <p>Loremp Loremp</p> <p>Loremp Loremp</p> <a href="#">Loremp Loremp</a> <span>Hello World</span> </div> <div class="div2"> <p>Loremp Loremp</p> <p>Loremp Loremp</p> <a href="#">Loremp Loremp</a> <span>Hello World</span> </div> </div> 

Is there any way for me to target all the elements of div1 without that being applied on div2 ?

What I want to do is to make the CSS code very simple without having to target each element of div1 one by one.

 /*I want to make something like that but without affecting the div2*/ *{ color: blue; } 

Answer 1

Just put

.div1 * {
 color: blue;
}

Or even better, just

.div1 {
 color: blue;
}

In my first block of code, all subelements of elements with class div1 will have color: blue applied.

In the second block of code, only the elements with class div1 will have color: blue applied, but all subelements will also inherit it (unless they override it). Therefore the effect should be the same.

Answer 2

first, NO : Using .div1 * will eventually bite you in the ass.

Best would be to apply the style to .div1 {...} and rely on the inheritance.

If you have like text in div1, that you don't want to style you may want to apply the style to the (direct) child-nodes of div1: .div1 > * {...} . And rely from this point on, on the inheritance.

Anything more specific like the example proposed on top will have unexpected side-effects and will drive you onto a way where you will have to increase the Specificity of your selectors more and more.
Leading to things like .div1 p ul li .foo div span.bar {...} and overriding it with .div1 p ul li .foo div span.bar * {...} and so on. (dramatized)

If your problem are the links in your markup, you shoold consider a generic "reset"/modification of the link-tags so that they fit better into the surrounding text: sth. like.

a,
a:active {
    color: inherit;
}

and maybe you want to restrict even this to a specific context, like .main

Edit:

OK, P.Lionel, that is a different thing; I agree.
Using .someSliderPluginClassName * { box-sizing: border-box } is an appropriate way to implement this fast and easy, and it has a manageable amount of risk.

You are using .container (as in your comment) as kind of context for the elements of this slider-plugin and give all control over to this plugin. (Almost) nothing you have to handle/style in this context.

On the other hand, you may consider the migration of your styles to box-sizing: border-box . Imo. it's the better and more consistent boxing-model, and more and more plugins (and css-frameworks) rely on that.

I know, it's kind of an effort now, but it might pay off in the future. Just my 5 cents.

Answer 3

You can use a CSS selector with the name of the class you specified for the div attribute in your HTML.

.div1 {
   color: blue;
}

Tip: avoid using universal selectors in CSS (such as .div1 * { . Even as it has negligent performance overload , it can have impacts you are not accounting for , besides being the least efficient selector available.

Answer 4

You can match all children with this selector:

.div * {

}

or if you want to match a particular element type:

.div * p {

}

See: https://www.w3.org/TR/CSS21/selector.html#descendant-selectors

Answer 5

Property color was inherited by default. This means you just need to set this property on the parent element, then all child elements will automatically inherit it.

.div1{
 color: blue;
}