Target elements with multiple classes within one rule

Question

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    lt div class  border-blue background  gt Lorum Crap No-one Cares About Ipsum lt  div gt    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

User · Accepted 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 one item where   background  is the child of   border-blue    See Chris  answer for a more thorough explanation

User · Answer

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    lt div class  blue-border  gt Hello lt  div gt   lt div class  background  gt World lt  div gt   lt div class  blue-border background  gt   lt  div gt    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  lt div gt  with both classes should get the styles applied  in browsers that interpret the CSS properly     lt div class  blue-border  gt Hello lt  div gt   lt div class  background  gt World lt  div gt   lt div class  blue-border background  gt   lt  div gt    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

[css] Target elements with multiple classes, within one rule

Examples related to css

Examples related to class

Examples related to target