web-dev-qa-db-fra.com

<ol> avec des chiffres d'une autre couleur

<ol>
   <li>test</li>
   <li>test</li>
</ol>

apparaîtra comme:

  1. tester
  2. tester

Je veux avoir des chiffres en couleur et du texte en noir!

Je peux éditer le css, mais je n'ai pas accès au HTML.

htmlcsscolorshtml-lists
53
depo

Le CSS spec donne un exemple de faire juste cela. Malheureusement, même s'il fonctionne sur Firefox 3, il ne semble pas fonctionner sur IE7:

<html>
<head>
    <style>
        ol { counter-reset: item; }
        ol li { display: block; }
        ol li:before {
            content: counter(item) ". ";
            counter-increment: item;
            color: red;
        }
    </style>
</head>
<body>
    <ol>
        <li>item</li>
        <li>item</li>
        <li>item</li>
    </ol>
</body>
</html>
107
kdgregory

Je ne sais pas si cela fonctionne, mais je pense que cela devrait:

<li style='color: red;'><span style='color:black;'>test</span></li>

modifier
Si vous ne pouvez pas modifier le html, je crains que ce ne soit pas possible. Si vous pouviez ajouter du javascript au HTML (une fois dans la tête) alors vous pourriez le faire comme ceci:

$(document).ready( function() {
 $('ol li').wrapInner('<span class="black"> </span>').addClass('red');
});

Vous aurez besoin de la bibliothèque jQuery pour cela.
Ensuite, dans votre CSS, configurez simplement une classe rouge et une classe noire avec des déclarations de couleur: rouge/noir.

24
Pim Jager

Voici une solution qui enveloppe également le texte de chaque élément de liste aligné à gauche sous la première ligne (et non sous le numéro de liste):

HTML 

<ol class="GreenNumbers">
   <li>Long text that might wrap onto a second line.</li>
   <li>Long text that might wrap onto a second line.</li>
   <li>Long text that might wrap onto a second line.</li>
</ol>

CSS 

.GreenNumbers {
    list-style-type: none;
}
.GreenNumbers ol {
    margin-left: 2em;
}
.GreenNumbers li {
    counter-increment: count-me;
}
.GreenNumbers li::before {
    content: counter(count-me) ". ";
    display: block;
    position: relative;
    max-width: 0px;
    max-height: 0px;
    left: -1.3em;
    top: .05em;
    color: #008000;
    font-weight: bold;
}
14
Peter Lairo

Cela devrait faire ce que vous cherchez:

http://archivist.incutio.com/viewlist/css-discuss/67894

HTML

<ol>
    <li>1 some text here</li>
    <li>2 some more text that can span longer than one line</li>
</ol>

CSS

ol { list-style: none; padding-left: 2em; text-indent: -1em;}

li:first-letter { float: left; 
                  font-size: ??; 
                  color: white; 
                  background: orange; 
                  line-height: 1.0; }

Sauf que vous voudrez changer la couleur et l'arrière-plan en fonction de votre conception.

Celui-ci est exagéré, mais vous donne beaucoup d'informations sur la façon de styliser les listes:

http://print.wordpress.com/2006/02/22/css-beautifully-numbered-lists/

-Adam

7
Adam Davis

Le code de @kdgregory a fonctionné pour moi, mais il a affecté mes listes à puces. J'ai changé li en ol li pour éviter que les puces ne soient affectées. Ainsi:

ol { counter-reset: item }
ol li { display: block }
ol li:before { content: counter(item) ". "; counter-increment: item; color: red; }

P.S. Je préfère également utiliser des majuscules en CSS pour des éléments comme BODY afin de pouvoir le distinguer facilement des classes .body et identifiants #body.

3
Kimball

D'une réponse à une question similaire j'ai trouvé ailleurs:

Tout comme une note latérale, CSS3 permettra un style facile des marqueurs de liste avec le pseudo-élément :: marker.

Mais pour l'instant, il semble que vous deviez ajouter le <span> à votre html.

1
notruthless

dommage que vous ne puissiez pas éditer le html ... que diriez-vous de js?

<script>
var x = document.getElementsByTagName('li');
for (i=0; i<x.length; i++) { x[i].innerHTML ="<span>" + x[i].innerHTML + "</span>" }

// or with jQuery
$('.li').each(function(){this.innerHTML="<span>" + this.innerHTML + "</span>" })
</script>

<style>
li {color: #DDD;}
li span {color: black;}
</style>

sinon, une solution suffisante serait peut-être

ol {background-color: #DDD;}
li {background-color: white;}
0
y34h

Pour développer un peu ce que les autres ont dit, ainsi que des clarifications supplémentaires sur les questions, il n'y a aucun moyen intégré de le faire à partir de CSS sans toucher au HTML. Si vous cherchez à garder le HTML aussi propre et sémantique que possible, je ferais le style en utilisant javascript, probablement avec une bibliothèque comme jQuery, pour ajuster le DOM afin que le CSS puisse être plus efficace.

Je voudrais toutefois mettre en garde en utilisant la couleur pour transmettre des informations. Je ne sais pas quel est le but des nombres colorés, mais l'utilisation de la couleur pour afficher des informations laisse les utilisateurs daltoniens hors de la boucle et est un grand non pour l'accessibilité.

0
cdeszaq

html:

    <ol>
    <li>1 A long bullet here it is long to show how it behaves on a second line</li>
    <li>2 A long bullet here it is long to show how it behaves on a second line</li>
    <li>3 A long bullet here it is long to show how it behaves on a second line</li>
    <li>4 A long bullet here it is long to show how it behaves on a second line</li>
    <li>5 A long bullet here it is long to show how it behaves on a second line</li>
    </ol>

css:

 
 ol {style de liste: aucun; rembourrage à gauche: 10 pixels; retrait de texte: 0px; margin-left: 5px;} 
 
 ol li {color: # 666;} 
 
 ol li: première lettre {color: # 69A8DE; rembourrage à droite: 5 pixels; marge gauche: -15px;}
0
joe