Hi,

Je viens de découvrir dans une longue feuille de style css que 2
sélecteurs identiques étaient présents :

En simplifiant : on a ligne 10
#nav{padding:0;
width:5em;
color:white;}

et ligne 500 :
#nav{padding:2em;
width:10em;}

Que se passe t-il dans ce cas ?
- est-ce que les déclarations contenus dans les règles se mélangent et
que les déclarations l'emportent sur d'autres ?
- celle située le plus bas l'emporte ?
On aura padding:0 ou padding 2em ?

En faisant des essais, je n'arrive pas à trouver ce qui se passe
vraiment. De plus je n'ai pas IE 6 et 7 - donc je n'ose pas faire de
transformations sans pouvoir vérifier sur ces 2 navigateurs terroristes.

Qu'en pensez-vous, outre le fait qu'évidemment il faille proscrire ce
genre de chose.

Merci
--
A+

Romer

Bernd wrote:
> Je viens de découvrir dans une longue feuille de style css que 2
> sélecteurs identiques étaient présents :
>
> En simplifiant : on a ligne 10
> #nav{padding:0;
> width:5em;
> color:white;}
>
> et ligne 500 :
> #nav{padding:2em;
> width:10em;}
>
> Que se passe t-il dans ce cas ?

Voir la recommandation :
http://www.w3.org/TR/CSS21/cascade.html#cascading-order

A ma connaissance les règles sont bien suivies quelques soit le navigateur

Pierre Goiffon <pgoiffon@free.fr.invalid> wrote:

> Voir la recommandation :
> http://www.w3.org/TR/CSS21/cascade.html#cascading-order
>
> A ma connaissance les règles sont bien suivies quelques soit le navigateur

Je retiens cela:
"if two declarations have the same weight, origin and specificity, the
latter specified wins".

Merci du lien ; cependant cela ne répond pas tout à fait à mon cas
particulier de sélecteurs identiques contenant des déclarations
différentes. Cela n'est pas étonnant en fait car le cas où 2 sélecteurs
identiques se trouvent dans la même feuille est aberrant en soi et ce
cas n'est sans doute pas envisagé.
--
A+

Romer

Bernd a écrit :
> Merci du lien ; cependant cela ne répond pas tout à fait à mon cas
> particulier de sélecteurs identiques contenant des déclarations
> différentes.

Ben si, c'est que que tu as cité.

> Cela n'est pas étonnant en fait car le cas où 2 sélecteurs
> identiques se trouvent dans la même feuille est aberrant en soi

Ben non. Pourquoi ?

> et ce cas n'est sans doute pas envisagé.

Ben si, et c'est la dernière déclaration qui écrase la précédente.

tr#odd { background: 1px dashed black ; }
tr#odd { background: 2px solid ; }

Au final ça donnera :

tr#odd { background: 2px solid black ; }

--
Mickaël Wolff aka Lupus Michaelis
http://lupusmic.org

Bonjour,

Vous allez être infiniment heureux d'apprendre que Bernd vient d'écrire :


> ... De plus je n'ai pas IE 6 et 7 - donc je n'ose pas faire de
> transformations sans pouvoir vérifier sur ces 2 navigateurs
> terroristes.

Faut pas travailler pour des terroristes

--
Cordialement

guy.siaurg@free.invalid (inverser siaurg pour retrouver gruais)
http://paysderetz.free.fr/

Bernd wrote:
>> Voir la recommandation :
>> http://www.w3.org/TR/CSS21/cascade.html#cascading-order
>
> Je retiens cela:
> "if two declarations have the same weight, origin and specificity, the
> latter specified wins".
>
> Merci du lien ; cependant cela ne répond pas tout à fait à mon cas
> particulier de sélecteurs identiques contenant des déclarations
> différentes.

Je ne comprend pas votre dernière réponse.

Reprenons l'exemple que vous donniez :

on a ligne 10
#nav{padding:0;
width:5em;
color:white;}

et ligne 500 :
#nav{padding:2em;
width:10em;}

Donc sur un même sélecteur les 2 propriétés padding et width définis à
des valeurs différentes.
Comme vous l'avez lu, le dernière déclaré "gagne"

Mickaël Wolff <mickael.wolff@laposte.net> wrote:

> > Cela n'est pas étonnant en fait car le cas où 2 sélecteurs
> > identiques se trouvent dans la même feuille est aberrant en soi
>
> Ben non. Pourquoi ?

Quel intérêt sinon par oubli de mettre deux sélecteurs identiques plutôt
qu'un si le 2e écrase le 1er ?

> Ben si, et c'est la dernière déclaration qui écrase la précédente.
>
> tr#odd { background: 1px dashed black ; }
> tr#odd { background: 2px solid ; }
>
> Au final ça donnera :
>
> tr#odd { background: 2px solid black ; }

Dans mon cas, légèrement différent, je viens de faire des essais, ce
n'est pas aussi simple - je crois, sans pouvoir en être sûr qu'on
obtient un mélange des deux.

tr#odd { background: 1px dashed black ;
width:2em;}
tr#odd { background: 2px solid ; }

se comporte comme :

tr#odd { background: 2px solid ;
width:2em;}




--
A+

Romer

Pierre Goiffon <pgoiffon@free.fr.invalid> wrote:

> Je ne comprend pas votre dernière réponse.
>
> Reprenons l'exemple que vous donniez :
>
> on a ligne 10
> #nav{padding:0;
> width:5em;
> color:white;}
>
> et ligne 500 :
> #nav{padding:2em;
> width:10em;}
>
> Donc sur un même sélecteur les 2 propriétés padding et width définis à
> des valeurs différentes.
> Comme vous l'avez lu, le dernière déclaré "gagne"

Oui si les déclarations sont strictement identiques dans les 2 règles
mais sinon, j'ai l'impression que Safari et Fiefox mélange les
déclarations en ne gardant que les éléments en commun dans les deux.

Dans l'exemple précédent, on obtient apparemment :

#nav{padding:2em;
width:10em;
color:white;}

Donc, la couleur présente en lg 10 se retrouve au final - ce qui
contredirait la thèse de l'écrasement pur et simple.
L'ennui est que je ne sais pas ce que IE va faire et c'est ce qui me
fait hésiter à modifier les 2 règles pour en faire une seule.
--
A+

Romer