Appliquer un style différent sur des éléments d'une liste

Bonjour à tout le monde,
j’ai une colle pour vous :

J’ai une liste d’éléments ordonnée en html (<ol>), je voudrai appliquer un style CSS différent entre le chiffre de la liste, et ce qu’il y a à l’intérieur du <li>.
Bien-sûr je veux éviter d'ajouter des balises supplémentaires (<span> par exemple) à l'intérieur des balises <li>.

Voici un exemple du code html :

<ol>
    <li>ligne a</li>
    <li>ligne b</li>
    <li>ligne c</li>
</ol>

Et voici le rendu que je souhaiterai avoir avec ce code :

a écrit :

1. ligne a
2. ligne b
3. ligne c

(les numéros sont en gras, mais pas le contenu des <li>).


Déjà, est-ce que c'est possible (rien est impossible ) ?
Je voudrai pouvoir y arriver sans faire appel à du code supplémentaire (comme par exemple ajouter des balises <span> dans les <li>) et sans faire appel à du JavaScript.

Le chalenge est ouvert ! (pour le moment moi je sèche )
Modifié par lafrite (16 Oct 2008 - 03:56)

Bonjour,

a écrit :
Je voudrai pouvoir y arriver sans faire appel à du code supplémentaire (comme par exemple ajouter des balises <span> dans les <li>)

Pour quelle raison (alors que c'est prévu pour) ?

On pourrait faire quelque chose comme ça, mais on oublie IE pour le coup…

ol {list-style:none; counter-reset:i}
li:before {content:counter(i); counter-increment:i; font-weight:700; margin-right:5px}

Cdt.,
Benjamin De Cock

Tu peux aussi essayer

ol li{
	font-weight: bold;
}

ol li:first-line{
	font-weight: normal;
}

Évidemment, dans ce cas cela ne marche que si le contenu de tes li ne revient pas à la ligne...

Gilles a écrit :
Tu peux aussi essayer

ol li{
	font-weight: bold;
}

ol li:first-line{
	font-weight: normal;
}

Évidemment, dans ce cas cela ne marche que si le contenu de tes li ne revient pas à la ligne...

De mémoire, Opera n'implémente pas :first-line de la même manière que le font Safari et Firefox.


edit: après test, Opera considère effectivement la puce numérotée comme faisant partie du contenu de :first-line et ne l'affiche donc pas en gras.
Modifié par Benjamin D.C. (16 Oct 2008 - 14:28)

Merci beaucoup pour vos réponses !

Je n'avai pensé ni à la technique du first-line, ni au :before avec un count (certainement par manque d'habitude de les utiliser à cause d'IE).

En tout cas la solution de Benjamin De Cock fonctionne bien sur Firefox, Opera, et uniquement la dernière version de Safari.

Celle de Gille fonctionne parfaitement sur Firefox et toute les version de Safari (mais pas Opera effectivement à cause de l'implémentation différente du first-line).

Donc déjà pour ces 3 navigateurs il y a moyen de faire en sorte que ça fonctionne partout.

Mais reste le problème d'IE...
Je vais essayer de trouver un truc pr que ça marche...
Encore merci pour vos réponses !
Modifié par lafrite (16 Oct 2008 - 17:24)