title: combined multiple classes into one css rule
body: <p>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. </p>
  
  <p>HTML</p>
  
  <pre><code>&lt;div id = "outerBuckets"&gt;
          &lt;div class = "bucket1"&gt;
              &lt;div class ="bucketIcon"&gt;
                  &lt;p&gt;&lt;/p&gt;
              &lt;/div&gt;
          &lt;/div&gt;
          &lt;div class = "bucket2"&gt;
              &lt;div class ="bucketIcon"&gt;
                  &lt;p&gt;&lt;/p&gt;
              &lt;/div&gt;
          &lt;/div&gt;
          &lt;div class = "bucket3"&gt;
              &lt;div class ="bucketIcon"&gt;
                  &lt;p&gt;&lt;/p&gt;
              &lt;/div&gt;
          &lt;/div&gt;
          &lt;div class = "bucket4"&gt;
              &lt;div class ="bucketIcon"&gt;
                  &lt;p&gt;&lt;/p&gt;
              &lt;/div&gt;
          &lt;/div&gt;
          &lt;div class = "bucket5"&gt;
              &lt;div class ="bucketIcon"&gt;
                  &lt;p&gt;&lt;/p&gt;
              &lt;/div&gt;
          &lt;/div&gt;
          &lt;div class = "bucket6"&gt;
              &lt;div class ="bucketIcon"&gt;
                  &lt;p&gt;&lt;/p&gt;
              &lt;/div&gt;
          &lt;/div&gt; 
      &lt;/div&gt;
  </code></pre>
  
  <p>So I wanted to do my css rules like this: </p>
  
  <pre><code>.bucket 1 .bucket 2 . bucket 3 {
  }
  
  .bucket 4 .bucket 5 .bucket 6 {
  }
  </code></pre>
  
  <p>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. </p>
  
  <p>Any suggestions? </p>