What is the CSS selector for the top-level heading?

Question

What is the CSS selector for the top-level heading?

Is there a way to target the first occurrence of the highest heading element (h*) in a DOM structure?

Perhaps something along the lines of

(h1, h2, h3, h4, h5, h6):first-of-ordered-set

For example, if the DOM contains h2, h3, h1, h2, h1, it should select the first h1;
and if there is h3, h3, h2, h2, h4, it should pick the first h2.
Assuming that the h* elements are not nested.

Do you think CSS has this capability?

Here's a resource that might be helpful: https://css-tricks.com/extremely-handy-nth-child-recipes-sass-mixins/

Edit: Reason for wanting this functionality: In a CMS system, the "top heading" is used as the document title (post, page, etc.). However, it remains visible on the page, causing the title to appear twice - once as the post title and once in the body. JavaScript cannot be used. The top level of the h* may vary.

html css css-selectors html-heading

Answer 1

Answer №1

I stumbled upon something interesting that CSS cannot currently achieve. But maybe in the near future.

The W3C is working on new features:

.post-content:has(h1, h2, h3, h4, h5, h6)

By combining this with :not(), it will allow for the functionality I am looking for:

.post-content:has(h1) h1:first-of-kind,
.post-content:not(:has(h1)) h2:first-of-kind,
.post-content:not(:has(h1,h2)) h3:first-of-kind,
...

There's a limitation though - the :not() currently can only have a single "simple selector". If it had more support, then achieving this without :has would be possible.

To all the future readers, I hope this eventually gets resolved. As of now, I'll keep this open, hoping that someone can crack the code with CSS 3.1.

Answer 2

I stumbled upon something interesting that CSS cannot currently achieve. But maybe in the near future.

The W3C is working on new features:

.post-content:has(h1, h2, h3, h4, h5, h6)

By combining this with :not(), it will allow for the functionality I am looking for:

.post-content:has(h1) h1:first-of-kind,
.post-content:not(:has(h1)) h2:first-of-kind,
.post-content:not(:has(h1,h2)) h3:first-of-kind,
...

There's a limitation though - the :not() currently can only have a single "simple selector". If it had more support, then achieving this without :has would be possible.

To all the future readers, I hope this eventually gets resolved. As of now, I'll keep this open, hoping that someone can crack the code with CSS 3.1.

Answer 3

Answer №2

The primary challenge we face is the lack of a previous selector in CSS. For instance, while we can target the first h2, there is no straightforward way to select elements that precede it, like a h1.

The workaround involves hiding all elements after the desired element, ensuring it remains the last visible one. However, achieving the same effect with preceding elements is not feasible using CSS alone.

h1:first-of-type,
h2:first-of-type,
h3:first-of-type,
h4:first-of-type {
  color:red;
}


h1:first-of-type ~ * {
  display:none;
}
h2:first-of-type ~ *:not(h1) {
  display:none;
}
h3:first-of-type ~ h4 {
  display:none;
}


.container {
 border:1px solid;
}

<div class="container">
  <h3>text 3</h3>
  <h1>text 1*</h1>
  <h2>text 2</h2>
  <h1>text 1</h1>
</div>
<div class="container">
  <h3>text 3</h3>
  <h2>text 2*</h2>
  <h2>text 2</h2>
  <h4>text 1</h4>
</div>
<div class="container">
  <h3>text 3</h3>
  <h3>text 2</h3>
  <h2>text 2*</h2>
  <h4>text 1</h4>
</div>
<div class="container">
  <h1>text 3*</h1>
  <h3>text 2</h3>
  <h2>text 2</h2>
  <h4>text 1</h4>
</div>

To further refine this approach, a small JS script can be used to isolate the necessary element:

$('h3:first-of-type').prevAll('h4').hide();
$('h2:first-of-type').prevAll('*:not(h1)').hide();
$('h1:first-of-type').prevAll('*').hide();

h1:first-of-type,
h2:first-of-type,
h3:first-of-type,
h4:first-of-type {
  color:red;
}


h1:first-of-type ~ * {
  display:none;
}
h2:first-of-type ~ *:not(h1) {
  display:none;
}
h3:first-of-type ~ h4 {
  display:none;
}

.container {
 border:1px solid;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
  <h3>text 3</h3>
  <h1>text 1*</h1>
  <h2>text 2</h2>
  <h1>text 1</h1>
</div>
<div class="container">
  <h3>text 3</h3>
  <h2>text 2*</h2>
  <h2>text 2</h2>
  <h4>text 1</h4>
</div>
<div class="container">
  <h3>text 3</h3>
  <h3>text 2</h3>
  <h2>text 2*</h2>
  <h4>text 1</h4>
</div>
<div class="container">
  <h1>text 1*</h1>
  <h3>text 2</h3>
  <h2>text 2</h2>
  <h4>text 1</h4>
</div>

Instead of just hiding the elements, you can apply different styles by utilizing CSS classes:

$('h3:first-of-type').prevAll('h4').addClass('initial');
$('h2:first-of-type').prevAll('*:not(h1)').addClass('initial');
$('h1:first-of-type').prevAll('*').addClass('initial');

h1:first-of-type,
h2:first-of-type,
h3:first-of-type,
h4:first-of-type {
  color:red;
  font-family:cursive;
  font-style:italic;
}


h1:first-of-type ~ *,
h2:first-of-type ~ *:not(h1),
h3:first-of-type ~ h4,
h1.initial,h2.initial,h3.initial,h4.initial{
  color:initial;
  font-family:initial;
  font-style:initial;
}

.container {
 border:1px solid;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
  <h3>text 3</h3>
  <h1>text 1*</h1>
  <h2>text 2</h2>
  <h1>text 1</h1>
</div>
<div class="container">
  <h3>text 3</h3>
  <h2>text 2*</h2>
  <h2>text 2</h2>
  <h4>text 1</h4>
</div>
<div class="container">
  <h3>text 3</h3>
  <h3>text 2</h3>
  <h2>text 2*</h2>
  <h4>text 1</h4>
</div>
<div class="container">
  <h1>text 1*</h1>
  <h3>text 2</h3>
  <h2>text 2</h2>
  <h4>text 1</h4>
</div>

Answer 4

The primary challenge we face is the lack of a previous selector in CSS. For instance, while we can target the first h2, there is no straightforward way to select elements that precede it, like a h1.

The workaround involves hiding all elements after the desired element, ensuring it remains the last visible one. However, achieving the same effect with preceding elements is not feasible using CSS alone.

h1:first-of-type,
h2:first-of-type,
h3:first-of-type,
h4:first-of-type {
  color:red;
}


h1:first-of-type ~ * {
  display:none;
}
h2:first-of-type ~ *:not(h1) {
  display:none;
}
h3:first-of-type ~ h4 {
  display:none;
}


.container {
 border:1px solid;
}

<div class="container">
  <h3>text 3</h3>
  <h1>text 1*</h1>
  <h2>text 2</h2>
  <h1>text 1</h1>
</div>
<div class="container">
  <h3>text 3</h3>
  <h2>text 2*</h2>
  <h2>text 2</h2>
  <h4>text 1</h4>
</div>
<div class="container">
  <h3>text 3</h3>
  <h3>text 2</h3>
  <h2>text 2*</h2>
  <h4>text 1</h4>
</div>
<div class="container">
  <h1>text 3*</h1>
  <h3>text 2</h3>
  <h2>text 2</h2>
  <h4>text 1</h4>
</div>

To further refine this approach, a small JS script can be used to isolate the necessary element:

$('h3:first-of-type').prevAll('h4').hide();
$('h2:first-of-type').prevAll('*:not(h1)').hide();
$('h1:first-of-type').prevAll('*').hide();

h1:first-of-type,
h2:first-of-type,
h3:first-of-type,
h4:first-of-type {
  color:red;
}


h1:first-of-type ~ * {
  display:none;
}
h2:first-of-type ~ *:not(h1) {
  display:none;
}
h3:first-of-type ~ h4 {
  display:none;
}

.container {
 border:1px solid;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
  <h3>text 3</h3>
  <h1>text 1*</h1>
  <h2>text 2</h2>
  <h1>text 1</h1>
</div>
<div class="container">
  <h3>text 3</h3>
  <h2>text 2*</h2>
  <h2>text 2</h2>
  <h4>text 1</h4>
</div>
<div class="container">
  <h3>text 3</h3>
  <h3>text 2</h3>
  <h2>text 2*</h2>
  <h4>text 1</h4>
</div>
<div class="container">
  <h1>text 1*</h1>
  <h3>text 2</h3>
  <h2>text 2</h2>
  <h4>text 1</h4>
</div>

Instead of just hiding the elements, you can apply different styles by utilizing CSS classes:

$('h3:first-of-type').prevAll('h4').addClass('initial');
$('h2:first-of-type').prevAll('*:not(h1)').addClass('initial');
$('h1:first-of-type').prevAll('*').addClass('initial');

h1:first-of-type,
h2:first-of-type,
h3:first-of-type,
h4:first-of-type {
  color:red;
  font-family:cursive;
  font-style:italic;
}


h1:first-of-type ~ *,
h2:first-of-type ~ *:not(h1),
h3:first-of-type ~ h4,
h1.initial,h2.initial,h3.initial,h4.initial{
  color:initial;
  font-family:initial;
  font-style:initial;
}

.container {
 border:1px solid;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
  <h3>text 3</h3>
  <h1>text 1*</h1>
  <h2>text 2</h2>
  <h1>text 1</h1>
</div>
<div class="container">
  <h3>text 3</h3>
  <h2>text 2*</h2>
  <h2>text 2</h2>
  <h4>text 1</h4>
</div>
<div class="container">
  <h3>text 3</h3>
  <h3>text 2</h3>
  <h2>text 2*</h2>
  <h4>text 1</h4>
</div>
<div class="container">
  <h1>text 1*</h1>
  <h3>text 2</h3>
  <h2>text 2</h2>
  <h4>text 1</h4>
</div>

What is the CSS selector for the top-level heading?

Answer №1

Answer №2

Similar questions

Using a jQuery event to apply styles with CSS

When the collapse button is clicked, I aim to increase the top value by 100. Subsequently, upon a second click, the top value should

Sending data through forms

What steps are necessary to alter the background color of a jumbotron?

Utilizing HTML and JavaScript to add grayscale effect to images within a table, with the ability to revert to the colored version upon mouseover

Unable to eliminate the default styling of Material UI table using an external CSS file

Utilizing Selenium for automating button clicks

The function iframe.scrollTo() is not effective for scrolling through Excel or PowerPoint documents on an iPad

Guide on integrating materialize-css npm package into webpack

Modify the CSS class by adding attributes dynamically instead of directly to the element

Utilize Jquery to hide radio buttons, while allowing users to click on an image to display a larger version

iOS is not receiving JSON data in the response headers

Ways to prevent a div containing a lengthy content string from extending beyond other divs

JavaScript | Calculating total and separate scores by moving one div onto another div

JavaScript struggles when dealing with dynamically loaded tables

Troubleshooting Bootstrap 4 problem with varying sizes of div content

Remove the image from the container in Bootstrap

CSS - Struggling to identify the source of unwanted horizontal scrolling?

Changing a button to text with PHP upon clicking

In the event that the final calculated total is a negative number, reset it to zero. Inform the user of an error through the use of a prompt dialog box