combiné de plusieurs classes dans une règle css

Je suis en train de faire quelques seaux ici et en général, je voudrais faire 1 classe de l'élément à la fois. Cela semble idiot étant donné que les classes peuvent partager des attributs.

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>

Donc, je voulais faire mes propres règles css comme ceci: 

.bucket 1 .bucket 2 . bucket 3 {
}

.bucket 4 .bucket 5 .bucket 6 {
}

Fondamentalement, je voulais 123 pour être formatés de la même manière...et 456 être formaté d'une autre manière. Mais quand je suis allé faire quelques vérifications dans firebug. Il ne fonctionnait pas. Donc je suppose que ce n'est pas la bonne façon de l'exprimer. Je suis en train de nettoyer mon css un peu et combinés certaines de ces choses si elles sont plus propres.

Des suggestions?

OriginalL'auteur user2089405 | 2013-08-13

  1. 31

    Utiliser des virgules pour séparer les sélecteurs dans une liste

    .bucket1, .bucket2, .bucket3 {
}

.bucket4, .bucket5, .bucket6 {
}
    doh! c'était durp erreur. Merci =/ je suis un peu gênée maintenant.

    OriginalL'auteur

  2. 0

    Il peut même faire sens pour faire quelque chose comme 

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

    De cette façon, vous aurez seulement besoin de dire

    .bucketStyleFirst {

}

.bucketStyleSecond {

}

    C'est bien sûr, si vous aurez seulement être avoir les deux options différentes.

    OriginalL'auteur Chris

  3. 0

    Je vais essayer à nouveau... (oubliez la partie sur l'affichage de code...):

    "E. g.: <div class = "someclass">... (notez l'espace avant et après =)

    ...devrait être: <div class="someclass"> d'éviter la confusion entre les navigateurs.

    OriginalL'auteur Dennis Munding