28112 sujets

CSS et mise en forme, CSS3

Bonnes syntaxes css

Pages :
bonjour,
je voudrais votre aide pour comprendre les bonnes syntaxes pour les selecteurs
imaginons que j'ai ceci
<nav class="maclass">
<div>mon texte</div>
<p>autre texte</p></nav>

1: .maclass {...} va impacter tout ce qui est à l'interieur de cette class
2: nav{...} fera pareil tout ce qui est ds nav? non?
3: nav div{...} va impacter tout ce qui est dans la div, avec ce qui est defini comme style pour nav + ce qui est defini pour div, ou bien selectionne la div qui est à l'interieur de la nav?
4: .maclass div{...} meme question?
5: div.maclass {...} devrait impacter la div qui est sous ma class non, ds mes tests ca ne fait rien, puisque j'ai lu que p.maclass impacterait les p qui sont ds .maclass
6: nav > div {..} et .maclass > div {..} meme question que 3 et 4
si vous aviez un bon petit topo sur tout ca suis preneur
merci
et par exemple quelle serait la bonne syntaxe pour selectionner la div qui est dans .maclass
Modérateur
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 ?

Smiley smile
merci à tous les deux
certaines proprietes s'appliquent d'autres non, voilà une explications aux differents essais que j'ai pu faire, ca va me compliquer la tache pour apprendre
c'est tout de meme etrange d'avoir concu ce langage avec des exeptions qui confirment la regle

si on se refere à mon exemple
que ferait:
nav.maclass div {...} j'ai trouve ce genre d'enchainement sur internet (pas d'espace entre nav et .maclass)
et pour le no5 tu dis: "il sélectionne tout les élément div qui ONT la classe .maclass (il n'y a pas d'espace)" pourtant dans les tests que j'ai fait ca n'impactait rien... (je n'avais pas mis d'espace) peut etre est ce a cause de ces fameuses proprietes qui s'appliquent où non ou que j'ai rate qq chose
Modérateur
nantais a écrit :
nav.maclass div {...}

Et bien ce sélecteur cible tout les éléments div qui sont enfant (peut importe la profondeur) d'un élément nav qui porte la classe maclasse. Tu avais bien compris cela ? Smiley smile
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
Bonjour.

Sans exemple concret, c'est difficile de répondre car, effectivement :
a:hover{color:#ccc}

va concerner tous les liens quelque soit leur classe sauf si… cette propriété a déjà été redéfinie classe par classe.

Dans ce cas, pour s'imposer quand même, il faut faire :
a:hover{color:#ccc !important}


Smiley smile
Modérateur
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.

Smiley smile
Modérateur
Zelena a écrit :

Dans ce cas, pour s'imposer quand même, il faut faire :
a:hover{color:#ccc !important}


Arrrgh Smiley cry

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 Smiley cligne
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..
Modérateur
Tu mets la classe "menu-item" sur chaque élément que tu veux styler, donc sur tout tes <a> je dirais. La force du CSS c'est que tu peux mettre la même classe sur tout tes éléments en ne la définissant qu'une seule fois dans le CSS.

Après tu peux te passer de classe en faisant un truc du genre
.menu a {}

Mais du coup tu rajoutes une complexité à ton code je trouve.
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)
Modérateur
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 Smiley smile

a Smiley href :hover est très bien Smiley smile
_laurent a écrit :

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.

Ce qui est une mauvaise pratique est de mettre des classes à tire-larigot dans presque toutes les balises HTML.
Je n'ai presque jamais eu besoin d'utiliser !important ni de me soucier de spécificité (poids des sélecteurs).
Mais je fais du CSS pour m'amuser et dans la tradition du Zen Garden.
Dans le monde professionnel, beaucoup de "mauvaises pratiques" se sont généralisées avec leur lot d'inconvénients.… puisque à la base, ça n'a pas été prévu pour.

Smiley smile
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
Ah, le sélecteur universel… il prend tout en compte et même (et je ne pense pas me tromper)… les parents des classes .imp1, .imp2, .imp3

Votre page est devenu un vaisseau fantôme qui cache tout.

Smiley sweatdrop
a écrit :
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

Sinon, on peut aussi surclasser une règle en utilisant des sélecteurs plus spécifiques, le genre :

body nav ul li a:hover{color:#ccc !important}


@Zelena
a écrit :
Ce qui est une mauvaise pratique est de mettre des classes à tire-larigot dans presque toutes les balises HTML.
Je n'ai presque jamais eu besoin d'utiliser !important ni de me soucier de spécificité (poids des sélecteurs).
Mais je fais du CSS pour m'amuser et dans la tradition du Zen Garden.


+1, je partage entièrement ton point de vue.
Modifié par thierry (10 Oct 2017 - 14:23)
Pages :
Sujet clos
Aller à