CODEWITHSUNDEEP
cssclasscss-selectors
Tanner Ottinger
Tanner Ottinger

Reputation: 3060

Target elements with multiple classes, within one rule

I have some HTML that would have elements with multiple classes, and I need to assign them within one rule, so that the same classes could be different within different containers. Say I have this in my CSS:

.border-blue {
    border: 1px solid blue;
}
.background {
    background: url(bg.gif);
}

Then I have this in my HTML:

<div class='border-blue background'>Lorum Crap No-one Cares About Ipsum</div>

Can I target these within a single rule? Like this, for example, which I know doesn't work:

.border-blue, .background {
    border: 1px solid blue;
    background: url(bg.gif);
}

Upvotes: 155

Views: 169090

Answers (2)

Vian Esterhuizen
Vian Esterhuizen

Reputation: 3904

.border-blue.background { ... } is for when both classes are used together.

Targets only the first

<div class="border-blue background"></div>
<div class="border-blue"></div>
<div class="background"></div>

.border-blue, .background { ... } is for either class.

Targets both

<div class="border-blue"></div>
<div class="background"></div>

.border-blue .background { ... } is for where '.background' is the child of '.border-blue'.

Targets only the second '.background' element

<div class="border-red">
    <div class="background"></div>
</div>
<div class="border-blue">
    <div class="background"></div>
</div>

See Chris' answer for a more thorough explanation. Also see W3 Docs on CSS Combinators

Upvotes: 261

Chris Graham
Chris Graham

Reputation: 2091

Just in case someone stumbles upon this like I did and doesn't realise, the two variations above are for different use cases.

The following:

.blue-border, .background {
    border: 1px solid #00f;
    background: #fff;
}

is for when you want to add styles to elements that have either the blue-border or background class, for example:

<div class="blue-border">Hello</div>
<div class="background">World</div>
<div class="blue-border background">!</div>

would all get a blue border and white background applied to them.

However, the accepted answer is different.

.blue-border.background {
    border: 1px solid #00f;
    background: #fff;
}

This applies the styles to elements that have both classes so in this example only the <div> with both classes should get the styles applied (in browsers that interpret the CSS properly):

<div class="blue-border">Hello</div>
<div class="background">World</div>
<div class="blue-border background">!</div>

So basically think of it like this, comma separating applies to elements with one class OR another class and dot separating applies to elements with one class AND another class.

Upvotes: 199

Related Questions