To change the color of a bullet in a list, which of the following should be done?
DigitalOcean provides cloud products for every stage of your journey. Get started with $200 in free credit! In my germinating years, the general advice was this: Not terrible, but not great. You’re “resetting” everything at the span
level, so it gets more complicated the more you do. Things are getting much easier. Let’s take a walk through this world getting more modern as we go. An alternative was to rip off the default list styling and replace it with a pseudo-element. If we need to count, we could do that with CSS counters. Quick aside here: this doesn’t help with the color, but you can specify what
character to use for the bullet by setting a string, like: This is as of Firefox 39 (2015) and Chrome 79 (which comes out Dec 9, 2019). For ordered lists, there is a ton of language-specific options. And those language styles work for CSS counters as well, which you can learn
more about in Hui Jing’s deep dive. See the Pen But all the while, we only wanted to select the stupid bullet (or whatever it is) and style it. Now we are starting to be able to do just that. As of Firefox 68 (July 2019), you can do like:
…which, as you can see, changes the color and the bullet thing That is definitely the cleanest and easiest way to go, so it’s nice to see progress. Tejas demonstrates: See the Pen Manuel Matuzović notes that if you set an element to a
Even Safari has support at the time of this writing, so we should lean on Chrome here. Desktop
Mobile / Tablet
You can create a list style for any kind of hierarchical list, from a simple one that includes just two levels of hierarchy, to a complex one that uses many styles of numbers and letters to define multiple levels. After you format a level of hierarchy, you update (redefine) the list style to incorporate that level. For example, if your list has five levels of hierarchy, you need to update your starting style five times to fully define the style. The process results in a single style that automatically formats a list with the same number of levels you defined. You can then use that style for other lists in your document.
Only formatting changes that you make in the Bullets & Lists section are included in the list style. Changes you make using the controls in the Font section (font, font color, and character styles) aren’t included. If you have a list style you use frequently, you can create a keyboard shortcut to apply it. |