Bonjour,

J'ai une préoccupation en ce qui concerne la sélection d'éléments en CSS. Par exemple,  soit le bout de code HTML suivant, extrait de la page cssgarden.com/214/

<div class="participation" id="zen-participation" role="article">
<h3>Participation</h3>
<p>Strong... 

Dans le fichier CSS associé, pour atteindre ce titre en <h3> ils font

div.participation h3{
margin-top:0;
}

Voilà ma question: pourquoi n'avoir pas ecrit tout simplement 

.participation h3 {
margin-top:0;
}

Encore mieux: pourquoi n'avoir pas donné une classe à toutes les balises <h3> par exemple "h3_title" afin de les sélectionner dans le fichier CSS en faisant 

.h3_title{
margin-top:0;
}

En gros, ma préoccupation vient du fait que je retrouve souvent une pareille manière de coder quand j'étudie les CS html et CSS de sites professionnels: ils spécifient les noms de quelques parents avant d'arriver à l'élément ciblé, un truc du style

parent1 parent2 élément_ciblé{
/*style */
}

Et je n'en comprends pas l'utilité 

Une dernière question :Ça veut dire quoi quand on écrit 

div.participation 

Je m'explique : Je sais que l'espace traduit la parenté (de la gauche vers la droite, on a: balise_parent balise_enfant), mais dans le cas précédent,  les deux sont collés...

Merci d'avance à tous ceux qui voudront bien m'aider à progresser 

-
Edité par Dr_strange 21 juillet 2018 à 16:50:37

Salut, 

alors :

div.participation  {

sélectionne tous les éléments div qui ont comme attribut class "participation". Certains utilisent cette notation pour bien reconnaitre dans le code CSS que .participation est bien un div.

Encore mieux: pourquoi n'avoir pas donné une classe à toutes les balises <h3> par exemple "h3_title" afin de les sélectionner dans le fichier CSS en faisant "

simplement parce que les développeurs sont fainéants.

Edit : et aussi que pas mal d'entre eux utilisent maintenant des framework comme Bootstrap mais là je ne peux pas t'en dire plus je n'ai jamais utilisé ce genre d'outils.

-
Edité par KorangaR 21 juillet 2018 à 17:54:10

Salut, 

Pourquoi ne pas avoir donné une classe commune à tous les h3 ?

Parce que cela n'est pas obligatoire ici mais aussi, et surtout, parce que ton exemple vient de CSS Garden, exercice où il est justement interdit de modifier le HTML. Donc dans le cas de ton exemple, ajouter une classe n'est pas faut car c'est contraire aux consignes.

Pourquoi beaucoup de professionnels du front spécifient souvent plusieurs parents dans un sélecteur ? 

Une possibilité est que l'élément criblé par une classe peut légèrement varier selon la zone d'affichage, la page où le contexte. 

Autre possibilité : les styles sont réalisés en SASS ou en LESS et l'imbrication est créée par la compilation de ces fichiers particuliers en CSS.