CODEWITHSUNDEEP
javascripthtmlcss
Lei Lionel
Lei Lionel

Reputation: 1273

Apply a CSS to all the elements of a particular 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;
}

Upvotes: 2

Views: 4767

Answers (5)

Thomas
Thomas

Reputation: 3593

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.

Upvotes: 2

Lewis
Lewis

Reputation: 14866

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

Upvotes: 0

alesc
alesc

Reputation: 2782

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.

Upvotes: 8

Kevin Goedecke
Kevin Goedecke

Reputation: 1983

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

Upvotes: 1

Bruno Toffolo
Bruno Toffolo

Reputation: 1554

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.

Upvotes: 1

Related Questions