web-dev-qa-db-fra.com

Est-il possible de mettre en gras les nombres de la liste ordonnée?

Existe-t-il un sélecteur CSS permettant d’attacher du style à la partie numérique d’une liste ordonnée uniquement?

J'ai HTML comme:

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

Ce qui devrait produire:

1.a
2.b
3.c

J'ai besoin de faire 1., 2. et 3. gras, tout en laissant a, b, c régulier.

Je suis au courant du <span> solution de contournement...

csshtml-lists
53
notnull

Incrémentation compteur

[~ # ~] css [~ # ~] 

ol {
  margin: 0 0 1.5em;
  padding: 0;
  counter-reset: item;
}

ol > li {
  margin: 0;
  padding: 0 0 0 2em;
  text-indent: -2em;
  list-style-type: none;
  counter-increment: item;
}

ol > li:before {
  display: inline-block;
  width: 1em;
  padding-right: 0.5em;
  font-weight: bold;
  text-align: right;
  content: counter(item) ".";
}

DÉMO

86
dcodesmith

Environ un an plus tard, mais comme cela pourrait être intéressant aussi pour ceux qui viendront dans le futur:

Une autre possibilité simple consisterait à envelopper le contenu de l'élément de la liste dans un <p>, À définir le <li> En gras et le <p> À la normale. Cela serait également préférable du point de vue de l’IA, en particulier lorsque <li> Peut contenir des sous-listes (pour éviter de mélanger des nœuds de texte avec des éléments de niveau bloc).

Exemple complet pour votre commodité:

<html>
    <head>
        <title>Ordered list items with bold numbers</title>
        <style>
            ol li {
                font-weight:bold;
            }
            li > p {
                font-weight:normal;
            }
        </style>
    </head>
    <body>
        <ol>
            <li>
                <p>List Item 1</p>
            </li>
            <li>
                <p>Liste Item 2</p>
                <ol>
                    <li>
                        <p>Sub List Item 1</p>
                     </li>
                    <li>
                        <p>Sub List Item 2</p>
                     </li>
                </ol>
            </li>
            <li>
                <p>List Item 3.</p>
            </li>
        </ol>
    </body>
</html>

Si vous préférez une approche plus générique (qui couvrirait également d'autres scénarios tels que <li> Avec des descendants autres que <p>, Vous pouvez utiliser li > * Au lieu de li > p:

<html>
    <head>
        <title>Ordered list items with bold numbers</title>
        <style>
            ol li {
                font-weight:bold;
            }
            li > * {
                font-weight:normal;
            }
        </style>
    </head>
    <body>
        <ol>
            <li>
                <p>List Item 1</p>
            </li>
            <li>
                <p>Liste Item 2</p>
                <ol>
                    <li>
                        <p>Sub List Item 1</p>
                     </li>
                    <li>
                        <p>Sub List Item 2</p>
                     </li>
                </ol>
            </li>
            <li>
                <p>List Item 3.</p>
            </li>
            <li>
                <code>List Item 4.</code>
            </li>
        </ol>
    </body>
</html>

(Vérifiez l’élément de liste 4 ici qui est ol/li/code et pas ol/li/p/code ici. Assurez-vous d’utiliser le sélecteur li > * Et non li *, Si vous ne le faites que Vous souhaitez que les descendants de niveau bloc soient normalisés, mais pas également comme "foo <strong> bold Word </strong> foo".

20
Stefan Gentz

JSFiddle:

ol {
    counter-reset: item;
}
ol li { display: block }

ol li:before {
    content: counter(item) ". ";
    counter-increment: item;
    font-weight: bold;
}
19
KingKongFrog

j'ai eu un problème similaire en écrivant un bulletin d'information. j'ai donc dû aligner le style de cette façon:

<ol>
<li style="font-weight:bold"><span style="font-weight:normal">something</span></li>
<li style="font-weight:bold"><span style="font-weight:normal">something</span></li>
<li style="font-weight:bold"><span style="font-weight:normal">something</span></li>
</ol>
13
Giulio

Si vous utilisez Bootstrap 4:

<ol class="font-weight-bold">
    <li><span class="font-weight-light">Curabitur aliquet quam id dui posuere blandit.</span></li>
    <li><span class="font-weight-light">Curabitur aliquet quam id dui posuere blandit.</span></li>
</ol>
3
Ken Avila

Ceci est une mise à jour de la réponse de dcodesmith https://stackoverflow.com/a/21369918/16682

La solution proposée fonctionne également lorsque le texte est plus long (les lignes doivent être bouclées): Violon mis à jour

Lorsque vous utilisez un système de grille, vous devrez peut-être effectuer l’une des opérations suivantes (du moins cela s’applique à Foundation 6: impossible de le reproduire dans le violon):

  • Ajouter box-sizing:content-box; à la liste ou à son conteneur
  • OU changer text-indent:-2em; à -1.5em

P.S .: Je voulais ajouter ceci comme une édition à la réponse originale, mais elle a été rejetée.

3
Thomas Landauer

La réponse précédente a un effet secondaire qui transforme tous les types de listes en numériques. <ol type="a"> montrera 1. 2. 3. 4. plutôt que a. b. c. ré.

ol {
  margin: 0 0 1.5em;
  padding: 0;
  counter-reset: item;
}

ol > li {
  margin: 0;
  padding: 0 0 0 2em;
  text-indent: -2em;
  list-style-type: none;
  counter-increment: item;
}

ol > li:before {
  display: inline-block;
  width: 1em;
  padding-right: 0.5em;
  font-weight: bold;
  text-align: right;
  content: counter(item) ".";
}

/* Add support for non-numeric lists */

ol[type="a"] > li:before {
  content: counter(item, lower-alpha) ".";
}
ol[type="i"] > li:before {
  content: counter(item, lower-roman) ".";
}

Le code ci-dessus ajoute la prise en charge des lettres minuscules et des chiffres romains minuscules. Au moment de la rédaction du présent document, les navigateurs ne font pas la distinction entre les sélecteurs majuscules et minuscules pour le type. Vous ne pouvez donc choisir que des majuscules ou des minuscules pour vos types alternatifs, je suppose.

2
Digits

Je sais que c'est vieux, mais il y a aussi un moyen "rapide et sale" de ne pas utiliser <li> du tout:

<!-- <ul> is used for indentation only -->
<ul>
    <p> <b>1.</b> item text </p>
    <p> <b>2.</b> item text </p>
</ul>
0
Alex

Vous pouvez également mettre autour de a, b, c puis en gras le ul dans le css.

EXEMPLE

ul {
font-weight:bold;
}

<ul><li><span style="font-weight:normal">a</span></li></ul>
0
Lucas Kochek

Réponse assez tardive, mais j'espère que quelqu'un trouvera cela utile

J'ai eu une situation comme celle-ci:

  1. élément de la liste

    une. Élément de liste

Où le premier élément était <strong>, le sous-élément était le poids normal et le "1". juste ne serait pas gras.

Ma solution était via jQuery:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
    $(document).ready(function () {
        if ($('ol').has('li').has('strong')) {
            $('ol ').css('font-weight', 'bold');
            $('ol > li > ol').css('font-weight', 'normal');
        }
     });
</script>

Espérons que cela aide quelqu'un!

0
EGC

Un nouveau ::marker Le sélecteur de pseudo-éléments a été ajouté à pseudo-éléments CSS de niveau 4 , ce qui permet de styliser les numéros d’élément de liste en gras aussi simplement que

ol > li::marker {
  font-weight: bold;
}

Malheureusement, il n’ya actuellement que supporté par Firefox 68 et plus . (Voir Bogue Chrome 457718 pour le statut Chrome/Blink.)

0
Kevinoid