Merge multiple classes into one css rule

Question

I am trying to make some buckets here, and usually I would do 1 class element at a time. This seems silly since classes can share attributes.

HTML

<div id = "outerBuckets"> <div class = "bucket1"> <div class ="bucketIcon"> <p></p> </div> </div> <div class = "bucket2"> <div class ="bucketIcon"> <p></p> </div> </div> <div class = "bucket3"> <div class ="bucketIcon"> <p></p> </div> </div> <div class = "bucket4"> <div class ="bucketIcon"> <p></p> </div> </div> <div class = "bucket5"> <div class ="bucketIcon"> <p></p> </div> </div> <div class = "bucket6"> <div class ="bucketIcon"> <p></p> </div> </div> </div> 

So, I wanted to fulfill my css rules as follows:

 .bucket 1 .bucket 2 . bucket 3 { } .bucket 4 .bucket 5 .bucket 6 { } 

Basically, I wanted 123 to be formatted in the same way ... and 456 to format in a different way. But when I went to do some checks in firebug. He did not work. So I think this is the wrong way to express it. I am trying to clear my css a bit and combine some of these things to make them cleaner.

Any suggestions?

Answer 1

Use commas to separate selectors in a list.

 .bucket1, .bucket2, .bucket3 { } .bucket4, .bucket5, .bucket6 { } 

Answer 2

It might even make sense to do something like

 <div id = "outerBuckets"> <div class = "bucketStyleFirst"> <div class ="bucketIcon"> <p></p> </div> </div> <div class = "bucketStyleFirst"> <div class ="bucketIcon"> <p></p> </div> </div> <div class = "bucketStyleFirst"> <div class ="bucketIcon"> <p></p> </div> </div> <div class = "bucketStyleSecond"> <div class ="bucketIcon"> <p></p> </div> </div> <div class = "bucketStyleSecond"> <div class ="bucketIcon"> <p></p> </div> </div> <div class = "bucketStyleSecond"> <div class ="bucketIcon"> <p></p> </div> </div> </div> 

So you only need to say

 .bucketStyleFirst { } .bucketStyleSecond { } 

This, of course, if you have only two different options.

Answer 3

I will try again ... (forget about how to send the code ...):

"For example: <div class = "someclass"> ... (note the spaces before and after =)

... should be: <div class="someclass"> to avoid confusion with browsers.