Comment combiner classe et ID dans un sélecteur CSS ?

Question

Si j'ai la division suivante :

<div class="sectionA" id="content">
    Lorem Ipsum...
</div>

Existe-t-il un moyen de définir un style qui exprime l'idée "Une div avec id='content' ET class='myClass' " ?

Ou faut-il simplement aller dans un sens ou dans l'autre comme dans

<div class="content-sectionA">
    Lorem Ipsum...
</div>

Ou

<div id="content-sectionA">
    Lorem Ipsum...
</div>

Answer 1

Dans votre feuille de style :

div#content.myClass

Edit : Ceux-ci pourraient aider, aussi :

div#content.myClass.aSecondClass.aThirdClass /* Won't work in IE6, but valid */
div.firstClass.secondClass /* ditto */

et, selon votre exemple :

div#content.sectionA

Edit, 4 ans plus tard : Puisque c'est super vieux et que les gens continuent à le trouver : Ne le fais pas. utilisez les noms de balises dans vos sélecteurs. #content.myClass est plus rapide que div#content.myClass car le tagName ajoute une étape de filtrage dont vous n'avez pas besoin. N'utilisez les noms de balises dans les sélecteurs que lorsque cela est nécessaire !

Answer 2

Une combinaison d'ID et de classe est parfaitement adaptée et très pratique pour styliser les applications 2.0 et leurs styles basés sur le comportement. Les commentaires du type "vous ne devriez pas avoir besoin de le faire" ne sont pas pertinents.

Answer 3

En général, vous ne devriez pas avoir besoin de classer un élément spécifié par id, car id est toujours unique, mais si vous en avez vraiment besoin, ce qui suit devrait fonctionner :

div#content.sectionA {
    /* ... */
}

Answer 4

Il n'y a rien de mal à combiner un id et une classe sur un élément, mais vous ne devriez pas avoir besoin de l'identifier par les deux pour une seule règle. Si vous le voulez vraiment, vous pouvez le faire :

#content.sectionA{some rules}

Vous n'avez pas besoin de la div devant l'ID comme d'autres l'ont suggéré.

En général, les règles CSS spécifiques à cet élément doivent être définies avec l'ID, et elles auront plus de poids que celles de la classe. Les règles spécifiées par la classe sont des propriétés qui s'appliquent à plusieurs éléments et que vous ne souhaitez pas modifier à plusieurs endroits à chaque fois que vous avez besoin de les ajuster.

Cela se résume à ceci :

 .sectionA{some general rules here}
 #content{specific rules, and overrides for things in .sectionA}

C'est logique ?

Answer 5

Vous puede combiner l'ID et la classe en CSS, mais les ID sont censés être uniques, et l'ajout d'une classe à un sélecteur CSS le surqualifierait.