CSS Pseudo Element Counters: Can You Increment an Alphabet Letter "A", "B", "C", etc Instead of a Number

ul {  counter-reset: numbers;  list-style-type: none;}
li:before {  padding-right: 1em;}
li:nth-of-type(2n+1)::before {  counter-increment: numbers;}
li:nth-child(odd)::before {  content: counters(numbers, "") ".0";}
li:nth-child(even)::before {  content: counters(numbers, "") ".5";}

<ul>  <li>Lorem</li>  <li>Lorem</li>  <li>Lorem</li>  <li>Lorem</li>  <li>Lorem</li>  <li>Lorem</li></ul>

What is a method that can be used to increment letters?

Simple, direct solution

function nextChar(c) {
    return String.fromCharCode(c.charCodeAt(0) + 1);
}
nextChar('a');

As others have noted, the drawback is it may not handle cases like the letter 'z' as expected. But it depends on what you want out of it. The solution above will return '{' for the character after 'z', and this is the character after 'z' in ASCII, so it could be the result you're looking for depending on what your use case is.

Unique string generator

(Updated 2019/05/09)

Since this answer has received so much visibility I've decided to expand it a bit beyond the scope of the original question to potentially help people who are stumbling on this from Google.

I find that what I often want is something that will generate sequential, unique strings in a certain character set (such as only using letters), so I've updated this answer to include a class that will do that here:

class StringIdGenerator {
  constructor(chars = 'abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ') {
    this._chars = chars;
    this._nextId = [0];
  }

  next() {
    const r = [];
    for (const char of this._nextId) {
      r.unshift(this._chars[char]);
    }
    this._increment();
    return r.join('');
  }

  _increment() {
    for (let i = 0; i < this._nextId.length; i++) {
      const val = ++this._nextId[i];
      if (val >= this._chars.length) {
        this._nextId[i] = 0;
      } else {
        return;
      }
    }
    this._nextId.push(0);
  }

  *[Symbol.iterator]() {
    while (true) {
      yield this.next();
    }
  }
}

Usage:

const ids = new StringIdGenerator();

ids.next(); // 'a'
ids.next(); // 'b'
ids.next(); // 'c'

// ...
ids.next(); // 'z'
ids.next(); // 'A'
ids.next(); // 'B'

// ...
ids.next(); // 'Z'
ids.next(); // 'aa'
ids.next(); // 'ab'
ids.next(); // 'ac'

How do I make li tags in a ol use letters

Use the list-style-type CSS property on the <ol> tag.

Eg.

ol {
    list-style-type: lower-alpha;
}

See here for the full list of options: http://www.w3schools.com/cssref/pr_list-style-type.asp

How can I make an ordered list go 1. 1.1, 1.2, A, B, C, 1.3, 1.4

If you want to target the third level of lis you can use the ol ol ol li selector. To use uppercase letters, you can use a counter() instead of counters() as with counters() the generated text is the value of all counters while with counter() it's the value of the innermost counter only.

If you set the counter style to upper-alpha the markers will be uppercase letters.

ol {
  list-style-type: none;
  counter-reset: item;
  margin: 0;
  padding: 0;
}

li {
  display: table;
  counter-increment: item;
  margin-bottom: 0.6em;
}

li:before {
  content: counters(item, ".") ". ";
  display: table-cell;
  padding-right: 0.6em;
}

li li {
  margin: 10px;
}

li li:before {
  content: counters(item, ".") " ";
}

.bolder {
  font-size: 1.17em;
  font-weight: bolder;
  margin: 0px;
}

.parent::before {
  font-size: 1.17em;
  font-weight: bolder;
}

ol ol ol li:before {
  content: counter(item, upper-alpha);
}

<ol>
  <li class="parent">
    <p class="bolder">How I want it to look like</p>
    <ol>
      <li>This is 1.1
        <ol>
          <li class="subItem">
            This is what I want to be A
          </li>
          <li class="subItem">
            This is what I want to be B
          </li>
          <li class="subItem">
            This is what I want to be C
          </li>
        </ol>
      </li>
      <li>
        Then it continues on with 1.2
      </li>
      <li>
        Then 1.3.. etc.
        <ol>
          <li class="subItem">
            This is what I want to be A
          </li>
          <li class="subItem">
            This is what I want to be B
          </li>
        </ol>
      </li>
    </ol>
  </li>
</ol>

var str= 'aaa',    s= str;
while(str!=='zzz') {  str= ((parseInt(str, 36)+1).toString(36)).replace(/0/g,'a');  s+= ' '+str;}
document.body.innerHTML= s;

$('.patch-cell').each(function() {
    var $this = $(this);
    // 1, 1.5, 2, 2.5, 3, 3.5...
    var number = $this.index() / 2 + 1;
    // A, B, A, B, A, B...
    var letter = $this.index() % 2 === 0 ? 'A' : 'B';
    $this.find('.fader-number').append(
        '<span class="patching-numbering">'
        // 1, 1, 2, 2, 3, 3...
        + Math.floor(number) 
        + letter 
        + "</span>");
});

$('.patch-cell').each(function() {
    var $this = $(this);
    var number = ($this.index() / 2 + 1).toString().split('.');
    $this.find('.fader-number').append(
        '<span class="patching-numbering">'
        + number[0] 
        + (number[1] !== '5' ? 'A' : 'B')
        + '</span>');
});

    public static String[] colArray(int length) {   

    String[] result = new String[length];

    String colName = "";
    for(int i = 0; i < length; i++) {

        char c = (char)('A' + (i % 26));
        colName = c + "";
        if(i > 25){
            colName =  result[(i / 26) - 1] + "" + c;
        }
        result[i] = colName;
    }
    return result;
}