Héritage des règle css

Hello,

Dans mon site j'utilise différentes mise en forme pour les <ul> et <li>.
Par exemple pour mon div #centre j'ai :

#centre li{
	background: url(../imgs/arrow-green1.gif) left center no-repeat;
	list-style:none;
	font-size:1.1em;
	padding:0 0px 0 10px;
	margin: 0 0 0 0;
}

dans un autre div contenu dans #centre j'utilise d'autre valeur pour mon <li>, par contre il hérite des valeurs déclaré précédeement...

comment faire pour utiliser de style bien différent, sans héritage??

tu lui appliques un attribut style="..." où tu redéfinis les propriétés.

J'ai bien redéfini les propriété... mais apparement il hérite quand même des propriété précédente...

Bonjour,

mego a écrit :
dans un autre div contenu dans #centre j'utilise d'autre valeur pour mon <li>, par contre il hérite des valeurs déclaré précédeement...

Voici le sélecteur qui convient :

#centre div li{ ici les propriétés qui conviennent}

Xavier a écrit :
Voici le sélecteur qui convient :

#centre div li{ ici les propriétés qui conviennent}

Bonjour,

ça n'empêchera pas l'héritage de #centre li vers #centre div li (ce qui était la question il me semble)

On pourrait normalement passer par les sélecteurs d'enfant (combinateur ">"), donc quelque chose comme ça :

#centre>ul li { }

Mais IE 5/6 sont un peu trop vieux pour ça... il faut donc recourir à l'ajout d'un attribut (ID ou CLASS)
Modifié par Alan (28 Jun 2006 - 16:17)

ll n'existe pas une methode simple pour éviter l'heritage?

J'aimerai simplement utiliser deux ou trois types de list différentes sur mon site.

Ajouter un attribut CLASS à <ul>, est-ce si compliqué que cela ?

tu donnes un id ou class different a chaque style , Alan vient de te le dire on va pas le repeter 3fois.
Et l'heritage s'il est parfois contrariant, il est plus souvent avantageux.
Grilled ca fait 3fois
Modifié par jp94 (28 Jun 2006 - 16:30)

jp94 a écrit :
tu donnes un id ou class different a chaque style , Alan vient de te le dire on va pas le repeter 3fois.
Et l'heritage s'il est parfois contrariant, il est plus souvent avantageux.
Grilled ca fait 3fois

Quel courtoisie

On va essayer cette méthode alors... Disons que ça entraine quelques contraintes par rapport à la structure que j'avais prévu...

mego a écrit :

Disons que ça entraine quelques contraintes par rapport à la structure que j'avais prévu...

sinon tu annules l'héritage en spécifiant une autre valeur..

#centre ul li {
	background: green;
}
#centre div ul li {
	background: none;
}

Modifié par Alan (28 Jun 2006 - 16:55)

Alan a écrit :
ça n'empêchera pas l'héritage de #centre li vers #centre div li (ce qui était la question il me semble)

Peut-être vais-je passer pour un puriste, mais la question évoquée n'a rien à voir avec la notion d'héritage. Simplement les 2 sélecteurs #centre li et #centre div li ciblent des éléments communs, et lorsque certaines propriétés doivent être distinguées, il y a lieu d'en donner la valeur spécifique sur le sélecteur de poids le plus fort également. C'est une manière assez naturelle et logique de procéder, comme mentionné par Alan juste au dessus.

La notion d'héritage concerne le fait que la valeur d'une propriété pour un élément donné est parfois définie par la valeur de la même propriété sur le parent de l'élément. Sauf erreur, ici les éléments li n'ont pas de lien de parenté.

Pour revenir sur la question, il est donc inutile de modifier la structure et d'ajouter des attributs class ou id. Il suffit d'utiliser le sélecteur #centre div li, l'exemple d'Alan juste au dessus parle de lui-même.

Xavier a écrit :
Il suffit d'utiliser le sélecteur #centre div li

Ce sélecteur continuera de polluer sa deuxième liste puisqu'elle se trouve elle aussi dans une div, elle même contenue sans #centre. Donc mego, si tu veux pas donner de class ou d'id à ta liste (alors que ça pose aucun souçi vu que tu peux mettre autant de class que tu veux par élément), mes en une sur le div parent avec

#[i]maMegaNouvelleClasse[/i] li

, à condition que dans ce div tu n'est qu'une seule liste bien entendu.

Sur ce bonne journée à tous, le taf, c'est enfin fini pour aujourd'hui

Xavier, tu as tout à fait raison sur la notion d'héritage. En revanche l'ajout d'attribut "class=" me semble approprié.

Alan a écrit :
En revanche l'ajout d'attribut "class=" me semble approprié.

Alan, je serais tenter de te demander pourquoi l'attribut class est meilleur ici.

De mon coté je m'étais habitué au raisonnement suivant : lorsque plusieurs sélecteurs sont possibles pour cibler une catégorie d'éléments donnée, je crois préférable de choisir le plus générique.
Par ailleurs utiliser l'attribut class oblige à spécifier le contenu HTML, ce qu'il faut limiter lorsqu'il s'agit de traiter des questions de présentation. Enfin si l'attribut class à définir ici désigne une catégorie qui se superpose à celle définie par l'appartenance hiérarchique #centre div li, cette redondance introduit un concept inutile déjà naturellement présent dans la structure du document.

Je ne pense pas du tout que c'est le meilleur choix : comme dit dans mon premier message, le plus approprié serait d'utiliser le sélecteur d'enfant, ce qui n'obligerait pas à ajouter du code CSS ou HTML. Mais évidemment il y a IE...
Dans ce cas précis, je pense que Mego savait déjà viser uniquement la seconde liste (puisqu'il précise qu'il lui donne d'autres valeurs), mais ce qu'il le gênait, c'est que les styles spécifiés pour la première affectent aussi la seconde et donc doivent être corrigés. Par conséquent ce que tu lui as conseillé, et ce que j'ai indiqué dans mon troisième message, ce n'est ni plus ni moins que ce qu'il faisait déjà et cherchait à éviter. (c'est du moins ce que je comprends en relisant son premier message.)
Que ce soit continuer à faire ce qu'il fait, ou ajouter une classe ou un id, leus deux ont certains désavantages (minimes) sans être pour autant inappropriés. Dans un cas les désavantages qui gênent Mego, dans l'autre ceux que tu évoques. Avec le sélecteur d'enfant il n'y en aurait aucun.
Modifié par Alan (28 Jun 2006 - 22:33)

Merci à vous tous pour ces réponses !