Is there a way to make numbers in an ordered list bold

Question

Is there any CSS selector to attach some style to the numerical part of an ordered list only  I have HTML like   lt ol gt      lt li gt a lt  li gt      lt li gt b lt  li gt      lt li gt c lt  li gt   lt  ol gt   Which should output  1 a 2 b 3 c  I need to make 1   2  and 3  bold  while leaving a  b  and c regular  I am aware of the  lt span gt  workaround

User · Answer

If you are using Bootstrap 4   lt ol class  quot font-weight-bold quot  gt       lt li gt  lt span class  quot font-weight-light quot  gt Curabitur aliquet quam id dui posuere blandit  lt  span gt  lt  li gt       lt li gt  lt span class  quot font-weight-light quot  gt Curabitur aliquet quam id dui posuere blandit  lt  span gt  lt  li gt   lt  ol gt

User · Answer

Another easy possibility would be to wrap the list item content into a  lt p gt   style the  lt li gt  as bold and the  lt p gt  as regular  This would be also preferable from an IA point of view  especially when  lt li gt s can contain sub-lists  to avoid mixing text nodes with block level elements   Full example for your convenience   lt html gt       lt head gt           lt title gt Ordered list items with bold numbers lt  title gt           lt style gt              ol li                   font-weight bold                            li  gt  p                   font-weight normal                         lt  style gt       lt  head gt       lt body gt           lt ol gt               lt li gt                   lt p gt List Item 1 lt  p gt               lt  li gt               lt li gt                   lt p gt Liste Item 2 lt  p gt                   lt ol gt                       lt li gt                           lt p gt Sub List Item 1 lt  p gt                        lt  li gt                       lt li gt                           lt p gt Sub List Item 2 lt  p gt                        lt  li gt                   lt  ol gt               lt  li gt               lt li gt                   lt p gt List Item 3  lt  p gt               lt  li gt           lt  ol gt       lt  body gt   lt  html gt   If you prefer a more generic approach  that would also cover other scenarios like  lt li gt s with descendants other than  lt p gt   you might want to use li  gt    instead of li  gt  p   lt html gt       lt head gt           lt title gt Ordered list items with bold numbers lt  title gt           lt style gt              ol li                   font-weight bold                            li  gt                      font-weight normal                         lt  style gt       lt  head gt       lt body gt           lt ol gt               lt li gt                   lt p gt List Item 1 lt  p gt               lt  li gt               lt li gt                   lt p gt Liste Item 2 lt  p gt                   lt ol gt                       lt li gt                           lt p gt Sub List Item 1 lt  p gt                        lt  li gt                       lt li gt                           lt p gt Sub List Item 2 lt  p gt                        lt  li gt                   lt  ol gt               lt  li gt               lt li gt                   lt p gt List Item 3  lt  p gt               lt  li gt               lt li gt                   lt code gt List Item 4  lt  code gt               lt  li gt           lt  ol gt       lt  body gt   lt  html gt    Check the list item 4 here which is ol li code and not ol li p code here   Just make sure to use the selector li  gt    and not li    if you only want to style block level descendants as regular  but not also inlines like  quot foo  lt strong gt bold word lt  strong gt  foo  quot

User · Answer

Answer https   stackoverflow com a 21369918 2526049 from dcodesmith has a side effect that turns all types of lists numeric   lt ol type  quot a quot  gt  will show 1  2  3  4  rather than a  b  c  d  ol     margin  0 0 1 5em    padding  0    counter-reset  item     ol  gt  li     margin  0    padding  0 0 0 2em    text-indent  -2em    list-style-type  none    counter-increment  item     ol  gt  li before     display  inline-block    width  1em    padding-right  0 5em    font-weight  bold    text-align  right    content  counter item   quot   quot         Add support for non-numeric lists     ol type  quot a quot    gt  li before     content  counter item  lower-alpha   quot   quot     ol type  quot i quot    gt  li before     content  counter item  lower-roman   quot   quot      The above code adds support for lowercase letters  lowercase roman numerals  At the time of writing browsers do not differentiate between upper and lower case selectors for type so you can only pick uppercase or lowercase for your alternate ol types I guess

User · Answer

This is an update for dcodesmith s answer https   stackoverflow com a 21369918 1668200  The proposed solution also works when the text is longer  i e  the lines need to wrap   Updated Fiddle  When you re using a grid system  you might need to do one of the following  at least this is true for Foundation 6 - couldn t reproduce it in the Fiddle     Add box-sizing content-box  to the list or its container OR change text-indent -2em  to -1 5em   P S   I wanted to add this as an edit to the original answer  but it was rejected

User · Answer

Pretty late answer  but hopefully someone will find this useful I had a situation like this   List item a  List item   Where the first item was  lt strong gt   the sub-element was normal weight and the  1   just wouldn t bold  My solution was via jQuery   lt script src  quot http   ajax googleapis com ajax libs jquery 1 7 1 jquery min js quot  type  quot text javascript quot  gt  lt  script gt   lt script type  quot text javascript quot  gt        document  ready function              if     ol   has  li   has  strong                     ol    css  font-weight    bold                   ol  gt  li  gt  ol   css  font-weight    normal                        lt  script gt   Hopefully this helps someone

User · Answer

JSFiddle   ol       counter-reset  item    ol li   display  block    ol li before       content  counter item            counter-increment  item      font-weight  bold

User · Answer

Counter-increment  CSS  ol     margin  0 0 1 5em    padding  0    counter-reset  item     ol  gt  li     margin  0    padding  0 0 0 2em    text-indent  -2em    list-style-type  none    counter-increment  item     ol  gt  li before     display  inline-block    width  1em    padding-right  0 5em    font-weight  bold    text-align  right    content  counter item           DEMO

User · Answer

I had a similar issue while writing a newsletter  So I had to inline the style this way   lt ol gt       lt li style  quot font-weight bold quot  gt  lt span style  quot font-weight normal quot  gt something lt  span gt  lt  li gt       lt li style  quot font-weight bold quot  gt  lt span style  quot font-weight normal quot  gt something lt  span gt  lt  li gt       lt li style  quot font-weight bold quot  gt  lt span style  quot font-weight normal quot  gt something lt  span gt  lt  li gt   lt  ol gt

User · Answer

A new   marker pseudo-element selector has been added to CSS Pseudo-Elements Level 4  which makes styling list item numbers in bold as simple as ol  gt  li  marker     font-weight  bold     It is currently supported by Firefox 68   Chrome Edge 86   and Safari 11 1

User · Answer

You also could put  lt span style  quot font-weight normal quot  gt  around a b c and then bold the ul in the CSS  Example ul       font-weight  bold      lt ul gt  lt li gt  lt span style  quot font-weight normal quot  gt a lt  span gt  lt  li gt  lt  ul gt

[css] Is there a way to make numbers in an ordered list bold?

Examples related to css

Examples related to html-lists