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

StackOverflow https://stackoverflow.com/questions/1028248

  •  06-07-2019
  •  | 
  •  

Question

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 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>
Était-ce utile?

La solution

Dans votre feuille de style: 

div#content.myClass

Modifier: ils pourraient également vous aider: 

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

et, selon votre exemple: 

div#content.sectionA

Modifiez, 4 ans plus tard: car il s'agit d'un très vieux âge et que les gens continuent à le trouver: n'utilisez pas 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. Utilisez les noms de balises uniquement dans les sélecteurs où vous devez!

Autres conseils

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

Voici le "Plain English" " de #header .callout :
Sélectionnez tous les éléments avec le nom de classe légende qui sont des descendants de l'élément avec l'ID en-tête .

Et # header.callout signifie:
Sélectionnez l’élément qui porte l’ID en-tête , ainsi que le nom de classe en attente .

Vous pouvez en savoir plus ici astuces css

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 {
    /* ... */
}

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

#content.sectionA{some rules}

Vous n'avez pas besoin du 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. Celles-ci auront un poids supérieur à celui de la classe. 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 à 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}

Avez-vous du sens?

Vous pouvez combiner un ID et une classe en CSS, mais les ID sont censés être uniques. Par conséquent, l'ajout d'une classe à un sélecteur CSS la sur-qualifierait.

utilise: tag.id; tag # class dans les variables de tag dans votre css.

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

.

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 un look différent: é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. Vous définissez plutôt trois classes: .économie, sport et .entertainment, puis définissez les identifiants #nav, #article et #footer pour chaque. 

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

Ne fonctionnera pas si le doctype est HTML 4.01 mais ...

Licencié sous: CC-BY-SA avec attribution
Non affilié à StackOverflow
scroll top