How do I make the OL override the list-style it was assigned to respect the type property

Question

The situation is that one of the stylesheet that comes with the theme has this ol { list-style: decimal; }. However, for this specific page, I want it to use the style defined by the type property of ol element.

Eg

<ol type='a'>
  <li>first</li>
  <li>Second</li>
</ol>

or

<ol type='i'>
  <li>first</li>
  <li>Second</li>
</ol>

I tried ol { list-style: initial} and ol { list-style: inherit}, but no luck.

Can someone give me a way to reset the applied style this using CSS?

check this out https://stackoverflow.com/questions/11737266/what-is-default-list-styling-css, it might be what you are looking for — Carlos Valencia, Nov 29 '17 at 15:03
@CarlEdwards My styles would be inline on the page. So this would have the most priority over others. — Suthan Bala, Nov 29 '17 at 15:15
@randomguy04 Thanks, that wasn't quite I was hoping for. Sorry, I updated the question just now — Suthan Bala, Nov 29 '17 at 15:15
but decimal is the default value for
, aren't you confusing
with
? — Carlos Valencia, Nov 29 '17 at 15:19
@SuthanBala Inline styling takes priority over anything defined in a stylesheet so are you sure you it written that way. An example would be this: `
...
` — Carl Edwards, Nov 29 '17 at 15:21
@randomguy04 Assigning the type property to `ol` would change the default to the specified type https://www.w3schools.com/html/html_lists.asp — Suthan Bala, Nov 29 '17 at 15:22

score 1 · Answer 1 · answered Nov 29 '17 at 16:07

When CSS property is defined in user styles globally, there is no way you can change this style from HTML attribute because of how CSS specificity is calculated.

list-style-type: initial Doesn't work either, it is used to reset to a browser, not theme default value.

So you'll have to write your own, more specific CSS. For this use case, you can use attribute selectors.

Then the result would be something like this:

HTML

 <ol type='a'>
   <li>first</li>
   <li>Second</li>
 </ol>
 <ol type='i'>
   <li>first</li>
   <li>Second</li>
 </ol>

CSS

/* Theme defined stylse */
ol {
  list-style: decimal;
}

/* Your page defined list */
ol[type='a'] {
  list-style-type: lower-alpha;
}
ol[type='i'] {
  list-style-type: lower-roman;
}

You can play with this code in codepen (codepen.io/Xopoc/pen/yPQBEM)

score 0 · Answer 2 · answered Nov 29 '17 at 15:34

The type attribute was deprecated in HTML4 and re-introduced in HTML5 [1]. It really shouldn't be used unless in legal documents. Ideally, you would override this in CSS. However, you can override the type attribute for a ordered list by putting a different type on each li [2]:

<ol type='i'>
  <li type="a">first</li>
  <li type="a">Second</li>
</ol>

As far as your example goes, here is a fiddle showing this technique working:

https://jsfiddle.net/jd5378mg/1/

Resources for refference:

How do I make the OL override the list-style it was assigned to respect the type property

2 Answers2

HTML

CSS