Twitter iPhone pliant OnePlus 11 PS5 Disney+ Orange Livebox Windows 11

[CSS] hierarchie des styles et des tags

1 réponse
Avatar
Serge Hartmann
Chers gourous, bonjour à tous,

Débutant en CSS (j'ai enfin! compris leur intérêt, pas la pein e d'en
remettre une couche), je cherche à organiser de façon logique mes feuilles
de style, et ainsi à éviter les déclarations de style css redondantes.

actuellement j'ai ceci (shématiquement)

* css :

a.menu:link { (mon style pour les miens du menu) }
a.menu:visited { (mon style pour les miens du menu) }
a.menu:hover { (mon style pour les miens du menu) }
table.menu { (mon style pour les tableaux du menu) }
(etc...)

a.text:link { (mon style pour les miens du menu) }
a.text:visited { (mon style pour les miens du menu) }
a.text:hover { (mon style pour les miens du menu) }
table.text { (mon style pour les tableaux du menu) }
(etc...)

div.menubar {
float:left;
margin-top:0.1em;
background-color:#002e57;
[COUIC]
}

(etc)

* x-html :

<div class="menubar">
<a class="menu" href="index.php3">Page d'accueil</a><br />
<a class="menu" href="announcements.php3">Bulletin d'info</a><br />
[COUIC sur tous les liens]
</div>

<div class="text">
blablabla, blabla <a class="text" href="mon-lien">mon lien</a> blablabla.
</div>


je cherche donc une solution plus élégante et évitant de répéter à chaque
<a> qu'il faut utiliser la classe "menu" (puisque je *suis* dans le menu,
défini par le <div>) ou la classe "text" pour le bloc défini par le style
"text".

auriez-vous une suggestion à me faire ?

--
Serge Hartmann
jabber-id : ledroide@jabber.org

1 réponse

Avatar
Raphaël wils
Raphaël wils wrote:
a.menu:link { (mon style pour les miens du menu) }
a.menu:visited { (mon style pour les miens du menu) }





[...]

div.menubar {





[...]

Oui, par exemple pour les liens contenus dans un bloc de classe "menubar"
: .menubar a:link { }
.menubar a:visited { }
et tu supprimes la classe "menu".



Serge Hartmann a écrit :
je me doutais bien d'une astuce de ce genre mais je n'avais pas trouvé sa
syntaxe. merci raphael.

ayant choisi un style div.menubar, dois-je nommer mes styles de liens en
div.menubar a:link { }
div.menubar a:visited { }
?

ou bien dois-je préférer la simplicité et me passer du div
.menubar { }
.menubar a:link { }
.menubar a:visited { }
?



Cela dépend des cas.

Si tu veux appliquer ce style à tout les <a> dont le parent a une classe
"menubar" que ce soit un div ou un autre conteneur c'est la deuxieme
solution qu'il faut choisir.

En revanche la premiere ne s'appliquera qu'aux <a> dont le parent a pour
classe "menubar" et qui est en plus un div.

--
Raphael wils
http://perso.club-internet.fr/raphael.wils
"It don't mean a thing, if it ain't got that swing !"