комбинированные несколько классов в одно правило css

Question

Я пытаюсь сделать некоторые ковши здесь, и обычно я делал бы 1 элемент класса за раз. Это кажется глупым, поскольку классы могут делиться атрибутами.

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> 

Так что я хотел бы сделать мои правила CSS, как это:

.bucket 1 .bucket 2 . bucket 3 { 
} 

.bucket 4 .bucket 5 .bucket 6 { 
} 

В основном я хотел 123, чтобы быть отформатированный таким же образом ... и 456 должен быть отформатирован другой способ , Но когда я пошел делать кое-какие проверки в firebug. Он не работал. Поэтому я думаю, что это неправильный способ выразить это. Я пытаюсь немного очистить свой css и объединить некоторые из этих вещей, чтобы они были чище.

Любые предложения?

Answer 1

Используйте запятые для разделения селекторов в списке

.bucket1, .bucket2, .bucket3 { 
} 

.bucket4, .bucket5, .bucket6 { 
} 

Answer 2

Он даже может иметь смысл сделать что-то вроде

<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> 

Таким образом, вы должны будете сказать

.bucketStyleFirst { 

} 

.bucketStyleSecond { 

} 

только

Это, конечно, если у вас будут только два разных варианта.

Answer 3

Я попробую еще раз ... (забудьте часть о публикации кода ...):

«, например: <div class = "someclass"> ... (обратите внимание на пробелы до и после =)

... должен быть: <div class="someclass">, чтобы избежать путаницы в браузерах.