Forum : En cascade ?

Bonjour,
Il y a un truc que je ne comprends pas : J'ai 24 div toutes de même class "cellule" et avec une id chacune 01 à 24. Je veux que toutes les div aient un fond gris, sauf la 22 23 et 24. J'écris donc :

<div id="main" >
    <div class="cellule" id="01"><a href="#"><img src="images/cellules/01c.jpg"></a></div>
    <div class="cellule" id="02"><a href="#"><img src="images/cellules/02c.jpg"></a></div>
    <div class="cellule" id="03"><a href="#"><img src="images/cellules/03c.jpg"></a></div>
    <div class="cellule" id="04"><a href="#"><img src="images/cellules/04c.jpg"></a></div>
    <div class="cellule" id="05"><a href="#"><img src="images/cellules/05c.jpg"></a></div>
    <div class="cellule" id="06"><a href="#"><img src="images/cellules/06c.jpg"></a></div>
    <div class="cellule" id="07"><a href="#"><img src="images/cellules/07c.jpg"></a></div>
    <div class="cellule" id="08"><a href="#"><img src="images/cellules/08c.jpg"></a></div>
    <div class="cellule" id="09"><a href="#"><img src="images/cellules/09c.jpg"></a></div>
    <div class="cellule" id="10"><a href="#"><img src="images/cellules/10c.jpg"></a></div>
    <div class="cellule" id="11"><a href="#"><img src="images/cellules/11c.jpg"></a></div>
    <div class="cellule" id="12"><a href="#"><img src="images/cellules/12c.jpg"></a></div>
    <div class="cellule" id="13"><a href="#"><img src="images/cellules/13c.jpg"></a></div>
    <div class="cellule" id="14"><a href="#"><img src="images/cellules/14c.jpg"></a></div>
    <div class="cellule" id="15"><a href="#"><img src="images/cellules/15c.jpg"></a></div>
    <div class="cellule" id="16"><a href="#"><img src="images/cellules/16c.jpg"></a></div>
    <div class="cellule" id="17"><a href="#"><img src="images/cellules/17c.jpg"></a></div>
    <div class="cellule" id="18"><a href="#"><img src="images/cellules/18c.jpg"></a></div>
    <div class="cellule" id="19"><a href="#"><img src="images/cellules/19c.jpg"></a></div>
    <div class="cellule" id="20"><a href="#"><img src="images/cellules/20c.jpg"></a></div>
    <div class="cellule" id="21"><a href="#"><img src="images/cellules/21c.jpg"></a></div>
    <div class="cellule" id="22"><a href="#"></a></div>
    <div class="cellule" id="23"><a href="#"></a></div>
    <div class="cellule" id="24"><a href="#"></a></div>
</div>  <!-- fin #main -->

.cellule{
    position: relative;
    width: 92px;
    height: 92px;
    background-color: #999;
    display: block;
        float: left;
        margin: 0;
}
#22.cellule{
    background-color: #FFF;
}
#23.cellule{
    background-color: #666;
}
#24.cellule{
    background-color: #333;
}

En fait, rien ne change sur les 3 dernières div visées.
Comment se fait-il ?
Merci

En cascade ?

2 réponses