Ordered List (Html) Lower-Alpha With Right Parentheses

Ordered list (HTML) lower-alpha with right parentheses?

Here's a neat solution. (Honestly I surprised myself with this.) CSS has something called counters, where you can set, for example, automatic chapter numbers on each heading. A bit of modification gives you the below; You'll need to sort out padding etc yourself.

ol {  counter-reset: list;}ol > li {  list-style: none;}ol > li:before {  content: counter(list, lower-alpha) ") ";  counter-increment: list;}

<span>custom list style type (v1):</span><ol>  <li>Number 1</li>  <li>Number 2</li>  <li>Number 3</li>  <li>Number 4</li>  <li>Number 5</li>  <li>Number 6</li></ol>

HTML5/CSS - ol with letters and parentheses?

I found this.

I don't have enough points to commend.
This is not my solution!

Found it here: Ordered list (HTML) lower-alpha with right parentheses?

Example on Jsfiddle

ol {
counter-reset: list;
margin: 0; }

ol > li {
list-style: none;
position: relative; }

ol > li:before {
counter-increment: list;
content: counter(list, lower-alpha) ") ";
position: absolute;
left: -1.4em; }

I think this is what you are looking for..?

Another answer can be found here:
How to remove dot “.” after number in ordered list items in OL LI? answered by Moin Zaman

Restrict styling of an ordered list with a class on the OL

It's because you also need your <ol> style on the second one. I just put the same class on the second one.

.test {width: 300px; background-color: #eee;}
ol.mylist_1_a{  list-style-type: none;  counter-reset: item;  margin: 0;  padding: 0;}
.mylist_1_a li {  display: table;  counter-increment: item;  margin-bottom: 0.6em;}
.mylist_1_a li:before {  content: counters(item, ".") ". ";  display: table-cell;  padding-right: 0.6em;}
.mylist_1_a li li {  margin: 0;}

.mylist_1_a li li:before {  content: counter(item, lower-alpha) ") ";}

<div class="test">  <ol class="mylist_1_a">    <li>First item      <ol class="mylist_1_a">        <li>Some very long text that goes on the next line</li>        <li>Short text</li>      </ol>    </li>    <li>Second item and some very long text that goes on the next line</li>  </ol></div>

CSS Selector [type= var ] not selecting lower-alpha versus upper-alpha

From the site you link to:

The value specified in an attribute selector is case sensitive if the attribute value in the markup language is case sensitive. Thus, values for id and class attributes in HTML are case sensitive, while values for lang and type attributes are not.

You are using a type attribute, which seems to be case-insensitive. Hence, with pure CSS, it's impossible to differentiate.

You might be stuck using JavaScript.

EDIT: Here's some JS to differentiate and add classes, a and A, respectively:

var alphaLists = document.querySelectorAll('ol[type="a"]');
for (var i = 0; i < alphaLists.length; i++) {
    if (alphaLists[i].type == 'a') {
        alphaLists[i].className += ' a';
    }
    if (alphaLists[i].type == 'A') {
        alphaLists[i].className += ' A';
    }
}

Fiddle

Ordered List (Html) Lower-Alpha With Right Parentheses