[CSS] Héritage et porté

jall94

Membre actif
25 Juillet 2005
367
24
50
Salut,

Une petite question, surement très bête, mais je n'ai pas les idées clairs sur le sujet :)

En CSS, on peut définir les héritages de la manière suivante :
.menu p {...}
p .menu {...}

Bon, mais moi ce que j'aimerai c'est pouvoir faire que des classes soit héritières d'autres classes. c'est pas facile a expliqué, mais j'essaie néanmoins :

Si je déclare un truc du style <div class="blog> ...... </div>
et que dedans j'ai une truc <div class="contenu"> ..... </div>

Je ne peux, en l'état actuel de mes connaissance , que déclarer dans la CSS :

.blog {...}
.contenu {...}

Si maintenant, je fais dans mon site un gallerie photo, je serai obligé de déclarer :

.gallerie {...}
.contenu_gallerie{...}

Alors que si j'avais pu trouver un moyen pour déclarer quelque chose genre :

.blog .contenu {...}
.gallerie .contenu {...}

Cela pemettrait que "contenu" puisse être différent en fonction de la classe juste au dessus. Cela me permettrait d'uniformiser mes pages web en laissant le soin au CSS de définir les styles a appliquer en fonction de la nature de la page.

Je ne peux d'ailleurs pas plus limité la portée, sans même parlé d'héritage, d'une classe par rapport a une autre en faisant (sans espaces) :

.blog.contenu {...}
.gallerie.contenu {...}

Or a ma connaissance, ce type de syntaxe n'est pas possible, mais j'avoue que je

me perds assez facilement dans ces notions d'héritages et de limitations. En plus je débute plus ou moins, et je suis peut-être (surement) passé à coté d'un truc évident, voir je suis totalement a coté de la plaque... :siffle:

D'où mon message.... :love:

Merci d'avance pour vos eclaircissements
 
Bonjour, je pense que la solution est très simple : sache que l'on peut associer à un élément autant de classes que l'on veut. De même, un élément peut se voir attribuer à la fois un identifiant et une ou plusieurs classes.

Pour toi une solution serait de déclarer dans tes pages
Bloc de code:
<div class="contenu blog"> [&#8230;] </div>
Bloc de code:
<div class="contenu blog"> [&#8230;] </div>

Oups


Je laisse ce que j'ai écris mais je viens de relire ton message plus lentement.

La syntaxe
jall94 a dit:
.blog .contenu {...}
est tout à fait possible.
 
  • J’aime
Réactions: jall94
Salut,

Merci à tous les deux pour vos réponses. je regarde çà, je test, et je reviens vous dire. La dernière info me surprends, mais dans l'action, c'est probablement la seule option que je n'ai finalement pas essayée :siffle::D
 
Nephou :up:

Effectivement, c'était la seule solution que je n'avais pas tenté, et ca fonctionne. Mon problème était donc lié à la syntaxe et pas a un probleme de reflexion, ca me rassure quelque part ;). Je commence à avoir les idées claires sur le sujet.

Merci à toi pour ton aide et pour avoir pris le temps de comprendre mon message initial, ce qui n'était déja pas une mince affaire :siffle::zen:
 
  • J’aime
Réactions: Nephou
Il est parfaitement possible de faire ce que tu veux.
Si tu as un <p> dans un <div> avec une classe "galerie" dans un <div> avec une classe "contenu", tu peux définir :
div.contenu div.galerie p {...}

Cette propriété ne s'appliquera qu'à ce <p>, et c'est parfaitement valide.
 
  • J’aime
Réactions: CRISPEACE
Merci Toubai, c'est ce que j'ai effectivement découvert depuis :). Ca arrange tous mes soucis :up: