2

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;
}
benomatis
  • 5,536
  • 7
  • 36
  • 59
Lei Lionel
  • 1,263
  • 13
  • 20

5 Answers5

8

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.

alesc
  • 2,776
  • 3
  • 27
  • 45
  • 1
    Also consider the answer by [Bruno Toffolo](http://stackoverflow.com/a/36411030/4623467) in which he noted that using `*` is very inefficient and therefore discouraged. – alesc Apr 04 '16 at 19:29
  • The question, I ask, is related to this post of mine: [go to post](http://stackoverflow.com/questions/36403993/modify-the-gap-between-two-divs) And just doing ```.container *, .container *:after, .container *:before { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; padding: 0; margin: 0; }``` When I try with just `.container {...`, it does not work. – Lei Lionel Apr 04 '16 at 19:38
  • Not all CSS properties are inherited. For example, the `color`property will be inherited by subelements, but `box-sizing`, `padding`, and `margin` won't. That's why just using `.container` doesn't work in your example and you need to use `.container *`. – alesc Apr 04 '16 at 19:43
  • Do you have a better code to advice based on what I am facing on the post I shared? – Lei Lionel Apr 04 '16 at 20:02
  • Well, the same principle applies - you should get rid of the `*` selector either by rewriting the `demo.css` or by using a different library. – alesc Apr 04 '16 at 20:10
  • What I am going to ask would seem to be crazy to you, but can you help me rewrite the ``demo.css`` ? I have been trying to solve that problem, but no way. And now the method I have found is not appropriate. – Lei Lionel Apr 04 '16 at 20:16
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.

Thomas
  • 3,513
  • 1
  • 13
  • 10
  • Good explanation. I think it meant to be `.div1 a {color:inherit;}`. – Stickers Apr 04 '16 at 19:56
  • The question, I ask, is related to this post of mine: [go to post](http://stackoverflow.com/questions/36403993/modify-the-gap-between-two-divs) . Everything works when I use ```.container *, .container *:after, .container *:before { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; padding: 0; margin: 0; } ``` When I try with just ``.container {...`` , it does not work. Do you have a better code to advice based on the post I just shared? – Lei Lionel Apr 04 '16 at 20:06
  • For this special usage, I would agree. I've edited my Answer to account on that. – Thomas Apr 04 '16 at 20:35
  • Thanks Thomas. Really helpfull – Lei Lionel Apr 04 '16 at 22:40
1

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.

Community
  • 1
  • 1
Bruno Toffolo
  • 1,504
  • 19
  • 24
1

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

Kevin Goedecke
  • 1,553
  • 2
  • 14
  • 26
0

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;
}
Lewis
  • 14,132
  • 12
  • 66
  • 87