[Résolu] :first-child

Bonjour à tous et bonne année.

Une petite question car je bloque complet là. J'ai ceci :

<footer>
<a><img /></a>
<section></section>
<section></section>
<section></section>
<p></p>
</footer>

J'aimerais cibler ma première section avec ceci :

footer section:first-child

Mais ça ne fonctionne pas, j'ai essayé plusieurs combinaisons avec des variantes mais rien à faire (+ > etc.)

Et je sais que ce n'est pas utilisé uniquement pour les listes.

Quelqu'un pourrait-il m'éclairer ?
Merci et bonne fin de soirée.
Modifié par MagicCarpet (02 Jan 2013 - 13:42)

Bonjour,

Sinon section class=""

Adel1982 a écrit :
Ce n'est pas ton lien qui pose problème ?

J'ai enlevé la bloc a et img mais non, toujours pas.

J'ai oublié de préciser que mes sections sont ajouté par du jQuery mais bon, je ne pense pas que ça change quoi que ce soit...

Sinon, reste plus que la solution de rodolpheb, un class.

Merci pour vos réponses.

Salut,

Problème classique avec la pseudo classe :first-child. Cette pseudo classe pointe sur le premier élément DE SON PARENT ! Là je suis sur que tu pointes sur ton ancre ?


La solution de Rodolpheb est intéressante. Sinon, tu peux faire :

footer section:nth-child(2){...}/*même chose le nth-child se réfère à son parent d'où le 2*/

Modifié par niuxe (01 Jan 2013 - 23:44)

Bonjour,

Je confirme que :first-child est souvent très mal compris et ne correspond pas à ce que tu cherches.

- tu voudrais : "cibler le premier <section> dans <footer>"
- ton sélecteur cible "les éléments qui sont à la fois <section> et premier enfant".

Or dans ton cas, <section> n'est pas premier enfant, il a un frère aîné <a>. Il n'est donc logiquement pas ciblé.

La solution prévue par les spécifications pour cela est :
-> footer section:first-of-type (CSS3)

D'autres alternatives peuvent fonctionner si ta structure est toujours la même :
-> footer a + section (CSS2, cible <section> frère suivant un <a>)
-> footer section:nth-child(2) (CSS3, cible <section> si c'est le 2è enfant)

Rappel : les sélecteurs CSS3 fonctionnent sur tous les navigateurs... à partir d'IE9

Bonne journée

Super pour vos précisions, j'en prends soigneusement note.

EDIT : J'était passé à côté du first-of-type qui marche très bien dans mon cas.
Modifié par MagicCarpet (02 Jan 2013 - 13:43)

Raphael a écrit :
...
-> footer section:first-of-type (CSS3)
...

Merci Raphaël pour ce petit rappel. J'avais complètement zappé ce type de sélection.

Raphael a écrit :

....
-> footer a + section (CSS2, cible <section> frère suivant un <a>)
....

+1
J'ai hésité à proposer cette solution. Puisque normalement il y aura de l'héritage sur les frères suivants. Ce qui reviendrait à écrire :

footer>section{/*etc.*/}
footer a+section+section{/*annulation  des règles précédentes*/}

niuxe a écrit :
+1
J'ai hésité à proposer cette solution. Puisque normalement il y aura de l'héritage sur les frères suivants. Ce qui reviendrait à écrire :

footer>section{/*etc.*/}
footer a+section+section{/*annulation  des règles précédentes*/}

Ce que tu décris c'est avec ~ (tilde)
E+F ==> F suit immédiatement E
E~F ==> F se trouve après E mais il peut y avoir d'autres éléments intercalés

Quand on écrit li+li évidemment ça fonctionne sur toute une liste (li étant le seul descendant autorisé, ce ne sont pas les frères li qui manquent...). Mais là a est unique, donc a+section également.

Je proposerais bien :first-child + * mais j'ai peur de devoir sortir après ça