combined multiple classes into one css rule

Question

I'm trying to do some buckets here and generally I would do 1 class element at a time. That 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 do my css rules like this:

.bucket 1 .bucket 2 . bucket 3 {
}

.bucket 4 .bucket 5 .bucket 6 {
}

Basically I wanted 123 to be formatted the same way...and 456 to be formatted another way. But when I went to do some checking in firebug. It wasn't working. So I guess this isn't correct way to express this. I'm trying to clean up my css a little and combined down some of these things so they are cleaner.

Any suggestions?

Answer 1

Use commas to separate the selectors in a list

.bucket1, .bucket2, .bucket3 {
}

.bucket4, .bucket5, .bucket6 {
}