Bonjour,
en lisant la documentation que j'ai sur le CSS, j'ai déduit que les 2 notations suivantes : td.menu et .menu td sont équivalentes et désignent les td de la classe menu.
Est-ce exact ou est-ce que je me trompe ?
Bonjour,
en lisant la documentation que j'ai sur le CSS, j'ai déduit que les 2 notations suivantes : td.menu et .menu td sont équivalentes et désignent les td de la classe menu.
Est-ce exact ou est-ce que je me trompe ?
Il vaut mieux viser la perfection et la manquer que viser l'imperfection et l'atteindre. - Bertrand Russell
Si la discussion est résolue, merci de cliquer sur le bouton
Bonjour,
Cela m'a pris 40 sec de créer un tableau test avec tes deux CSS sur JSFiddle:
lien JSfiddle : https://jsfiddle.net/g7pndsuh/
Tu verras une différence par toi-même.
colorie bien tous les td de la classe "menu" en rouge.
Code : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4 .menu td{ color:red; }
Pour plus de précisions :
Exemple 1 :
<td> sera enfant de la classe .menu. Cela va affecter tous les éléments <td> contenus dans la classe .menu et uniquement ceux-là.
Code : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3 .menu td { propriétés }
Cela évite d'écrire <td class="menu"> pour chaque élément de la liste.
Exemple 2
Ici, cela ne va concerner que les <td> de classe "menu" il s'agit purement et simplement de l'équivalent du "ET" : les deux conditions doivent être réunies pour fonctionner. Il n'y a plus de notion d'héritage.
Code : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3 td.menu { propriétés }
Il ne faut jamais prendre les gens pour des cons, mais il ne faut pas oublier qu'ils le sont...
Le guide du débutant pour apprendre à programmer en Java - N'oubliez pas de consulter les FAQ Java et les cours et tutoriels Java
Merci d'avoir pris ces 40 secondes ; même si ce réflexe est logique, je ne l'ai pas eu... Je ne retrouve pas le lien où j'avais fait cette déduction, mais c'était exactement ce que tu précises et même en le relisant, je fais la même déduction et ne comprends pas pourquoi avec td.menu, le "oh un td !!" n'est pas rouge...Peux-tu m'expliquer ?
Il vaut mieux viser la perfection et la manquer que viser l'imperfection et l'atteindre. - Bertrand Russell
Si la discussion est résolue, merci de cliquer sur le bouton
Supposons une arborescence HTML de la sorte :
le code :
Code : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6 <table> <tr class="menu"> <td>oh un td !!</td> <td class="menu">oh un td avec une classe menu</td> </tr> </table>
coloriera les deux td, car ils ont pour parent <tr> qui a la classe .menu.
Code : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4 .menu td{ color:red; }
le code :
coloriera seulement le 2e td. Car cette notation désigne un élément td ayant la classe .menu (équivalent à une condition "ET" : un élément td ET de classe .menu)
Code : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4 td.menu{ color:red; }
Il ne faut jamais prendre les gens pour des cons, mais il ne faut pas oublier qu'ils le sont...
Le guide du débutant pour apprendre à programmer en Java - N'oubliez pas de consulter les FAQ Java et les cours et tutoriels Java
Merci pour ta claire explication.
Il vaut mieux viser la perfection et la manquer que viser l'imperfection et l'atteindre. - Bertrand Russell
Si la discussion est résolue, merci de cliquer sur le bouton
Vous avez un bloqueur de publicités installé.
Le Club Developpez.com n'affiche que des publicités IT, discrètes et non intrusives.
Afin que nous puissions continuer à vous fournir gratuitement du contenu de qualité, merci de nous soutenir en désactivant votre bloqueur de publicités sur Developpez.com.
Partager