Tanner Ottinger Tanner Ottinger - 1 month ago 8
CSS Question

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

Answer

.border-blue.background { ... } is for one item with multiple classes.
.border-blue, .background { ... } is for multiple items each with their own class.
.border-blue .background { ... } is for multiple items where '.background' is the child of '.border-blue'.

See Chris' answer for a more thorough explanation.

Comments