[résolu] Pseudo-classes :after, :before: et :first-child

Bonjour,

Je n'ai pas encore eu recours à ces 3 pseudo-classes et les infos que je trouve sur le net ne me paraissent pas claires.

:after et :before

Dans quel contexte puis-je les utiliser ? Sont-elles bien reconnues par les navigateurs ? Est-ce que je peux leur appliquer n'importe quel style ?

Par exemple : j'ai une image <img /> et je veux que le paragraphe qui suit cette image soit en rouge.

Est-ce que je dois écrire :

img:after {color:red;} ou img:after p{color:red;}

Aucun des deux ne me donne de résultat...

:first-child

Par exemple : je souhaite que le premier paragraphe de mon div soit en rouge

div > p:first-child{color:red;} ou div:first-child p{color:red;}

Pas de résultat de ce côté non plus...

Bref, malgré quelques exemple qui marchent comme :

p:before { content: open-quote }
p:after  { content: close-quote }

Je me demande comment utiliser ces pseudos-classes et surtout si elles sont utilisables...
Modifié par EricLB (10 Feb 2006 - 16:13)

Bonjour,

:after et :before ne sont pas des pseudos-classes, mais des pseudos-éléments. C'est à dire qu'il faut leur donner un pseudo-contenu via la propriété content, pour qu'ils existent : img:after {content: "foo"; color: red";}. A noter: Firefox a supprimé unilatéralement le support de img:after {content: attr(alt);} à la suite de difficultés à l'implémenter.

:first-child est un sélecteur CSS2.1 au support encore extrêmement limité en dehors de FF. Et le sélecteur correct serait div:first-child {...] si tant est que le premier enfant de div est bien un paragraphe, et non autre-chose. Autrement-dit, le rendu produit via ce sélecteur a de fortes chances de se casser la binette au moindre changement de structure au terme duquel le premier enfant de <div> ne sera plus un <p>...
Modifié par Laurent Denis (01 Feb 2006 - 13:05)

Merci Laurent pour cette réponse.

En effet, l'utilisation des pseudo-éléments :after et :before me semble limité... Quant au sélecteur :first-child, son utilisation ne me semble pas assez précise ni souple comme tu le fais remarquer en cas de changement de structure.

N'existe-t-il pas un moyen pour faire des mises en pages un peu plus complexes sans avoir recourt aux classes ou aux id ? par exemple : le premier paragraphe de chaque div est en italique, ou le paragraphe qui suit la balise <h1> est en rouge...etc... A moins qu'il faille passer par XML et XSL ?

Salut,
Il faut savoir que IE n'interprete pas les contenu généré (content...)
Il y a un site tres pratique pour savoir si tel ou tel browser interprete ou non
tel propriété :
http://wiki.media-box.net/documentation/css

Merci pour le lien Hermann, je connaissait déjà ce site qui est très intéressant , en revanche leur tableau de compatibilité a l'air d'avoir un problème...

Pour la question que j'évoquais dans mon précédent post :

a écrit :
par exemple : [...] le paragraphe qui suit la balise <h1> est en rouge...etc

Il y a :

 h1 + p {color:red}

, mais cette solution ne fonctionne pas avec IE, de plus ce n'est valable que si aucune autre balise ne vient s'intercaler entre le <h1> et le <p>.