CSS style for formatting content attribute

Question

CSS style for formatting content attribute

I have a list in numerical order where I utilize the counter feature within the content.

Query:

Is there a way to change the color of the numbers only (e.g. 1.2, 1.3, ...) to red using CSS without making any changes to the HTML code?

Note: Only seeking a solution using CSS (no need to alter the HTML structure!)

HTML:

<ol>
        <li>Item
            <ol>
                <li>Item</li>
                <li>Item
                    <ol>
                        <li>Item</li>
                        <li>Item</li>
                        <li>Item</li>
                    </ol>
                </li>
                <li>Item</li>
            </ol>
        </li>
        <li>Item</li>
        <li>Item</li>
    </ol>

CSS:

ol {
    list-style-type: none;
    counter-reset: item;
}
ol li:before {
    content: counters(item, ".")". ";
    counter-increment: item
}

Desired outcome:

html css

Answer 1

Answer №1

If you want to apply this style to all numbers, just include color:red; in your css for the numbers like so

ol li:before {
    content: counters(item, ".")". ";
    counter-increment: item;
    color:red;
}

http://jsfiddle.net/ZSkLE/3/

If you prefer to apply this style only to lower levels (as it seemed from your original question) you can try this approach.

ol li ol li:before {
    color:red;
}

To prevent the next level from being red, you can use the following code:

ol li ol li ol li:before {
    color:black;
}

http://jsfiddle.net/ZSkLE/1/

Answer 2

If you want to apply this style to all numbers, just include color:red; in your css for the numbers like so

ol li:before {
    content: counters(item, ".")". ";
    counter-increment: item;
    color:red;
}

http://jsfiddle.net/ZSkLE/3/

If you prefer to apply this style only to lower levels (as it seemed from your original question) you can try this approach.

ol li ol li:before {
    color:red;
}

To prevent the next level from being red, you can use the following code:

ol li ol li ol li:before {
    color:black;
}

http://jsfiddle.net/ZSkLE/1/

CSS style for formatting content attribute

Query:

HTML:

CSS:

Desired outcome:

Answer №1

Similar questions

Why isn't the document.getElementById().value() function functioning properly within my PHP code?

Shrink Table Column Size with Bootstrap and Stylus to Optimize Space Usage

Ways to verify if a div is empty following an ajax request

What crucial element is absent from my array.map function?

Is there a way to modify the appearance of a text box to suit individual preferences?

Unusual layout issues arise when combining images and text

Maintain user input within the table following a page refresh

Implementing dynamic class changes with *ngIf within a child component

The JavaScript script to retrieve the background color is malfunctioning

What is the reason for the leftward shift of the buttons?

Side Panel Extending Off Screen Upon Resizing

Using jQuery and JSON: selecting classes based on associated JSON strings

Choosing a language - Sending dropdown selection from HTML5 to PHP

Understanding fluid design concept

css: varying container heights for columns in Chrome and Safari using Bootstrap 4

When clicking, the drop-down feature is malfunctioning as all the menus are dropping down simultaneously

Merging Angular with jQuery: Organizing jQuery into a distinct file leads to the error message 'Property 'top' cannot be read because it is undefined.'

Using Custom .woff Format Fonts in Sendgrid: A Guide

When the content in one box exceeds the content in the other, one box is considered to be overfilled

Changing the text color of an active button in Bootstrap