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>

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;
}

• javascript
• html
• css

Share Improve this question Follow edited Apr 4, 2016 at 19:17 benomatis 5,64377 gold badges3939 silver badges6060 bronze badges asked Apr 4, 2016 at 19:11 Lei LionelLei Lionel 1,2731313 silver badges2020 bronze badges 3

• 2 #div1 * { color: blue; } – Pointy Commented Apr 4, 2016 at 19:13
• 2 The # denotes the id property, but the div uses the class property. You should use .div1 instead of #div1. – alesc Commented Apr 4, 2016 at 19:18
• 1 @alesc right you are, didn't look closely enough :) – Pointy Commented Apr 4, 2016 at 19:31

Add a ment  | 

5 Answers 5

Sorted by: Reset to default 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.

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 ment) 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.

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.

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/TR/CSS21/selector.html#descendant-selectors

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;
}