How can you utilize CSS to automatically generate section numbers, specifically for multiple sections?

Is it possible to automatically generate section numbering in CSS only when there are multiple sections present? I discovered that using CSS, one can create automatic numbering for sections.

body { counter-reset: section }
h2 { counter-reset: sub-section }
h3 { counter-reset: composite }
h4 { counter-reset: detail }

h2:before{
    counter-increment: section;
    content: counter(section) " ";
}
h3:before{
    counter-increment: sub-section;
    content: counter(section) "." counter(sub-section) " ";
}
h4:before{
    counter-increment: composite;
    content: counter(section) "." counter(sub-section) "." counter(composite) " ";
}
h5:before{
    counter-increment: detail;
    content: counter(section) "." counter(sub-section) "." counter(composite) "." counter(detail) " ";
}

This code will produce numbering like:

1.1 XXX

for HTML elements such as <h3>XXX</h3>, and:

1.1 XXX

...

1.2 XXX2

for HTML elements like:

<h3>XXX</h3>
...
<h3>XXX2</h3>

However, the numbering should be generated only if there are multiple <h3> tags in the HTML. Can this be achieved?

Answer №1

If all the <h3> tags are nested under the same parent, you can utilize the :not and :only-of-type selectors:

h3:not(:only-of-type)::before{
    counter-increment: sub-section;
    content: counter(section) "." counter(sub-section) " ";
}

The :only-of-type selector will specifically target elements that do not have any siblings of the same tag name. This means it will only select <h3> tags that are the sole <h3> within their parent element.

By using the negation in :not, the selector will now only match <h3> tags when there is more than one <h3> child within its parent.

In essence, this CSS rule translates to "Select all H3 elements that are not the only child H3 within their parent."

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

Ways to stop a hyperlink from executing on confirmation cancel using jquery

I'm having trouble with a link that should not perform any action when the cancel button is clicked. I've attempted to use false in the click event and also tried using e.preventDefault, but I'm unsure if I am implementing it correctly. Can ...

Tips for showcasing two cards side by side on mobile screens?

This is my glitch. I have a layout where I see 3 cards in a row for desktops, 2 cards per row on tablets, and 1 card for mobile devices. However, I would like the cards to resize and display 2 cards in a row on mobile. How can I achieve this? Here is the f ...

Is there a way to prevent the window.status from appearing?

I currently have the following code snippet: <a class="button accessLink" id="loginLink" href="#" data-action="Login" data-dialog="access" data-disabled="false" data-entity="n/a" ...

Scrollbar Excess in Windows 10 on Chrome Version 76

<div style="overflow-x: hidden"> <div style="height: 100%"> <p style="margin-bottom: 1rem"> lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam accumsan nisl id maximus gravida. </p> ...

Stop the Enter key from functioning as a mouse click

Whenever an element is focused on and a mouse click action can be triggered, I've observed that the Enter key functions as if you're clicking the mouse left button. This behavior is causing conflicts in other parts of my code, so I need to find a ...

Elements within the DIV tag are not displaying in a linear arrangement as intended

I'm having trouble creating a navbar with Bootstrap 4. The items in my div tag are not inline, and I can't align my nav item to the right. Here is the HTML code: <nav class="navbar navbar-inverse "> <div style="display:inline"> ...

A distinctive noise is heard when hovering over multiple instances of a div

I'm trying to implement a feature where a unique sound plays when hovering over a specific div element with a particular class (.trigger). However, I am encountering an issue where multiple instances of this div class result in the same sound being pl ...

Facing difficulties with the XPATH due to an inability to access specific parts of the HTML code

Currently, I am facing an issue where I need to click on a link using Selenium and Java. When searching for the link using XPath, I am encountering a problem where only white spaces are displayed instead of most of the webpage content. The highlighted link ...

Chrome does not support CSS animation rotation over 360 degrees

After researching for hours, I've encountered an issue with my animation in Chrome. It seems that while transform: rotate(1080deg); works flawlessly in Firefox, it fails to rotate in Chrome. Surprisingly, I discovered that it only rotates in Chrome wh ...

When I click on a tab section to expand it, the carat arrows all point upwards. Only the arrows corresponding to the selected section should

click here for imageIt appears that there are four tabs, each with a click function on the carat icon. When I expand one tab, all carats point upwards instead of only the selected one appearing. accountSelection(account) { if (!this.selectedAccoun ...

Disappear solely upon clicking on the menu

Currently, I am working on implementing navigation for menu items. The functionality I want to achieve is that when a user hovers over a menu item, it extends, and when they move the mouse away, it retracts. I have been able to make the menu stay in the ex ...

Is there a way to preserve the original color format without converting it to RGB

When applying a hsl color in JavaScript, it ends up being converted to RGB instead of staying as an HSL color. document.body.style.backgroundColor = "hsl(0,100%,50%)" document.body.style.backgroundColor; // "rgb(255, 0, 0)" I wanted to set an HSL color a ...

Encountering the issue "error TS2339: Property 'user' is not available on type 'Object'."

issue TS2339: The property 'user' is not found on the type 'Object'. export class UserAuthentication implements OnInit { user = new BehaviorSubject<Userlogin>(null); constructor( private route: ActivatedRoute, private rou ...

Implementing JavaScript functionality based on a specific body class

Is there a way to execute this script only on a specific page with a particular body class? For example, if the page has <body class="category-type-plp"> How can I target my script to work specifically for "category-type-plp"? plpSpaceRemove: fun ...

Can a custom spellchecking feature be integrated into an HTML textarea?

Question: I am wondering if it is feasible to incorporate a personalized spell checking feature into a Textarea field. Background: Currently, I am utilizing the b-form-textarea component from bootstrap-vue to present a textarea where users can input a li ...

Maintain the selected image

I am working on a program that allows users to choose images and I have given them the pseudo-class. .my_image_class:hover{ border:3px solid blue; -webkit-box-sizing: border-box; } This makes the images bordered in blue when hovered over, giving a "sele ...

Choose the tag and class then retrieve the custom attribute

I'm currently attempting to retrieve a specialized attribute utilizing jquery and subsequently choose it, nevertheless I am encountering some difficulties with the process Below is the jquery code I have implemented to access the value var stockId = ...

transfer a product attribute value to a different product attribute within the Magento platform

There is an attribute called Weight : Attribute Code: weight Scope: general Catalog Input Type for Store Owner: Text Field Values Required: yes Apply To: Simple Product, Bundle Product Allow HTML Tags on Frontend: yes Also, there is a General Weight attr ...

View complex response objects in Postman as easily digestible tables

I am interested in displaying the data provided below as a table using Postman Tests. The table should have columns for product, price, and quantity, with Items listed in rows. It's important to note that there may be multiple shippingGroups within th ...

The amazing feature known as "CSS3 background-clip"

Seeking a solution for restricting a background image to the text within an h2 element using -webkit-background-clip. Wondering if -moz-background-clip functions in the same way as -webkit-background-clip. As it currently only works in webkit browsers, it ...