How can you change the list-style-type to switch between lower-alpha and decimal on nested items within an ordered list?

I am attempting to reverse the list-style-type of nested items within an ordered list, including sub-items and sub-sub-items. I have tried using CSS counters but it doesn't seem to be working. Can anyone point out what I might be doing incorrectly?

ol{
    counter-reset: item
}

ol li{
    display: block;
    margin-left:5px;
}

ol[style*="list-style-type: lower-alpha;"] li:before{
    content: counters(item, ".", lower-alpha) ". ";
    counter-increment: item;
    text-transform: uppercase;
}

ol[style*="list-style-type: lower-alpha;"] li ol li:before{
    content: counters(item, ".", decimal) ". ";
    counter-increment: item;
    text-transform: uppercase;
}

The desired outcome is depicted in this image:

https://i.sstatic.net/6fpSi.png

You can also view a demonstration on JSFiddle

htmlcss

Answer №1

To ensure proper formatting, it is necessary to establish a counter for each individual layer within the structure.

ol{
    counter-reset: primary;
}
ol ol{
    counter-reset: secondary;
}
ol ol ol{
    counter-reset: tertiary;
}
ol li{
    display: block;
  margin-left:5px;
}

ol.list-root li:before{
    content: counters(primary, ".", upper-alpha) ". ";
    counter-increment: primary;
}

ol.list-root li ol li:before{
    content: counters(primary, ".", upper-alpha) "." counters(secondary, ".", decimal) ". " ;
    counter-increment: secondary;
}
ol.list-root li ol li ol li:before{
    content: counters(primary, ".", upper-alpha) "-" counters(secondary, ".", decimal) "-" counters(tertiary, ".", upper-alpha) ". " ;
    counter-increment: tertiary;
}
<ol class="list-root">
    <li>item A</li>
    <li>item B</li>
    <li>item C
        <ol>
            <li>sub-item</li>
            <li>sub-item</li>
            <li>sub-item</li>
            <li>sub-item
                <ol>
                    <li>sub-sub-item</li>
                    <li>sub-sub-item</li>
                    <li>sub-sub-item</li>
                    <li>sub-sub-item</li>
                </ol>
            </li>
        </ol>
    </li>
    <li>item</li>
    <li>item</li>
    <li>item</li>
</ol>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Having trouble with the JSFiddle dropdown button that is unresponsive to

I am currently in the process of developing a test drop-down menu. The open menu button functions correctly, however, the close button is unresponsive to clicking or hovering actions. Upon clicking the open menu button, it should make the other button visi ...

javascripthtmlcss

Unable to automate the selection of a dropdown menu using Selenium WebDriver

I am currently utilizing http://www.makemytrip.com/ This is the HTML code. <div class="mrgnBot30 clearFix"> <span class="watch_icn flL"></span> <div class="widget_inner clearFix suggest_me padBot15 flL"> <h3 class="clearFix has ...

javascripthtmldrop-down-menuwebdriverselenium-webdriver

Is there a way to align six columns on the left side and have a dynamic column on the right that fills the width of the browser window?

Is there a way to make a fluid container in Bootstrap 5 that contains a normal container on the left with 6 columns of content, while allowing the right side of the container to expand to the end of the browser window? When using a normal fluid container, ...

htmlcsstwitter-bootstrapcontainersbootstrap-5

What is the best way to eliminate the appearance of the blue square that shows up when the button is clicked on smaller screens?

When testing my project on different screen sizes in Chrome dev tools or on my phone, I noticed a blue square briefly appearing around the button when it is clicked. I attempted to remove this by setting outline: none or outline: 0 on various pseudo-classe ...

htmlcssbuttonclickoutline

forward various submit buttons to separate pages

I created a form in HTML with multiple choices, and I want each choice to redirect the user to a different page once clicked. Can anyone advise me on how to achieve this? I am coding in PHP. echo "<form action='home.php' method='po ...

phphtmlforms

Utilize flexGrow property to make Material UI Grid container expand dynamically

I've been working on a chat window layout that features my users on the left and messages on the right. However, I'm facing an issue with making both columns extend to the end of the viewport or footer. Below is the component code I'm using: ...

cssflexboxmaterial-ui

CSS fails to load on DJango platform

I am currently working with two apps in my project: Home and Header. The HTML code for the Home app can be found in project_folder -> home -> templates -> home -> base_home.html {% extends 'header/base_header.html' %} <!doctype h ...

cssdjangobootstrap-5

Adjust the height of a div using jQuery once the AJAX call retrieves the data

There is a div that always matches the height of the adjacent div, depending on the content loaded in it. This setup was functioning properly until I implemented a search feature using jQuery. Now, when I perform a search, the element used in the jQuery ca ...

javascriptjquerycssajax

Using HTML5 and an ASP.NET web method to allow for file uploads

My attempt to upload a file to the server using an HTML5 input control with type="file" is not working as expected. Below is the client-side JavaScript code I am using: var fd = new FormData(); fd.append("fileToUpload", document.getElementById(&ap ...

c#javascriptasp.nethtml

Obtain the row ID from a database by selecting checkboxes

I am facing a challenge when trying to remove a row from my MS Access database using checkboxes on my JSP page. Each row in the displayed database has a checkbox, but I am struggling to retrieve the rowId and link each checkbox with its respective row. Any ...

javascripthtmljspcheckbox

Steps for reverting a widget's background color to its default state following the utilization of gtk_css_provider_load_from_data()

Previously, I would adjust the background colors of widgets using gtk_widget_override_background_color. However, this function is no longer supported, so I am looking to migrate to utilizing GtkCssProvider. I have discovered that I can modify the backgrou ...

cssgtk3

pass user identification by using a link using php and MySQL

In my table of items, there is an option for users to delete or restore each item, using a special PHP file called 'delete.php'. print "<td>"; if ($row['deleted'] == 'y') { print "<a href='delete.php?id=2'& ...

phphtmlmysql

Having difficulties with Smooth Div Scroll and Colorbox integration

Check out the gallery page by following this link: http://www.gerardtonti.com/Scrollable%20Gallery%2/index.html After trying numerous methods, I am still facing the same issue. Upon discovering your jQuery Smooth Div Scroll tool online, I intend to contr ...

jqueryhtmlscrollcolorboxsmoothing

Styling the background of the endAdornment in a material-ui textfield using React

I tried following the instructions from this source: Unfortunately, the example code provided doesn't seem to be functioning properly now. Is there a way to achieve the same result without having that right margin so that it aligns better with the r ...

javascriptcssreactjsmaterial-uitextfield

Excess space noted at the bottom of tablet and mobile versions of the page

I'm struggling to troubleshoot an issue with the mobile and tablet versions of a web-shop I'm designing for university. Some pages have excessive space after the HTML tag, but only on certain pages. I've tried commenting out CSS lines relate ...

javascripthtmljquerycssbootstrap-5

Creating a responsive canvas and image container in fabric.js involves adjusting the layout and size of the

I am working with fabric.js and canvas to dynamically add an image from a URL. I would like to make the canvas responsive based on the resolution. How can this be achieved? Here is my current code: <canvas id="panel" width="700" height="350"></ ...

htmlfabricjs

How to insert additional spacing within an input tag class in dynamic HTML using jQuery

When creating an html table dynamically from json data, I encountered an issue with adding space inside my input button control. It seems that after separating two classes with a space, the code is not functioning properly in this snippet environment. Howe ...

jquerycssasp.net-mvcdynamic-html

Tips for creating CSS rules specifically for the default Android Browser using @media queries

Is there a CSS rule that can be applied only to the default Android Browser using @media queries? This rule should not affect Chrome, but only the default browser on Android devices. It's worth noting that there are numerous Android devices with vary ...

androidcss

Web Essentials is experiencing a problem with minified CSS

Today, while using Web Essentials 2013 for Update 3 with Visual Studio Express 2013 for Web, I encountered an issue with the minified CSS file. The website I am currently working on is built on a Twitter Bootstrap platform and utilizes two separate CSS fil ...

csstwitter-bootstrapweb-essentials

Bootstrap 4 cards continue to resize instead of adapting to the constraints of the designated space

I've been attempting to implement functionality with bootstrap 4 cards, but I'm running into issues where the card size expands based on the length of the text. Below is my code: <div class="row row-container"> <div class=& ...

htmlcssbootstrap-4