[résolu] Bloquer héritage CSS

[dièse]

Bonjour,

Je voudrais pouvoir bloquer un héritage CSS.

Je pense hélas que ce n'est pas possible, du moins je n'ai trouvé aucune référence à ce sujet.

Mon exemple :

ul.class1 {}

.class1 li {}

.class2 li {}

<ul class="class1">

<li>

<li>

<li>

<li class="class2">

</ul>

Je n'arrive pas à affecter un nouveau style au dernier <li>. Je perds mon temps ?

Modifié 16 Septembre 2005 par dièse

[Dudu]

Salut

Fatalement, en oubliant de nous mettre le code CSS çà va être dur...

Quel "héritage" cherches-tu à "bloquer" ? (si tant que la question ait vraiment un sens, formulée comme ceci: je ne suis pas sûr d'avoir compris ). Tu cherches à changer les propriétés si je comprends bien ?

edit: vu à quoi ressemble le code HTML, tu drvais plutôt avoir un CSS qui ressemble à ceci

ul.class1 {}
.class1 ul li {}
.class2 li {}

Attention à ne pas confondre ul.class1 et .class1 ul

Modifié 16 Septembre 2005 par Dudu

[TheRec]

Bonsoir,

à mon sens le seul moyen de "bloquer l'heritage" c'est de spécifier la valeur souhaitée pour la propriété qui ne doit pas hériter... l'héritage étant "inné" au CSS c'est le fonctionnement normal que d'hériter des propiétés qui ne sont pas défini spécialement pour un enfant...(à condition que la proriété soit "héritable", par exemple la propriété width n'est pas héritable...).

Modifié 16 Septembre 2005 par TheRec

[dièse]

mon dernier <li> hérite des propriétés contenu dans .class1 li {} je peux rajouter des propriétés dans ma "class2" mais pas modifier les propriétés héritées.

oui ? non ? je reformule ?

[edit pour therec]bah non justement je ne peux pas respécifier les valeurs héritées, padding, background...[/edit]

Modifié 16 Septembre 2005 par dièse

[TheRec]

Un petit doute m'habite (pas de jeux de mots svp ) ... fermes-tu les <li> dans ton code, car celui que tu nous a communiqué ne le fait pas... Il faudrait plutôt utiliser :

<ul class="class1">
<li>Element 1</li>
<li>Element 2</li>
<li>Element 3</li>
<li class="class2">Element 4 avec class 2</li>
</ul>

Pour le reste Dudu à raison, ne confond pas ul.class et .class ul ... tu veux certainement spécifier un li.class1 et un autre li.class2 ...

Si tu ne veux pas respécifier les valeurs alors spécifie les avec une valeur qui les met à néant :

background: none;

Modifié 16 Septembre 2005 par TheRec

[Dudu]

fermes-tu les <li> dans ton code, car celui que tu nous a communiqué ne le fait pas...

Ce qui n'est pas un problème en HTML 3.2 et qui est toléré en HTML 4 (Transitional seulement il me semble).

=> Si Apache te permet les index sur des répertoires sans fichier "index.html" (OptionsIndexes On) regarde un peu le code source

[dièse]

bon bah toutes mes plus plates excuses, je vous ai fait perdre votre temps je viens de trouver le problème.

Mon code était en fait :

ul.class1 {}

.class2 li {}

.class1 li {}

<ul class="class1">

<li class="class2">

<li>

<li>

</ul>

C'était l'ordre de spécification des mes <li> le problème. Avec la feuille de style suivante tout va bien :

ul.class1 {}

.class1 li {}

.class2 li {}

Dudu avait raison j'aurais donné le code ça aurait été réglé en 10 secondes

[dièse]

Pour le reste Dudu à raison, ne confond pas ul.class et .class ul ... tu veux certainement spécifier un li.class1 et un autre li.class2 ...

Non je ne confondais pas, c'était juste pour ne pas avoir à respécifier class="class1" sur tous mes <li> ( c'est une feuille de style pour des menus ), pour essayer d'avoir un code un peu propre, mais je manque un peu de logique

[Dudu]

Non je ne confondais pas, c'était juste pour ne pas avoir à respécifier class="class1" sur tous mes <li>

Dans ce cas le code CSS est

.class1 ul li {}

qu'il est possible d'abréger en

.class1 li

(mais la 1ère écriture est plus logique)

[destroyedlolo]

Salut,

Attention à ne pas confondre ul.class1 et .class1 ul

<{POST_SNAPBACK}>

Tiens, c'est quoi la difference entre les 2 ?

Lolo (de retour de vacances)

[dièse]

Dans le 2ème cas "class1 ul" il y a un notion d'héritage, tu spécifie toutes les listes ayant un parent de class "class1".

C'est pourquoi je pense que ma feuille de style est juste

Modifié 16 Septembre 2005 par dièse

[Loupilo]

Salut,

Tiens, c'est quoi la difference entre les 2 ?

Lolo (de retour de vacances)

<{POST_SNAPBACK}>

'ul.class1' concerne tous les <ul class="class1">.

'.class1 ul' concerne tous les ul contenus dans des class1 :

<div class="class1">
<ul>

ou encore

<p class="class1">
<ul>

etc.

[Dudu]

ul.class1

ne va s'appliquer qu'à une balise HTML

<ul class="class1">

et c'est tout.

C'est-à-dire qu'avec cette règle CSS la balise <ul> du code suivant ne reçoit aucun style

<div class="class1"><ul><li>foo</li></ul></div>

Et ".class1 ul" c'est l'inverse

edit: grillé à fond