28172 sujets

CSS et mise en forme, CSS3

Utiliser deux fois :nth-child() sur la même ligne

bonjour, voilà le html en question :


<body>
<div>
<section>
<div>section 1 div 1</div>
<div>section 1 div 2</div>
</section>
<section>
<div>section 2 div 1</div>
<div>section 2 div 2</div>
</section>
</div>
</body>

Impossible de styler avec ces lignes css :

body > div > section:nth-child(1) div:nth-child(1) {background:#f00}
body > div > section:nth-child(1) div:nth-child(2) {background:#f0f}
body > div > section:nth-child(2) div:nth-child(1) {background:#0ff}
body > div > section:nth-child(2) div:nth-child(2) {background:#ff0}

Quelqu'un a une solution svp ?
Salut,

Si le but est de faire un arc-en-ciel, sache que chez moi ça fonctionne.
Peut-être que ton navigateur n'est pas assez récent et ne supporte pas le CSS3 ?
merci pour l'aide j'utilise chromium 12.07 et firefox 6.0.2 et le but est simplement de donner une couleur différente à chaque div

EDIT : ok pardon je me suis trompé, l'exemple fonctionne bien j'ai bien un arc en ciel.
Mais quelque chose d'autre dans mon site l'empeche de bien fonctionner in situ, même avec des !important.

EDIT LE RETOUR : bizarre bizarre : "section:nth-child(odd)" fonctionne mais pas "section:nth-child(1)"
Modifié par raf59 (25 Dec 2011 - 20:51)
Administrateur
Bonjour et bienvenue,

je n'avais pas vu ton Edit, entre temps j'avais placé ton code sur Dabblet : http://dabblet.com/gist/1519638 et il fonctionne très bien sur Fx 9.0

Vérifie avec Firebug ou équivalent que ta feuille de style se charge bien (pas de 404) ou tu peux aussi placer le code dans un élément style
Modifié par Felipe (25 Dec 2011 - 20:50)
Sujet clos
Aller à