Quand changer le CSS d’un thème existant (Woocommerce) est-il préférable d’utiliser l’ID et la Classe… ? – HTML & CSS – Forums SitePoint

Je change donc une partie du style sur un thème woocommerce existant. En utilisant un logiciel appelé CSSHero et ma console, je peux obtenir l’ID et les classes de certains éléments. La plupart des changements sont soit au niveau global, soit spécifiques à une page. Dois-je faire référence à l’ID et à la classe ou simplement à l’ID ou uniquement à la classe… Je trouve que #IDENTIFIANT .La classe fonctionne bien ou #IDENTIFIANT ou même .Class.Class.Class car c’est ce qui apparaît dans la hiérarchie (par exemple, certaines des classes d’un élément diront : Class=”footer-text year-copyright color-main” quelque chose comme ça. Ensuite, la console montrera #IDENTIFIANT.footer-text.year-copyright.color-main. Si j’utilise parfois la dernière partie de la classe, cela ne fonctionne pas, je dois utiliser le nom complet de la classe. J’espère que cela a du sens. J’essaie de me rapprocher le plus possible de l’élément racine, mais certains des validateurs CSS disent “N’utilisez pas de classes adjacentes” alors que je n’ai pas d’autre moyen d’approfondir. Des réflexions à ce sujet ? J’apprécierais de l’aide. Merci

Je pense que cela pourrait vous aider de jouer avec les sélecteurs et la spécificité.

• si vous souhaitez sélectionner UN élément sur une page, utilisez l’identifiant (#) sélecteur
• si vous souhaitez sélectionner toutes les instances d’un élément sur une page, utilisez la classe (.) sélecteur
• .class1 .class2 sélectionnerait toutes les instances de class2 qui sont contenues à l’INTÉRIEUR de toutes les instances de class1
• .class1.class2 sélectionnerait toutes les instances sur lesquelles class1 ET class2 sont définis
• .class1 > .class2 sélectionne toutes les instances de class2 UNIQUEMENT si elles sont directement à l’intérieur de class1

Voici un exemple de codepen VRAIMENT rapide et sale

Mais j’ai aussi ce lien que j’ai trouvé qui fait un excellent travail de construction de spécificité et d’explication de chaque niveau

Démo de spécificité CSS

Démo de spécificité CSS

Une démo interactive qui illustre le fonctionnement de la spécificité en CSS

1 J’aime

Merci! Cela a vraiment aidé. Une méthode est-elle préférée à une autre ? Pourquoi quand j’ai class1.class2 je ne peux pas utiliser juste .class2 ? Ou pourquoi dans certains cas dois-je utiliser le #IDENTIFIANT sélecteur pour que ça marche? Donc, dans une perspective globale – sur l’ensemble du site, je devrais nous #IDENTIFIANT sélecteur et pour une page spécifique, le sélecteur .Class ? Merci!

Le validateur CSS donne des avertissements pour deux classes utilisées ensemble ou ID et classe ensemble. Je suppose que ce que je demande à ce sujet est-il parfois inévitable de le structurer de cette façon ou devrais-je trouver un meilleur moyen d’accéder à l’élément – si c’est possible puisque le thème a été créé par quelqu’un d’autre?

• .class1 .class2 sélectionnerait toutes les instances de class2 qui sont contenues à l’INTÉRIEUR de toutes les instances de class1
• .class1.class2 sélectionnerait toutes les instances sur lesquelles class1 ET class2 sont définis

J’ai remarqué qu’un espace entre les deux classes peut ou non fonctionner, et qu’elles doivent être juste l’une après l’autre. Est-ce que ça sonne bien? Si oui, pouvez-vous expliquer pourquoi .class1 .class2 peut ne pas fonctionner mais .class1.class2 fonctionne et vice versa ? Merci.

PaulOB

2 septembre 2022, 7h28


#5

J’ai remarqué qu’un espace entre les deux classes peut ou non fonctionner

Dave vous a donné la réponse à cela

.class1 .class2 sélectionnerait toutes les instances de class2 qui sont contenues à l’INTÉRIEUR de toutes les instances de class1

.class2 serait contenu à l’intérieur un élément à l’intérieur de class1.

par exemple

.class1 .class2{color:red;}

<div class="class1">
  I am not red
  <div class="class2">
     I am red
  </div>
</div>

Contrairement à :

.class1.class2{color:red;}

<div class="class1 class2">
  I am red
</div>

Un espace (dans le sélecteur css) est le sélecteur descendant et devrait être l’une des premières choses que vous apprenez en css sinon vous ne pouvez pas sélectionner des éléments descendants basés sur un parent.

Dans le HTML classes sur le même élément sont séparés par des espaces où vous pourriez être confus.

<div class="class1 class2 class3">

Merci pour la clarification!!

— to www.sitepoint.com