Propriété first-child et sa logique

Bonjour à toutes et tous,
Je n'ai pas de soucis de CSS à proprement parler, juste une interrogation
Selon les standards émis par le W3C :

div > p:first-child { text-indent: 0 }

This selector would match the P inside the DIV of the following fragment:

<DIV class="note">
   <P>The first P inside the note.</P>
</DIV>

but would not match the P in the following fragment:

<DIV class="note">
   <H2>Note</H2>
   <P> The first P inside the note.</P>
</DIV>

J'ai un soucis avec cette spécification et la syntaxe du sélecteur css.
Pour exprimer ma pensée :

div > p 

Retourne la collection de paragraphe directement enfant d'un div et leur applique des règles (peu importe la ou les règle(s)).

div > p:first-child 

Devrait retourner le premier élément de cette collection.
Hors dans le cas actuel, cela retourne la collection de p qui seraient effectivement les premiers enfants directs de leur div parent (sans autre balises entre le div et le p).

Ma question est alors : comment faire pour matcher mon premier p dans ce second cas :

<DIV class="note">
   <H2>Note</H2>
   <P> The first P inside the note.</P>
   <P> The second P inside the note.</P>
</DIV>

Bon en fait je connais une réponse possible (on excepte tout de suite la classe sur le premier p : pas marrant ) :

div > h2 + p 

Mais dans l'idée, quel a été le raisonnement tenu lors de l'émission de cette spécification ?
Modifié par Sephyria (31 Jul 2009 - 11:55)

Salut,

a écrit :
quel a été le raisonnement tenu lors de l'émission de cette spécification

Tout comme Rome, qui n'était pas finie quand tomba la nuit, chaque nouvelle version des CSS ajoute de nouveaux sélecteurs. Ce que tu souhaites faire est possible depuis la version 3, maintenant que :first-child et :last-child ont de nouvelles copines et se font appeler les pseudo-classes structurelles.

a écrit :
Ma question est alors : comment faire pour matcher mon premier p dans ce second cas :

<DIV class="note"> 
   <H2>Note</H2> 
   <P> The first P inside the note.</P> 
   <P> The second P inside the note.</P> 
</DIV>

Dès que ce sera bien supporté, on fera simplement :

.note p:first-of-type

a écrit :
Tout comme Rome, qui n'était pas finie quand tomba la nuit, chaque nouvelle version des CSS ajoute de nouveaux sélecteurs.

Loin de moi l'idée de dire qu'il aurait fallu que ce soit fait ni même de critiquer.

J'aurais juste aimé connaître les avantages et inconvénients des deux fonctionnements.
Et surtout dans quel cas le :first-child "originel" était plus intéressant que le futur :first-of-type ?

Merci en tout cas ! J'avais pas encore lu toutes les specs du CSS3, j'aurais du
Toutefois, c'est pas pour demain la migration donc je ferais sans

a écrit :
Loin de moi l'idée de dire qu'il aurait fallu que ce soit fait smile ni même de critiquer.

J'avais bien compris, ma réponse n'était pas ironique (manquait peut-être un smiley )

a écrit :
dans quel cas le :first-child "originel" était plus intéressant que le futur :first-of-type ?

Il est intéressant si tu veux cibler un élément uniquement lorsqu'il n'y a pas d'autres enfants avant lui.

/* colore en vert le premier p de la div */
div p:first-of-type {
    background:green;
}

/* colore en vert le premier p de la div sauf s'il y a d'autres éléments avant lui. */
div p:first-child {
    background:green;
}

Modifié par marcv (01 Aug 2009 - 08:25)

Ca va faire tout bizarre de réapprendre de la syntaxe CSS quand sortira la v3 alors qu'on a rien appris de nouveau depuis des années.

mais non , ça va se faire tout seul , et on va voir fleurir plein de nouveau hack pour les navigateurs mourant .

Skoua a écrit :
quand sortira la v3

La v3 est organisée en modules qui évoluent indépendamment. Ces modules n'ayant pas la même priorité pour le groupe de travail, et certains étant plus simples et/ou moins débattus que d'autres, ils ne sont pas tous au même stade d'avancement. En clair, la V3 ne "sortira" pas en un bloc, mais morceau par morceau.

En plus, pour nous développeurs, ce qui compte n'est pas vraiment l'état d'avancement des specs, mais plutôt l'état de leur implémentation dans les navigateurs. Pour repartir sur l'exemple des pseudo-classes structurelles, si IE8 les supportait aujourd'hui (ce n'est pas le cas), pas mal de gens commenceraient probablement à les utiliser. Et pourtant la spec n'est même pas (plus) en Candidate Recommendation (stade 3 sur 5)... À l'inverse, SVG est une Recommandation depuis belle lurette (dernier stade, finalisée et tout), mais en l'absence de support natif sous IE, qui l'utilise en prod ?