Aide générale La différence entre ces deux cas CSS
Salut.
Quelle est la différence entre ces deux codes svp ?
Je m'explique d’avantage, je vous inquiétez pas
Premier cas, j'ai mis #module-mini-notifications .xxxxxx qui est accroché, sans espace, et ça fonctionne. Si je met un espace comme le deuxième cas, mon CSS n'est plus pris en compte.
Inversement bien sûr sur le deuxième cas par rapport au premier cas, qui lui est collé à #module-mini-notifications.xxxxxxx
Merci pour vos lumières
Quelle est la différence entre ces deux codes svp ?
Code CSS :
#module-mini-notifications.module-mini-container { margin: 90px 0px 0px 0px; padding: 10px; background-color: transparent; border:none; border-spacing: 1px; clear: both; box-shadow: none; color: #fbfbfb; font-size:1.1em; } #module-mini-notifications .module-mini-contents { padding-top:0; border-top: none; border-bottom: none; text-align: left; }
Je m'explique d’avantage, je vous inquiétez pas
Premier cas, j'ai mis #module-mini-notifications .xxxxxx qui est accroché, sans espace, et ça fonctionne. Si je met un espace comme le deuxième cas, mon CSS n'est plus pris en compte.
Inversement bien sûr sur le deuxième cas par rapport au premier cas, qui lui est collé à #module-mini-notifications.xxxxxxx
Merci pour vos lumières
Coucou,
Donc bah je vais essayer de t'expliquer donc en fait déjà les deux propriétés css commencent par un #, donc ce qui veut dire que un id="" en html qui est affecté par ces deux propriétés et pas un class="", ensuite .module-mini-container, c'est parce que tu touche au css à l'intérieur de l'id
Bon j'avoue que là c'est pas clair je t'explique
Comme tu peut le voir, j'ai modifier la propriété A qui est dans la div notification, et les A qui ne sont pas dans cette div ne seront pas affecté par le changement de la couleur en orange
Bon c'est peut-être flou encore non ? xD
Edit: Enfin je pense que c'est ça du moins je l'ai appris comme ça dans les cours vidéos Edité par Myster Le 19/01/2019 à 12h16
Donc bah je vais essayer de t'expliquer donc en fait déjà les deux propriétés css commencent par un #, donc ce qui veut dire que un id="" en html qui est affecté par ces deux propriétés et pas un class="", ensuite .module-mini-container, c'est parce que tu touche au css à l'intérieur de l'id
Bon j'avoue que là c'est pas clair je t'explique
Code CSS :
#notification{ background:black; } #notification a { color:orange; }
Comme tu peut le voir, j'ai modifier la propriété A qui est dans la div notification, et les A qui ne sont pas dans cette div ne seront pas affecté par le changement de la couleur en orange
Bon c'est peut-être flou encore non ? xD
Edit: Enfin je pense que c'est ça du moins je l'ai appris comme ça dans les cours vidéos Edité par Myster Le 19/01/2019 à 12h16
Bonjour,
C'est vrai que je me suis déjà posé la question .. Mais vu que c'est une id et une class et associé, cela arrive parfois ! j'ai cherché aussi si cela ne venait pas de la structure en elle-même, et il serait plausible aussi que cela soit dû au fait qu'il sont associés sur le même div et le même tpl ou pas. Donc descendance parent.s enfant.s (je sais que cela va être dur à saisir).
Tu vois pour ce code en vérité , il est généré par un tpl par défaut dans le "templates\default\framework\menus\modules_mini.tpl" donc un TPL indépendant du module lui même. Et que l'{ID} est redirigé par le php et pas en direct. C'est se qui causerait cette différence.
Après tu as l'autre exemple dans ton design.css ou tout est connecté en CSS car dans le même tpl et sur le même div :
OU là en Css :
Après , je peux me tromper, mais je pense que c'est cela ..
Swan.
C'est vrai que je me suis déjà posé la question .. Mais vu que c'est une id et une class et associé, cela arrive parfois ! j'ai cherché aussi si cela ne venait pas de la structure en elle-même, et il serait plausible aussi que cela soit dû au fait qu'il sont associés sur le même div et le même tpl ou pas. Donc descendance parent.s enfant.s (je sais que cela va être dur à saisir).
Exemple 1 : CSS non relié
Tu vois pour ce code en vérité , il est généré par un tpl par défaut dans le "templates\default\framework\menus\modules_mini.tpl" donc un TPL indépendant du module lui même. Et que l'{ID} est redirigé par le php et pas en direct. C'est se qui causerait cette différence.
Code HTML :
Code CSS :
#module-mini-notifications.module-mini-container { margin: 90px 0px 0px 0px; padding: 10px; background-color: transparent; border:none; border-spacing: 1px; clear: both; box-shadow: none; color: #fbfbfb; font-size:1.1em; }
Exemple 2 : CSS relié
Après tu as l'autre exemple dans ton design.css ou tout est connecté en CSS car dans le même tpl et sur le même div :
Code TPL :
OU là en Css :
Code CSS :
#main.main-with-left, #main.main-with-right { width: calc(100% - 200px); -ms-flex: 1 0 auto; /*Tricks IE*/ } #main.main-with-left.main-with-right { width: calc(100% - 400px); -ms-flex: 1 0 auto; /*Tricks IE*/ }
Après , je peux me tromper, mais je pense que c'est cela ..
Swan.
Bonjour et merci à tous les deux.
D'accord, donc si ça marche pas avec un espace, faut aussi essayer en accrochant les deux parties .. Une histoire de "cascade" en CSS si je comprends bien
Merci
D'accord, donc si ça marche pas avec un espace, faut aussi essayer en accrochant les deux parties .. Une histoire de "cascade" en CSS si je comprends bien
Merci
L'espace permet simplement de préciser que tu parle d'un élément enfant.
Si tu ne met pas d'espace c'est que tu parle du même élément.
C'est l'un des principes de sélecteur CSS. Edité par ElenWii Le 29/01/2019 à 23h46
Code CSS :
.maclass-parent .maclass-enfant
Si tu ne met pas d'espace c'est que tu parle du même élément.
Code CSS :
.maclass-parent.maclass-parent2
C'est l'un des principes de sélecteur CSS. Edité par ElenWii Le 29/01/2019 à 23h46
Répondre
Vous n'êtes pas autorisé à écrire dans cette catégorie