Sélecteur de frères adjacents, :before et content.

Bonjour,

Je n'ai habituellement pas de soucis avec le sélecteur de frères adjacents (+) sur les navigateurs récents. Mais aujourd'hui, couplé avec un :before et un content, ma règle CSS se comporte bizarrement et uniquement sous Chrome :x

Mon HTML est une liste simple :

<ul>
	<li><a href="#">Aide</a></li>
	<li><a href="#">Contact</a></li>
	<li><a href="#">Téléportation</a></li>
</ul>

Et je souhaite ajouter une barre | avant les 2 derniers éléments de la liste, donc je fais une règle CSS de ce type :

ul li + li:before {
	content:"|";
}

Il y a aussi un float:left; sur tous les <li>, un list-style:none; sur le <ul> et ce genre de chose.

Bref, il se trouve que çà marche très bien sur FF, Safari, Opera, IE9, surement IE7 et IE8 aussi. Mais sur Chrome, le content n'est généré que sur le dernier élément de la liste..

Alors est-ce un "bug" de Chrome, ou j'ai fais quelque chose qui ne va pas ?

Merci d'avance.
Modifié par mob (07 Apr 2011 - 11:29)

Bonjour,

Il me semble me souvenir d'avoir vu passer un tweet de Raphael qui disait la même chose que toi, que li+li:before passait plus sous chrome 10.
A confirmer mais il semble bien que ce soit chrome qui bug sur ce coup là

InpIxelItrust a écrit :
Il me semble me souvenir d'avoir vu passer un tweet de Raphael qui disait la même chose que toi, que li+li:before passait plus sous chrome 10.
A confirmer mais il semble bien que ce soit chrome qui bug sur ce coup là

Je confirme que Raphaël a évoqué ce bug lors de la conférence qu'il a donnée vendredi dernier.

Hum, j'crois que je me rappelle de ce tweet. J'vais essayer de retrouver sa page de test.

En effet, voici la page test.

Ce qui est bizarre, c'est que le content ne s'affiche nul part sur cette page mais sur ma page, il est généré quand même sur le dernier élément..

Fais chié. ^^
Modifié par mob (07 Apr 2011 - 11:39)

bonjour,

En usant de sélecteur différent et en désignant le premier de la liste recevant une règle différente , cela passerait mieux sous chrome.

ex:

li:before  {content:' | ';}
li:first-child:before  {content:'';}

GC

Ouep, c'est ce que j'ai fait

Merci en tout cas.

Heu... En fait la page de test fonctionne très bien chez moi sous chrome 10.0.648.204.
Tu es à quelle version mob ?
A ne rien y comprendre là !!

10.0.648.204 aussi..