<ol> avec les chiffres d'une autre couleur

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

va montrer que:

  1. test
  2. test

Je veux avoir les numéros de couleur et de texte noir!

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

InformationsquelleAutor | 2009-01-28
  1. 107

    La CSS donne un exemple de le faire. Malheureusement, alors qu'il travaille sur Firefox 3, il ne fonctionne pas 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>
    • C'est cool, mais le ol start valeur de l'attribut n'est pas appliquée...
    • Ma seule critique avec la solution ci-dessus est que tout <li> des éléments à l'intérieur d'un <ul> sont maintenant 1. au lieu d'une balle.
    • dans le monde réel de la mise en œuvre, vous utilisez les sélecteurs de spécifier l'emplacement de ce style doit être appliqué.
    • Eh bien, @feelinferrety mis à jour sa réponse hier. Il a utilisé pour être que l'ajout de sélecteurs à sa solution, il le rompit pour ol, mais je vois qu'il a résolu le problème. La roche sur...
    • une autre approche serait d'utiliser l'enfant combinator, donc ol > li et ol > li::before -- de cette façon, vous seule cible de ce niveau spécifique de li éléments.
    • Vraiment Génial .. Fonctionne Parfaitement ... Merci

    InformationsquelleAutor kdgregory
  2. 24

    Ne sais pas si cela fonctionne mais je pense qu'il devrait:

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

    modifier

    Si vous ne pouvez pas modifier le code html puis j'ai peur que cela n'est pas possible. Si vous pouviez ajouter du javascript à la page HTML (une fois dans la tête) puis vous pouvez 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 ton CSS, il suffit de définir un rouge et un noir classe avec de la couleur:rouge/noir déclarations.

    • Je ne dirais pas inline-styles, mais c'est essentiellement la meilleure option.
    • Styles en ligne était juste pour montrer comment le faire, vous devez bien sûr de l'utilisation des classes comme je le fais dans l'exemple en javascript.
    InformationsquelleAutor Pim Jager
  3. 14

    Voici une solution adapte le texte pour chaque élément de la liste aligné à gauche en dessous de la première ligne (et pas en dessous le numéro de la 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;
}
    • C'est le plus propre réponse ici! Le css counter() a 97% soutien, trop. Spot sur.
    • Il convient de noter, toutefois, que le direct-descendant sélecteur c'est sans doute mieux d'utiliser par défaut, les listes imbriquées ne pas incrémenter ton compteur. Par exemple, .GreenNumbers > li garde contre cela.
    • C'est cool, mais il casse la ol start valeur de l'attribut...
    InformationsquelleAutor Peter Lairo
  4. 7

    Cela devrait faire ce que vous êtes à la recherche pour:

    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 aurez envie de changer la couleur et l'arrière-plan en fonction de votre conception.

    Cette prochaine exagéré, mais vous donne beaucoup d'informations sur la façon de style de listes:

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

    -Adam

    • C'est bien si vieux navigateur (IE 6, etc) n'est pas nécessaire.
    • "Pour le plus grand bien, sacrifices...) doit être fait..."
    • Si l'utilisateur désactive les CSS, il va montrer le nombre deux fois, ce qui ne sera pas très bon pour les lecteurs d'écran. Aussi, cela ne fonctionne que pour de simples chiffres. Dès que la liste comporte plus de 10 articles, seul le premier chiffre est en passe de changer de couleur.
    • Toutefois, cela crée du contenu supplémentaire dans le code HTML qui n'est pas souvent voulu.
    • Le lien au bas, print.wordpress.com de la poste a depuis disparu vers le bas, merci de le supprimer
    InformationsquelleAutor Adam Davis
  5. 3

    @kdgregory le code a fonctionné pour moi, mais il a touché mes listes à puces. J'ai changé li à ol li pour empêcher la balle des éléments touchés. Comme: 

    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 aussi utiliser les majuscules dans le CSS pour les éléments comme BODY pour que je puisse facilement distinguer des classes .body et id #body.

    InformationsquelleAutor Kimball
  6. 1

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

    Tout comme une note de côté, CSS3 permettra de facilement le style de la liste des marqueurs avec le
    ::marqueur pseudo-élément.

    Mais pour l'instant, il semble que vous devriez avoir à ajouter de l' <span> dans votre code html.

    InformationsquelleAutor notruthless
  7. 0

    D'étendre un peu sur ce que disaient les autres, ainsi que la question des précisions, il n'est pas intégré dans la façon de le faire à partir de CSS/w /o de toucher au code HTML. Si vous êtes à la recherche de garder le code HTML propre et sémantique que possible, je ferais le style à l'aide de javascript, probablement avec une librairie comme jQuery, pour régler les DOM ainsi que le css peut être plus efficace.

    Je mets en garde, cependant, l'utilisation de couleurs pour transmettre l'info. Je ne suis pas sûr de ce que le but de la couleur et de numéros, mais l'utilisation de la couleur pour afficher les informations des feuilles de colorblind les utilisateurs de la boucle et est un grand pas pas pour l'accessibilité.

    InformationsquelleAutor cdeszaq
  8. 0

    trop mauvais, vous ne pouvez pas modifier le code html... que diriez-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>

    si non, peut-être une bonne solution serait

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

    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 { list-style: none; padding-left: 10px; text-indent:0px; margin-left:5px;} 

ol li {color:#666;} 

ol li:first-letter {color:#69A8DE; padding-right:5px; margin-left:-15px;}
    • Live exemple: jsfiddle.net/PXg8X
    • <li> tag a été creted surtout pour la numérotation, si la désactivation, c'est la même, que de mettre tous les éléments dans <p> tag à la place
    InformationsquelleAutor joe
  10. -1

    C'est un peu tard pour cela, mais je veux le partager avec la communauté, m'a pris un long moment pour ce faire. J'ai trouvé une solution pour modifier l'OL numéros d'arrière-plan et la couleur qui fonctionne sur tous les navigateurs. Nécessite une balise à l'intérieur de la li.

    Voir ici

    InformationsquelleAutor caiocpricci2
  11. -3

    C'est facile, aussi longtemps que vous ne voulez pas assigner de différentes couleurs pour différents élément d'une liste de nombres. Pas de code HTML modifications nécessaires. Pourrait ne pas fonctionner à 100% des navigateurs mais..

    ol {color:red;}
ol li {color:black;}
    • ne fonctionne pas dans FF3 ou IE7
    • Mon mauvais.. eh bien il l'habitude de travailler.
    • Viens de vérifier, la solution ne fonctionne pas.
    InformationsquelleAutor D. Starr