Bonnes syntaxes css

1 : Pas exactement, selon les paramètre que tu donnes il y en a qui s’applique seulement à lui (comme height par exemple) et d'autre qui s'appliqueront a tout les descendant (comme color) sauf si le même paramètre est défini pour ces enfants.

2 : Même chose qu'au dessus

3 : il sélectionne tout les élément div qui sont dans des éléments nav

4 : il sélectionne tout les élément div qui sont dans des éléments portant la classe .maclasse

5 : il sélectionne tout les élément div qui ONT la classe .maclasse (il n'y a pas d'espace)

6 : le > permet de selectionner les enfant de premier niveau. Les enfants directs.
nav div prendre tout les élément div
nav > div prendra les éléments div qui sont directement fils de nav en non les sous élément


Et la bonne pratique serait ne mettre une classe sur ta div et de l’appeler tout simplement par sa classe dans le CSS
Modifié par _laurent (09 Oct 2017 - 15:46)

Bonjour.

_laurent a écrit :
1 : Pas exactement, selon les paramètre que tu donnes il y en a qui s’applique seulement à lui (comme height par exemple) et d'autre qui s'appliqueront a tout les descendant (comme color) sauf si le même paramètre est défini pour ces enfants.

Certaines propriétés s'héritent et vont s'appliquer, aussi, aux descendants, d'autres non.
Cela n'a rien à voir avec la syntaxe CSS concernant les sélecteurs…

Certains n'aiment pas ces histoires d'héritage et trouvent ça trop compliqué.

Néanmoins, cela permet d'alléger les feuilles de style… et puis que devient le CSS s'il ne cascade plus ?

5 apres relecture j'ai compris

sinon
j'ai tous mes liens quelque soit la class qui en hover sont de la meme couleur
si je faisais a:hover{color:#ccc} ils devraient tous prendre cette couleur? non?
et ce n'est pas le cas
je suis oblige de faire
a:hover.1erclass, a:hover.2emeclass etc et j'en ai un paquet, y a t il moyen de simplifier?
merci

nantais a écrit :
j'ai tous mes liens quelque soit la class qui en hover sont de la meme couleur
si je faisais a:hover{color:#ccc} ils devraient tous prendre cette couleur? non?

Oui tout à fait.

nantais a écrit :
et ce n'est pas le cas
je suis oblige de faire a:hover.1erclass, a:hover.2emeclass etc

La tu touche du doigt un second aspect du sélecteur : le poids.
Pour calculer le poids d'un sélecteur on procède ainsi :
X-Y-Z
Ou X est le nombre d'id, Y le nombre de classe et Z le nombre d'éléments.
Exemples :
div {} a un poids de 0 0 1
#id {] a un poids de 1 0 0
div.maclasse a.class#id a un poids de 1 2 2

Bon on ne fait pas cela à chaque fois c'est pour illustrer le fait qu'il y a des sélecteur qui ont plus de poids que d'autres.
A poids égale, c'est le dernier qui l'emporte :
div { color:blue; }
div {color: red; }
-> le texte sera rouge

body div { color:blue }
div {color: red; }
-> le texte sera bleu

C'est ce qui t'arrive. Ton sélecteur n'a pas assez de poids pour changer la couleur. Et quand tu rajoute une classe tu augmente assez son poids pour reprendre la main.

nantais a écrit :
et j'en ai un paquet, y a t il moyen de simplifier?

Alors la bonne pratique voudrait qu'on laisse des poids faibles (1 classe seulement si possible) afin de pouvoir spécialiser simplement les éléments.
Donc si possible, regarde dans ton inspecteur de code quel est le sélecteur qui bloque et regarde si tu peux réduire son poids.

Sinon tu devras trouver un moyen pour augmenter le poids du sélecteur en gardant le fait qu'il sélectionne toujours les mêmes éléments. Il faut aussi que tu regarde le second sélecteur qui pose problème pour savoir ce que tu doit rajouter au minimum pour passer devant.

Zelena a écrit :

Dans ce cas, pour s'imposer quand même, il faut faire :

a:hover{color:#ccc !important}

Arrrgh

Hehehe j'en ai pas parlé exprès car c'est une mauvaise pratique pour moi. ca rend le css assez difficile à maintenir et a comprendre.
!important surpasse tout les poids. A utiliser en cas d'urgence

merci à tous les deux
je vais regarder tout ca de pres... ca se complique mais c'est sympa de comprendre
pour mon a:hover d'emble je ne vois pas ce qui bloque car je ne vois pas enquoi il pourrait etre en concurence, mais merci vais chercher

encore une question puisque je comprend moieux les syntaxes:
pour les liens quelle est la bonne pratique, par exemple un menu avec une quarantaine de liens de meme couleur
on met la class sur chaque lien: <a class="machin"... ou sur la div qui les contient..

pour les hover

en testant

a:hover{
    color: #ccc !important
}
et
a[href]:hover{
    color: #ccc 
}

fonctionnent
Modifié par nantais (10 Oct 2017 - 10:39)

oui, comme j'ai dit plus haut le !important va passer avant out mais c'est une pratique à n'utiliser qu'en cas d'urgence

a :hover est très bien

il me reste une derniere question
j'ai un mediaprint de ce style

@media print {
    .class1,.class2,class3, etc etc {display:none} }

une bonne dizaine de class car l'impression ne concerne que 3 ou 4 class

j'ai essaye de simplifier avec

@media print {
    * {display:none}
.imp1,.imp2,.imp3{display:block}
}

mais ca ne fonctionne pas meme en donnant du poids genre body .imp1{display:block} ou en mettant !important