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

221

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'ET class='myClass'"?

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

css css-selectors

— Larsenal
source

2

si vous allez sélectionner par id, il n'est pas nécessaire de sélectionner également par classe, car id est unique, donc un seul élément correspondra. Donc, en ajoutant la classe au même sélecteur, il suffit de taper

— davantage

21

@TStamper: Pas nécessairement. Vous ne pensez qu'en termes de documents statiques. Par exemple, vous pouvez avoir une img#Inboxicône sur votre page qui est normalement définie sur une opacité de 50%. Cependant, lorsque l'utilisateur a un message, vous souhaitez qu'il soit défini à 100% d'opacité, et le backend l'indique en ajoutant une activeclasse à l'élément. Dans un tel scénario, il est logique d'avoir un sélecteur qui combine à la fois l'ID et le nom de classe.

— Lèse majesté

@TStamper: En outre, le fait d'avoir le sélecteur de combo id + class plus spécifique ne lui donne-t-il pas plus de poids / priorité que la version id seule? AFAIK, ça devrait. (IOW, les règles du sélecteur de combo id + class remplaceront les règles du sélecteur de combo id. (C'était ma raison / besoin de trouver ce fil tout à l'heure.)

— govinda

Donc, j'ai une situation similaire. J'ai par exemple de nombreux produits qui ont des descriptions, mais je voudrais également un contrôle spécifique sur des produits individuels. Je peux donc faire: code<p id = Product_1 class = Product> Product 1 </p> <p id = Product_2 class = Product> Product 2 </p> code Ceci pour permettre un style général de tous les produits mais aussi un style individuel pour des produits spécifiques?

— Tamer Ziady

328

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 super vieux et que les gens continuent de le trouver: n'utilisez pas les tagNames dans vos sélecteurs. #content.myClassest plus rapide que div#content.myClassparce que le tagName ajoute une étape de filtrage dont vous n'avez pas besoin. Utilisez tagNames dans les sélecteurs uniquement là où vous devez!

— ajm
source

31

Spécifier que l'ID appartient à un div ne peut que nuire aux performances de rendu (bien que quasiment négligeable) sans aucun avantage car un ID est déjà unique. J'irais plutôt avec # content.myClass pour le rendre propre.

— mystrdat

3

div.class#iddevrait être équivalent mais moins recommandé; utilisez d'abord des parties plus uniques du sélecteur.

— SF.

1

Merci pour vos efforts, même après des années :). J'aide toujours des gars comme moi. Je l'ai utilisé pour mon projet. Voté à coup sûr.

— C4d

76

Il existe des différences entre #header .calloutet #header.callouten CSS.

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

Et #header.calloutsignifie:
Sélectionnez l'élément qui a un ID headeret également un nom de classe de callout.

Vous pouvez en savoir plus ici astuces css

— Reza Abbasi
source

J'ai fait cette erreur avec les espaces: #id .class vs # id.class

— ERJAN

5

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 vous voulez vraiment vous pouvez faire:

#content.sectionA{some rules}

Vous n'avez pas besoin du divdevant de 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 celles-ci auront un poids supérieur à celles de la classe uniquement. Les règles spécifiées par la classe sont des propriétés qui s'appliquent à plusieurs éléments que vous ne souhaitez pas modifier à plusieurs endroits chaque fois que vous devez les ajuster.

Cela se résume à ceci:

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

Ça a du sens?

— Gabriel Hurley
source

4

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 éléments suivants devraient fonctionner:

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

— Blixt
source

1

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

— Eric Wendelin
source

C'est un bon point. Je pense que si vous avez peut-être un ensemble de classes très générales (définissant des choses comme float, height / width, peut-être des choses comme font) et que vous souhaitez remplacer quelque chose en elles dans cette exception unique?

— ajm

5

Sauf si vous utilisez la même feuille de style avec différentes pages. :-)

— Patrick McElhaney

5

Un autre exemple: lorsque des classes sont ajoutées dynamiquement avec Javascript (# optionalFields.enabled)

— Patrick McElhaney

Même si vous utilisez la même feuille de style avec des pages différentes, il serait vraiment préférable de mettre une classe sur le corps ou d'avoir un style pour l'ID, puis de séparer les définitions de classe pour les classes avec les styles de substitution appropriés.

— Eric Wendelin

Oui, je pense que c'est assez courant de faire ça. par exemple li # SomeTab.state-selected

— Yablargo

1

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

— Lan ...
source

1

Je pense que vous l'avez mélangé un peu - tag.class et tag # id, non?

— Harijs Krūtainis

0

Les identifiants sont censés être uniques à l'échelle du document, vous ne devriez donc pas avoir à sélectionner en fonction des deux. Vous pouvez affecter un élément à plusieurs classes avecclass="class1 class2"

— Ben Hughes
source

1

La classe peut changer. Par exemple, vous pouvez avoir div # id.active et div # id.inactive.

— Daniel Moura

assez juste, à bien y penser, j'ai utilisé cette fonctionnalité, mais j'ai mal compris quel était le comportement souhaité.

— Ben Hughes

0

Je pense que vous vous trompez tous. Les ID par rapport à la classe ne sont 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: l'en-tête, la barre de navigation, l'article principal, l'attribution de l'auteur, le 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 va avoir 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, sports, divertissement. Vous voulez que les trois sections aient un aspect différent - économie conservatrice et carrée, sport action-y, divertissement brillant et jeune.

Vous utilisez des classes pour cela. Vous ne voulez pas avoir à faire plusieurs identifiants - # article-économie et # article-sport et # article-divertissement. Cela n'a aucun sens. Vous devez plutôt définir trois classes, .economics, sports et .entertainment, puis définir les identifiants #nav, #article et #footer pour chacun.

— Greg
source

Vous pouvez réellement utiliser des balises HTML sémantiques au lieu des ID pour la plupart des éléments que vous mentionnez. Les balises d'en-tête, de pied de page, de navigation, de section, etc. existent pour une raison.

— Walter Schwarz

Mais en effet, vous ne devez utiliser des ID que pour les éléments qui doivent être uniques, les singletons. Mais même alors, cela n'est vraiment utile que si vous devez accéder à cet élément via JavaScript, car l'utilisation d'ID rend votre CSS trop spécifique et difficile à fusionner ultérieurement avec d'autres CSS et / ou HTML. Il y a aussi l'argument selon lequel les ID sont plus rapides que les classes, mais la différence est vraiment négligeable.

— Walter Schwarz

-1

.sectionA[id='content'] { color : red; }

Ne fonctionnera pas quand le doctype est html 4.01 cependant ...

— BoltClock
source