Choose only the initial element, regardless of its category

Question

Choose only the initial element, regardless of its category

Is there a way to apply a specific style exclusively to the very first element within a container, only if it is an h1, h2, or h3? However, if there are multiple headings of different levels on the same page, only the initial one should receive the designated styling.

For example:

<div class="container">
   <h2>I want to modify this</h2>

   <p>....</p>
   <h3>But not this!</h3>
   <h2>and not this!</h2>
</div>

I attempted using the following code:

.container h1:first-of-type, .container h2:first-of-type, .container h3:first-of-type {
    padding-top: 0 !important;
}

The issue arises when both the first H2 and H3 are impacted by this code.

I also tried the following, but unfortunately, it did not work:

.container > h1:first-of-type, .container > h2:first-of-type, .container > h3:first-of-type {
    padding-top: 0 !important;
}

Any suggestions on how I can accomplish this?

css css-selectors

Answer 1

Answer №1

Give it another shot, I believe this is what you've been searching for

<!DOCTYPE html>
<html>
<head>
<style>
.container > h1:first-child{
    background-color: yellow;
}
.container > h2:first-child  {
    background-color: orange;
}
.container > h3:first-child {
    background-color: red;
}
</style>
</head>
<body>
<div class="container">
   <h2>I want to modify here</h2>

   <p>....</p>
   <h3>Leave this as it is!</h3>
   <h2>and also keep this one unchanged!</h2>
</div>

</body>
</html>

Answer 2

Give it another shot, I believe this is what you've been searching for

<!DOCTYPE html>
<html>
<head>
<style>
.container > h1:first-child{
    background-color: yellow;
}
.container > h2:first-child  {
    background-color: orange;
}
.container > h3:first-child {
    background-color: red;
}
</style>
</head>
<body>
<div class="container">
   <h2>I want to modify here</h2>

   <p>....</p>
   <h3>Leave this as it is!</h3>
   <h2>and also keep this one unchanged!</h2>
</div>

</body>
</html>

Answer 3

Answer №2

It may not be achievable in the way you are imagining, but there is a workaround to revert the changes by utilizing the sibling combinator here with the code symbol ~ in various combinations.

The CSS code provided is quite lengthy. To simplify, consider using less code. Take a look at this codepen example.

.container > h1,
.container > h2,
.container > h3 {
  background: red;
}
.container > h1 ~ h1,
.container > h2 ~ h1,
.container > h3 ~ h1,
.container > h1 ~ h2,
.container > h2 ~ h2,
.container > h3 ~ h2,
.container > h1 ~ h3,
.container > h2 ~ h3,
.container > h3 ~ h3 {
  background: transparent;
}

<div class="container">
   <h2>I want to change this</h2>

   <p>...</p>
   <h3>But not this!</h3>
   <h2>and not this!</h2>
</div>

Answer 4

It may not be achievable in the way you are imagining, but there is a workaround to revert the changes by utilizing the sibling combinator here with the code symbol ~ in various combinations.

The CSS code provided is quite lengthy. To simplify, consider using less code. Take a look at this codepen example.

.container > h1,
.container > h2,
.container > h3 {
  background: red;
}
.container > h1 ~ h1,
.container > h2 ~ h1,
.container > h3 ~ h1,
.container > h1 ~ h2,
.container > h2 ~ h2,
.container > h3 ~ h2,
.container > h1 ~ h3,
.container > h2 ~ h3,
.container > h3 ~ h3 {
  background: transparent;
}

<div class="container">
   <h2>I want to change this</h2>

   <p>...</p>
   <h3>But not this!</h3>
   <h2>and not this!</h2>
</div>

Choose only the initial element, regardless of its category

Answer №1

Answer №2

Similar questions

The SVG path is not aligned properly with the container's viewbox dimensions

Creating mobile-friendly websites for a variety of devices, including smartphones and tablets

Stopping horizontal scrolling in Material-UI Autocomplete/Popper: A troubleshooting guide

Tips for creating a mobile-friendly Bootstrap carousel that is both scalable and zoomable while maintaining the default slide functionality

Why won't my sticky element function properly with the position attribute set to sticky?

Creating a custom design for ng-bootstrap accordion using CSS styling

The HTML footer designed with bootstrap is not behaving as expected. It is not staying fixed at the bottom of the page and is not displaying at full width despite my coding efforts

Tips for ensuring the Search button always remains alongside the input bar during resizing with percentages

Can someone please help me figure out why the "setInterval" function in my script isn't functioning as expected?

Tips for Placing a Div in a Precise Location

Is there a way to lock an image in place within a fancybox popup as I scroll within the popup?

What is the best way to decrease the font size of every element in the DOM?

Creating a unique look for unordered list items in a dropdown navigation

The el-dialog is functioning properly, however, I am looking to add CSS that will animate it to open

What steps can I take to avoid scaffold.css from taking precedence over my custom CSS?

Creating a Design That Works Well on Both Desktop and Mobile Devices

Centered text in <td> with CSS aligned to the right

What is the reason that this particular JQuery code is malfunctioning in the IE browser once integrated into my website?

I am having trouble viewing elements located below a div that I created using CSS

trouble with react-table's default height and flexible design