Comment colorer les nombres générés automatiquement de type liste?
J'utilise la liste suivante:
<ol id="footnotes">
<a name="footnote1"><li></a>This is the first footnote...</li>
<a name="footnote2"><li></a>This is the second footnote...</li>
</ol>
Avec le .css suivant:
#footnotes {list-style-type: decimal;
list-style-color: #f90;
}
#footnotes li
{color: #000;
}
#footnotes a li,
#footnotes li a
{color: #f90;
}
Le but est que le texte li/footer lui-même soit noir (#000) et le numéro de couleur orange (#f90).
J'ai essayé d'utiliser le list-style-color propriété mais cela ne fait que bouleverser la barre d'outils du développeur Web (dans FF3.0.8/Ubuntu 8.04), Midori n'affiche pas non plus le nombre en orange (je pensais que je l'essayerais dans le moteur Webkit, juste au cas où. ..).
Des idées?
Modification du code HTML (puisque je me souvenais que la balise n'avait pas nécessairement besoin de contenir quoi que ce soit pour fonctionner comme une ancre):
<ol id="footnotes">
<li><a name="footnote1"></a>This is the first footnote...</li>
<li><a name="footnote2"></a>This is the second footnote...</li>
</ol>
En réponse à ceux qui suggèrent d'utiliser un <span> à l'intérieur de <li>...Ouais. Cela s'est produit, bien que je vous remercie pour les suggestions et le temps pris, mais je cherchais (li'l standardista que je suis ...;)) une option plus ... sémantique.
En l'état, je pense que je vais probablement utiliser cette approche. Bien que j'aie accepté une réponse différente, Pete Michaud, en raison de sa nature informative. Merci!
Eh bien, le kicker est que les nombres sont techniquement générés à l'intérieur du <li>, donc tout ce que vous faites au <li> affectera le nombre. De la spécification:
"La plupart des éléments de niveau bloc en CSS génèrent une zone de bloc principale. Dans cette section, nous discutons de deux mécanismes CSS qui font qu'un élément génère deux zones: une zone de bloc principale (pour le contenu de l'élément) et une zone de marqueur distincte (pour la décoration comme une puce, une image ou un numéro). "
Notez que la zone de marqueur et la zone principale appartiennent au même élément - dans ce cas, l'élément de liste. En conséquence, nous devons nous attendre à tous <li> style à appliquer à la fois au marqueur et au contenu. Cela n'est pas non plus surprenant si vous y pensez comme si l'élément de liste lui-même générait le contenu de numérotation (ce qu'il fait effectivement en termes CSS). Ceci est confirmé plus tard lorsque la spécification se poursuit:
"Les propriétés de liste permettent une mise en forme visuelle de base des listes. Comme pour les marqueurs plus généraux, un élément avec 'display: list-item' génère une boîte principale pour le contenu de l'élément et une boîte de marqueur facultative. Les autres propriétés de liste permettent aux auteurs de spécifier la type de marqueur (image, glyphe ou nombre) et sa position par rapport à la zone principale (à l'extérieur ou à l'intérieur avant le contenu). Ils ne permettent pas aux auteurs de spécifier un style distinct (couleurs, polices, alignement, etc.) pour le lister le marqueur ou ajuster sa position par rapport à la case principale. "
Donc, comme le marqueur appartient à la liste, il est affecté par le <li> style et n'est pas réglable directement. La seule façon d'obtenir un style différent pour le marqueur est d'insérer un <span> à l'intérieur de l'élément de liste et stylisez la plage avec les propriétés que vous souhaitez différer du marqueur.
Il existe un moyen dans CSS3, en utilisant Module de contenu généré et remplacé . Avec cette technique, vous n'avez pas besoin d'ajouter de balises supplémentaires à votre code HTML. Quelque chose comme ça devrait faire l'affaire:
ol li {
list-style-type: none;
counter-increment: list;
position: relative;
}
ol li:after {
content: counter(list) ".";
position: absolute;
left: -2.5em;
width: 2em;
text-align: right;
color: red;
}
Cela devrait fonctionner:
<ol id="footnotes">
<li><span>This is the first footnote...</span></li>
<li><span>This is the second footnote...</span></li>
</ol>
#footnotes li { color: #f90; }
#footnotes li span { color: #000; }
Cette solution CSS3 simple fonctionne dans la plupart des navigateurs (IE8 et plus):
ul {
padding-left: 14px;
list-style: none;
}
ul li:before {
color: #f90;
content: "•";
position: relative;
left: -7px;
font-size: 18px;
margin-left: -7px;
}
Vous devrez peut-être ajuster les valeurs padding et margin selon votre situation.
J'ai récemment rencontré un problème similaire et j'ai trouvé un article, Style des numéros de liste ordonnés , qui décrit une manière intelligente de réaliser le style des marqueurs de liste sans utiliser de balises supplémentaires . L'article dit essentiellement que pour une liste ordonnée:
La clé utilise le contenu généré par CSS pour créer et insérer les numéros de compteur après avoir supprimé la numérotation par défaut de la liste.
Pour plus de détails, veuillez consulter l'article.
Que dis-tu de ça?
<head>
<style>
#footnotes li { color: #f90; }
#footnotes li a { color: #000; }
</style>
</head>
<body>
<ol id="footnotes">
<li><a name="footnote1">This is the first footnote...</a></li>
<li><a name="footnote2">This is the second footnote...</a></li>
</ol>
</body>
En combinant certaines des autres réponses, que j'ai trouvées incomplètes, je trouve celle-ci la plus complète. Il considère sous-styles-types pour différents niveaux de la hiérarchie et considère qu'un li peut être plus d'une ligne (: après place en dernière ligne, nous utilisons donc : avant ).
Notez également la personnalisation du caractère latéral: 1. 1). Testé dans Chrome.
ol { counter-reset:li; }
ol li {
list-style-type:none;
counter-increment:li;
position:relative;
}
ol li:before {
content:counter(li) ")";
position:absolute;
left: -2.6em;
width: 2em;
text-align: right;
color: #f00;
}
ol ol li:before { content:counter(li,lower-alpha) ")"; }
ol ol ol li:before { content:counter(li,lower-roman) "."; }