web-dev-qa-db-fra.com

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

Si j'ai le div suivant:

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

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

Ou avez-vous 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>
csscss-selectors
198
Larsenal

Dans votre feuille de style:

div#content.myClass

Edit: Cela pourrait aussi aider:

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 très vieux et que les gens continuent à le trouver: ne pas n'utilisez pas les tagNames dans votre sélecteurs. #content.myClass est plus rapide que div#content.myClass parce que le tagName ajoute une étape de filtrage dont vous n'avez pas besoin. Utilisez les noms de balises dans les sélecteurs uniquement où vous devez!

299
ajm

Il y a des différences entre #header .callout et #header.callout en css.

Voici le "plain anglais" de #header .callout:
Sélectionnez tous les éléments avec le nom de classe callout qui sont les descendants de l'élément avec un ID de header.

Et #header.callout signifie:
Sélectionnez l’élément dont l’ID est header et le nom de classe callout.

Vous pouvez en lire plus ici astuces css

65
Reza Abbasi

En règle générale, 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, les opérations suivantes devraient fonctionner:

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

Il n'y a rien de mal à combiner un identifiant 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 tu le veux vraiment tu peux faire:

#content.sectionA{some rules}

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

En règle générale, les règles CSS spécifiques à cet élément doivent être définies avec l'ID. Celles-ci auront un poids supérieur à celui de la classe. Les règles spécifiées par la classe seraient des propriétés qui s'appliquent à plusieurs éléments que vous ne souhaitez pas modifier à plusieurs endroits à tout moment et que vous devez ajuster.

Cela se résume à ceci:

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

Avoir un sens?

4
Gabriel Hurley

Vous pouvez combinez ID et Class dans CSS, mais les ID sont censés être uniques. Par conséquent, l'ajout d'une classe à un sélecteur CSS le surqualifierait.

2
Eric Wendelin

utiliser: tag.id ; tag#classdans les variables de balise dans votre css.

1
Lan...

Je pense que vous avez tous tort. Identité versus classe n'est pas une question de spécificité; ils ont des utilisations logiques complètement différentes.

Les identifiants doivent être utilisés pour identifier des parties spécifiques d'une page: en-tête, barre de navigation, article principal, attribution de l'auteur, pied de page.

Les classes doivent être utilisées pour appliquer des styles à la page. Disons que vous avez un site de magazine général. Chaque page du site comportera les mêmes éléments: en-tête, navigation, article principal, barre latérale, pied de page. Mais votre magazine comporte différentes sections: économie, sport, divertissement. Vous voulez que les trois sections aient une apparence différente - économie conservatrice et carré, sports d'action, divertissement vif et jeune.

Vous utilisez des classes pour cela. Vous ne voulez pas avoir à créer plusieurs identifiants - # economics-article et # sports-article et # entertainment-article. Cela n'a pas de sens. Au lieu de cela, vous définiriez trois classes: .économie, sport et .entertainment, puis définiriez les identifiants #nav, #article et #footer pour chacune.

0
Greg

Les identifiants sont supposés avoir une largeur de document unique, vous ne devriez donc pas avoir à choisir en fonction des deux. Vous pouvez cependant affecter un élément à plusieurs classes avec class="class1 class2"

0
Ben Hughes