Developing a hierarchical arrangement of heading elements using CSS adjacent selectors

I am exploring ways to improve the flow of my headers by adjusting their indentation based on their parent element. For example, I want H1 to have no indent, but if H2 follows H1, then indent it slightly. The same goes for H3 following H1 or H2, and so on, creating a cascading effect. Additionally, I would like to apply an indent to the content after each header tag. After conducting research, I attempted to achieve this using the following CSS code:

h1 {margin-left:0em;}
h1 ~ *:not(h1) {margin-left: 1em;}
h2 ~ *:not(h2) {margin-left: 2em;}

However, this solution falls short when another H1 is introduced, as demonstrated below:


Heading 1
    Heading 2.1
        Paragraph 2.1.1
        Paragraph 2.1.2
        Paragraph 2.1.3
    Heading 2.2
        Paragraph 2.2.1
        Paragraph 2.2.2
        Paragraph 2.2.3
        Heading 1.2 <this is wrong???
    Heading 2.1
        Paragraph 2.1.1
        Paragraph 2.1.2
        Paragraph 2.1.3
    Heading 2.2
        Paragraph 2.2.1
        Paragraph 2.2.2
        Paragraph 2.2.3

I am aiming to accomplish this without relying on JavaScript, only utilizing CSS. Is there a way to achieve this effectively?

htmlcsscss-selectors

Answer №1

It's puzzling to me why you would want to go this route instead of simply always indenting h2 elements. However, I'll assume you have your reasons. To resolve this issue, you can adjust the specificity of the h1 selector to ensure it takes precedence over the other selectors:

html body h1 {margin-left:0em;color: red;}
h1 ~ *:not(h1) {margin-left: 1em;color: blue;}
h2 ~ *:not(h2) {margin-left: 2em;color: green}

By doing so, even though the second h1 meets the criteria of both the first and third selectors, the first one will now be given priority due to its increased specificity.

http://jsfiddle.net/LUPD5/

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

How can we prevent checkbox and radio buttons from being triggered by accidental taps on the surrounding area on touch-responsive devices?

On touch screen responsive devices, there seems to be an issue where clicking outside the checkbox or radio button (within about 8px) causes the checkbox or radio button to toggle. This problem only occurs on responsive touch devices and works fine on desk ...

javascripthtmlcheckboxbootstrap-4radio-button

Is there a way to refresh only a specific div when clicked?

My preferred tech stack includes Django and Python. Here is the scenario: In models.py : class Contacts(models.Model): lastname = models.CharField(max_length=150) firstname = models.CharField(max_length=150) In views.py def home(request): ...

jqueryhtmlajaxdjangoreload

Adjust the scrolling rate of a particular element

I need help figuring out how to script this faster scrolling speed for a specific item. Is it possible in either HTML or CSS? ...

htmlcss

How can we effectively combine local and global selectors when referencing them using JS CSS-modules?

I need assistance with a specific task in my React project, where I am utilizing the Ant Design framework along with css-modules bundling. My goal is to target certain Ant classes based on the parent div's generated class using css-modules. The curr ...

csssasscss-selectorscss-modules

Transform Angular Material Table selection color with selection

Is it possible to customize the color of the selector in an Angular Material table when using selection? Learn more about it https://i.sstatic.net/5ZJQT.png ...

javascriptcssangularangular-material

Set an attribute without replacing any existing class attributes

I have developed a script that updates the class attribute of the body element on my website when an option is selected from a dropdown menu. However, I am facing an issue where it overrides the existing dark mode attribute. The purpose of this script is ...

javascripthtmlcss

Ways to enable automatic scrolling of a page as the content expands (Utilizing collapsible elements)

For a recent project I've been working on, I decided to include 4 collapsible text boxes. However, I encountered an issue where opening content1 would expand and push down content2-4, requiring the user to manually scroll to view the remaining collaps ...

javascripthtmlcss

What is the best way to apply CSS styles to a child div element in Next.js?

I'm currently working on enhancing the menu bar for a website project. Utilizing nextjs for my application I am aiming to customize the look of the anchor tag, however, encountering some issues with it not rendering correctly. Here is a snippet of ...

javascriptcssreactjsnext.js

Expanding DIV Box with jQuery

Have you ever come across those cool jQuery Expandable box features that expand to reveal a larger image in the center of the screen when you click on a Thumbnail image? But what if I want to achieve something similar, where instead of just an image insid ...

javascriptjquerycsshtml

Tips for aligning a single item to the center in a Bootstrap navigation bar that has the majority of items on the right

I am attempting to center the text "Welcome:" within the navbar without center aligning the entire navbar. I want the navbar to remain right aligned, but only the "Welcome:" portion should be centered. Here is what I have tried so far... <!DOCTYPE html ...

htmlcssbootstrap-5

Tips for wrapping text without breaking the input field onto a new line

I'm struggling to create the following UI design. [text1] [inputBox1] [text2] [inputBox2] [text3] [inputBox3] The length of text1, text2, and text3 can vary. So, as the length of text increases, their width should also increase, causing the input bo ...

htmlcssflexbox

Enhancing the appearance of text in an article by using hover effects, while ensuring the link is attached to the

As I work on the design of my website, I am faced with a challenge involving elements that have links attached to them. I want visitors to be able to click anywhere on the article and be directed to a specific page. The code snippet I currently have is as ...

css

What is the process for importing css and js files in laravel-webpack when utilizing a newly installed package through composer?

I've been working on installing this package called phackage. You can find more information about it here. After successfully installing it with Composer PHP, I've encountered several errors because I'm using Laravel 5.4 with Webpack 2 and ...

javascriptphpcsswebpacklaravel-5.4

Spans are not creating hyperlinks within anchors

Check out the full code. Here's the relevant code snippet: <a href='http://app.bithumor.co/report_post?id=568'><span class='report_icon'></span></a> Using CSS: <style> .report_icon { width: 60p ...

htmlcss

Having trouble unchecking the checkbox when the dropdown is set to 0

I am currently working on enhancing the functionality of my ordering form. When a checkbox is checked, the quantity dropdown value will change to 1. When a checkbox is unchecked, the quantity dropdown value will change to 0. If the quantity dropdown va ...

jqueryhtmlcssformscheckbox

Difficulty getting onclick event to trigger with input type=button

Having trouble submitting my form using JavaScript. The onclick event is not working when used with an input type button, and even the alert in the function is not displaying.... <input type="button" value="Register" id="org_reg_submit" class="reg_i ...

javascriptphphtml

Can the "value" of an HTML form field rendered by Django be altered?

Essentially, I have a form that includes a radio select widget for the field named Queue. The choices available for the Queue are sourced from a model, which is accessed and defined within the views.py file. To display this form on my template, I am using ...

javascriptpythonhtmldjango

The .media object in Bootstrap 3 does not experience overflow issues with .dropdown elements

Dropdown menu not displaying fully https://i.sstatic.net/G38cL.png I have a dropdown menu but it seems to cut off halfway through displaying its content. <div class="media-body"> <h4 class="panel-heading" style="margin:0;"> <div ...

htmlcsstwitter-bootstrap

Is it possible to modify CSS animations using a variable passed from typescript?

Looking for a way to streamline my animations in the .ts file so that I can use a single block of code to change the hardcoded RGB values with a variable called this.fillColor. Each animation is currently set up separately for different elements, but the ...

csstypescriptanimation

Can html-webpack-plugin be configured to create <style> elements from CSS files?

I am managing a static site with Vue and Webpack. In my project, I have a file named style.css containing global CSS rules which I import using import './styles.css' in my index.js file. Additionally, I have some .vue files that generate their o ...

javascriptcsswebpackvue.jshtml-webpack-plugin