special-case mod of ordered-list type

  • I wish to specify alternate type on my ordered lists in limited special instances. My efforts work when used directly in chrome but fail when I attempt to use on my wordpress site.

    I attempt this html:

    <ol type="A">
    <li>item</li>
    <li>item</li>
    <li>item</li>
  </ol>

    WordPress renders it with numbers. My WordPress theme’s style.css came with an entry for ordered lists that sets the list-style to none:

    ol, ul {
	list-style: none;
}

    Without modifying that bit of css, I have attempted to create what I believe should be a class specific version of the css.

    ol.aa {
	list-style-type: uppercase-alph;
}

    and set my list’s class to match:

    <ol type="A" class="aa">
  <li>item</li>
  <li>item</li>
  <li>item</li>
</ol>

    How do I special-case alter the type of my ordered-list, preferably, with as little style.css modifications as possible?

Viewing 6 replies - 1 through 6 (of 6 total)

  • “uppercase-alph” isn’t correct; it should be “upper-alpha”. Other than that, I can’t see anything particularly wrong. Can you post a link to a page that shows the issue?

    Also, be aware that if you edit your theme’s style.css directly, you’ll lose those changes if the theme is updated in the future. Best to use a child theme or a custom CSS plugin.

    Thread Starter adamsbriand

    (@adamsbriand)

    Thank you for your response.

    Apparently, I made a typo when I entered this into the forum post. However, the css was not mispelled.

    Here is a snippet taken directly from the html from the “view source” of the offending page

    <ol reversed="" start="6">
<li>Item one</li>
<li>Item two</li>
<li>Item three
<ol type="1">
<li>item 3.1</li>
<li>item 3.2</li>
<li>item 3.3</li>
</ol>
<ol type="I">
<li>item 3.1</li>
<li>item 3.2</li>
<li>item 3.3</li>
</ol>
<ol type="i">
<li>item 3.1</li>
<li>item 3.2</li>
<li>item 3.3</li>
</ol>
<ol type="A">
<li>item 3.1</li>
<li>item 3.2</li>
<li>item 3.3</li>
</ol>
<ol type="a">
<li>item 3.1</li>
<li>item 3.2</li>
<li>item 3.3</li>
</ol>
</li>
<li>item four</li>
</ol>

    The purpose here was only to test my ability to control the orderd list type within a wordpress page.

    Here is a portion of the css, navigated to from the show source:

      /*ol, ul {

      list-style: none;
      }*/

      ol.a { list-style-type: lower-alpha; }
      ol.i { list-style-type: lower-roman; }

    Yes, I did put this directly in style.css. I customized my theme a year or so ago and haven’t dealt with it since. Where is the correct place to have put my mods?

    I have since removed the problem html/css because I couldn’t get it to format to my specifications, but I’d love to know how to achieve this.

    Thread Starter adamsbriand

    (@adamsbriand)

    Using type="A", type="a", etc. should set the list style types correctly, but it’s possible that something else is interfering, which is why it’s important to see a live site. Your CSS currently doesn’t affect your lists.

    Yes, I did put this directly in style.css. I customized my theme a year or so ago and haven’t dealt with it since. Where is the correct place to have put my mods?

    If your theme has a built-in custom CSS option, use it; otherwise, you should use a custom CSS plugin.

    Thread Starter adamsbriand

    (@adamsbriand)

    With much embarrassment, , ,

    link to failing list

    It exists as the last item in the document.

    …ok, so maybe the link will work this time.

    I see what you’re trying to do (lines 704 to 726 in your stylesheet), but either your <ol> tags aren’t nested as you intended or you need to use the sibling selector:

    ol + ol {
list-style: upper-alpha;
}

ol + ol + ol {
list-style: lower-roman;
}

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

    Be aware that setting list-style: foo in CSS will override type="foo" on the <ol> tag itself. You may be better off setting individual classes for each <ol> and styling the individual class via CSS instead.

Viewing 6 replies - 1 through 6 (of 6 total)
  • The topic ‘special-case mod of ordered-list type’ is closed to new replies.