28241 sujets

CSS et mise en forme, CSS3

[Résolu] Désactiver l'héritage ?

Bonjour à tous,

J'ai un soucis, je pense qu'il est du à l'héritage. J'ai le code HTML suivant:

<div class="div-toto">
     <span><a href="..">LIEN1</a></span>
     <a>...</a>
     <a>...</a>
     <a>...</a>
</div>


Et le CSS:

// Pour le premier lien (LIEN1):
div.div-toto span a { background-color:blue; }

// Pour les autres liens:
div.div-toto a { display:block; float:left; width:50px; height:50px; background-color:red; }



Le soucis: le premier lien (LIEN1) applique toutes les propriétés définies pour les autres liens (sauf le background que j'ai surchargé). Je ne le souhaite pas.

Je cherche donc soit à "désactiver" l'héritage sur ce lien, soit à désactiver les propriétés CSS (c'est pas la première fois que je cherche à faire ça, j'ai jamais trouvé; il me faudrait un truc du genre "width:default;" Smiley lol ).

Peut-être que je m'y prend mal... Merci d'avance pour le coup de main Smiley langue
Modifié par jiber2fr (30 Dec 2009 - 16:53)
<ul class="toto"> 
     <li class="premier_lien"><a href="#">Lien 1</a></li>
     <li class="lereste"><a href="#">Lien 2</a></li>
     <li class="lereste"><a href="#">Lien 3</a></li>
     <li class="lereste"><a href="#">Lien 4</a></li>
</ul>



.premier_lien{background-color:blue;}
.lereste{display:block;float:left;width:50px;height:50px;background-color:red;}


C'est plus valide, plus accessible, et plus correcte Smiley smile
Salut,

Le problème avec ta syntaxe, c'est que ton sélecteur est plus précis/complet pour ton lien 1 du coup il est appliqué partout.

Il serait plus sage de supprimer le <span> au profit d'une classe donnée à ton lien 1. Mais peut être as-tu besoin du span pour une autre raison ?
Technologix a écrit :
<ul class="toto"> 
     <li class="premier_lien"><a href="#">Lien 1</a></li>
     <li class="lereste"><a href="#">Lien 2</a></li>
     <li class="lereste"><a href="#">Lien 3</a></li>
     <li class="lereste"><a href="#">Lien 4</a></li>
</ul>

Inutile d'alourdire en utilisant une classe pour tous les autres liens, la classe pour le lien 1 suffit, le reste pouvant être pris en charge par :
ul.toto a {...}
Hello,

Merci pour vos réponses. Je vais m'inspirer de vos propositions (sans toutefois utiliser ul/li ^^).

En fait, comme ce code HTML est généré en Javascript (DOM), je souhaite avoir un code le plus léger possible, et je préférais éviter autant que possible d'appliquer des classes aux liens, vu qu'il y en a plein.

Mikachu: cette solution ne fonctionne pas; en effet, en appliquant une classe seulement au lien1, je peux certes lui donner des attributs supplémentaires, mais les styles des autres liens s'appliquent également, ce que je ne souhaite pas.


D'une manière plus générale, y a-t-il un moyen d'empêcher l'héritage, ou de dire à un lien de n'appliquer aucune propriété héritée (en gros, réinitialiser les styles pour ce lien) ?

Quelque chose du genre:
a#monLienParticulier { all-styles:reset; }


Merci Smiley biggrin
Bonjour,
jiber2fr a écrit :
cette solution ne fonctionne pas; en effet, en appliquant une classe seulement au lien1, je peux certes lui donner des attributs supplémentaires, mais les styles des autres liens s'appliquent également, ce que je ne souhaite pas.
C'est normal si tu n'utilise pas les listes... Il n'y a pas moyen de cibler le lien normal sans cibler le lien spécifique.

jiber2fr a écrit :
D'une manière plus générale, y a-t-il un moyen d'empêcher l'héritage, ou de dire à un lien de n'appliquer aucune propriété héritée (en gros, réinitialiser les styles pour ce lien) ?
Il n'y a qu'un seul moyen : redéfinir chaque propriété. l'héritage est l'un des fondement du CSS...
jiber2fr a écrit :

En fait, comme ce code HTML est généré en Javascript (DOM), je souhaite avoir un code le plus léger possible, et je préférais éviter autant que possible d'appliquer des classes aux liens, vu qu'il y en a plein.


Ce n'est pas plus lourd de mettre une classe à ce type de lien, que de lui coller un span Smiley cligne et c'est plus "correct".

jiber2fr a écrit :

D'une manière plus générale, y a-t-il un moyen d'empêcher l'héritage, ou de dire à un lien de n'appliquer aucune propriété héritée (en gros, réinitialiser les styles pour ce lien) ?


jiber2fr a écrit :

Je cherche donc soit à "désactiver" l'héritage sur ce lien, soit à désactiver les propriétés CSS (c'est pas la première fois que je cherche à faire ça, j'ai jamais trouvé; il me faudrait un truc du genre "width:default;" Smiley lol ).


D'une manière générale Smiley cligne quand on a besoin de changer la façon dont quelque chose fonctionne, c'est souvent qu'on l'utilise mal.

Comme le dit Laurie-Anne, il te faut redéfinir chaque propriété en leur remettant leur valeur par défaut (voir les spécifications pour les trouver).



<div class="div-toto">
     <a class="monLienSpecial" href="..">LIEN1</a>
     <a>...</a>
     <a>...</a>
     <a>...</a>
</div>


Et le CSS:


// Pour les autres liens:
div.div-toto a { display:block; float:left; width:50px; height:50px; background-color:red; }

// Pour le premier lien (LIEN1):
div.div-toto a.minLienSpecial { display: inline; float: none; width: auto; height: auto; background-color:blue; }


Note : je ne suis pas allée vérifier les valeurs exactes, mais je crois que c'est ça.
Modifié par mistike (30 Dec 2009 - 09:49)
Merci pour toutes ces précisions Smiley smile

(Dans mon cas précis, le premier lien n'a vraiment rien à voir avec les autres, donc je ne veux pas le mettre dans la liste avec les autres.)

Mais il est certain que je n'utilise pas assez les ul/li, je n'y pense jamais. Smiley confused

Certes, l'héritage est un fondement du CSS. Mais prévoir une instruction permettant de ne pas appliquer une règle sur un élément précis ne me parait pas absurde. Supposons que j'ai 300 liens dans une liste, et un seul, en plein milieu, qui ne doivent pas avoir le même aspect que les autres.

Si, d'une manière générale, j'ai appliqué une dizaine de règles sur les liens de la liste, je serai obligé d'indiquer la valeur par défaut de chaque propriété dans une règle spécifique à ce lien. Je trouve ça lourd. (Bien sûr, je pourrais appliquer une classe à tous les liens sauf celui-là, mais si ce contenu est généré en javascript/dom, ça alourdi, et ça ralenti l'exécution.)

Et même sans pouvoir désactiver l'héritage, il pourrait y avoir une syntaxe pour dire "cette règle concerne tous les liens SAUF celui-ci".

Exemple:
// Je met volontairement plein de règles pour illustrer [langue]
a { color:red; display:block; float:left; text-decoration:none; ... }
a#lienSpecial { color:???; display:inline; float:none; text-decoration:underline; ... }

// Deviendrait quelque chose du genre...
a -a#lienSpecial { color:red; display:block; float:left; text-decoration:none; ... }


mistike: dans les spec, je ne trouve pas les valeurs par défaut élément par élément. Exemple: le text-decoration d'un lien n'est pas, par défaut, le même que celui d'un span. J'avoue que j'ai énormément de mal à naviguer dans les specs du W3C Smiley decu . Par ailleurs, pour certaines propriétés (exemple: color), la spec indique "initial: depends on user agent". D'ailleurs, la vraie solution pour désactiver une propriété, ce n'est pas de lui mettre la valeur supposée "par défaut", mais de dire au navigateur de mettre sa propre valeur par défaut.

Comprenons-nous bien, je ne suis pas en train de critiquer CSS Smiley langue . Je met juste le doigt sur une subtilité qui, dans certains cas, pourrait être intéressante Smiley cligne
jiber2fr a écrit :

Mais il est certain que je n'utilise pas assez les ul/li, je n'y pense jamais. Smiley confused


Pour un menu, c'est quand même mieux.

jiber2fr a écrit :

Certes, l'héritage est un fondement du CSS. Mais prévoir une instruction permettant de ne pas appliquer une règle sur un élément précis ne me parait pas absurde. Supposons que j'ai 300 liens dans une liste, et un seul, en plein milieu, qui ne doivent pas avoir le même aspect que les autres.


Ca existe en CSS3... ce qui veut dire que pour l'instant ça ne marche que sur très peu de navigateurs, et encore, leurs toutes dernières versions...

Un exemple que j'ai utilisé récemment (mais pour un site local dont je suis la seule à me servir, donc pour un site online, ça n'est pas une bonne idée du tout du tout) et qui fonctionne nickel avec mon FF3.6b (pas testé les autres) :


#src p:not(.warning) {border : 1px solid #C1DAD7; min-height: 10em; padding: 3px;}
Sujet clos
Aller à