Custom OL in HTML

Question

I'd like to make an custom OL, these should display letters and no vowels. This means that the first list item would be C for example, then goes D, then skips E and goes to F.

EDIT: someone flagged this as a duplicate. I have searched for the increment, no vowels and starting at C but did not find anything specified as such.

I've tried this

<ol type="A">
<li>Here is C </li>
<li>Here is D</li>
<li>Here is F</li>
<li>Here is G</li>
</ol>

Answer 1

How you want to do this depends on which browsers you want to support, and on what purpose you're using it for.

Method 1:

Let's have the bad news first: at the time of writing, Mozilla only.

There's a fairly new @-rule in CSS3, @counter-style, which does exactly what you want.
You can use this if you just want to display any old sequence of symbols for the list counter rather than the regular incrementing values. In this case, if your reasoning is that you don't like vowels or something.

@counter-style novowels {
  system: fixed;
  symbols: B C D F G H J K L M N P Q R S T V W X Z;
  suffix: " ";
}
.consonants > li {
  list-style: novowels;
}

<ol class="consonants">
  <li>Here is B</li>
  <li>Here is C</li>
  <li>Here is D</li>
  <li>Here is F</li>
  <li>Here is G</li>
</ol>

(Please note that I also reinstated the B, as per the comments to the question.)

Method 2:

If the list items actually refer to the consonants themselves; that is, the counter items have semantic meanings, it's better to just use the regular upper-alpha and put the values of the letters in the list items (where A has the value 1, B is 2 etc).

.consonants {
  list-style: Upper-alpha;
}

<ol class="consonants">
  <li value="2">Here is B</li>
  <li value="3">Here is C</li>
  <li value="4">Here is D</li>
  <li value="6">Here is F</li>
  <li value="7">Here is G</li>
</ol>

Although the values really are only needed in places where the range is non-sequential (in this case, value="2" and value="6" are necessary), it's more clear to put all of them in, to show which item means what.