Using CSS to target the first element of a type that is not a sibling

Question

Using CSS to target the first element of a type that is not a sibling

Here is my current code structure:

<div>
<div class="container">
    <div class="title-container">
        <h4 class="title blue">blue</h4>
    </div>
    <p>Something blue no 1</p>
</div>
<div class="container">
    <div class="title-container">
        <h4 class="title blue">blue</h4>
    </div>
    <p>Something blue no 2</p>
</div>
<div class="container">
    <div class="title-container">
        <h4 class="title green">green</h4>
    </div>
    <p>Something green no 1</p>
</div>
<div class="container">
    <div class="title-container">
        <h4 class="title green">green</h4>
    </div>
    <p>Something green no 2</p>
</div>
</div>

I am attempting to use the first-of-type selector to hide the first h4 tag under each combination of selectors: .title.blue and .title.green.

My belief is that this method is not working due to the fact that the elements are not siblings. Is there a way to still utilize the first-of-type selector in this scenario?

You can find an example pen here

h4.title.blue:first-of-type {
  display: none;
}

<div>
  <div class="container">
    <div class="title-container">
      <h4 class="title blue">blue</h4>
    </div>
    <p>Something blue no 1</p>
  </div>
  <div class="container">
    <div class="title-container">
      <h4 class="title blue">blue</h4>
    </div>
    <p>Something blue no 2</p>
  </div>
  <div class="container">
    <div class="title-container">
      <h4 class="title green">green</h4>
    </div>
    <p>Something green no 1</p>
  </div>
  <div class="container">
    <div class="title-container">
      <h4 class="title green">green</h4>
    </div>
    <p>Something green no 2</p>
  </div>
</div>

html css sass

Answer 1

Answer №1

To make the first blue and first green elements disappear, you will need to make changes to both your html and CSS. Refer to the example provided below:

h4.title:first-child {
  display: none;
}

<div>
<div class="container">
    <div class="title-container">
        <h4 class="title blue">blue</h4>
    </div>
    <p>Something blue no 1</p>
</div>
<div class="container">
    <div class="title-container">
        <h4 class="title blue">blue</h4>
    </div>
    <p>Something blue no 2</p>
</div>
<div class="container">
    <div class="title-container">
        <h4 class="title green">green</h4>
    </div>
    <p>Something green no 1</p>
</div>
<div class="container">
    <div class="title-container">
        <h4 class="title green">green</h4>
    </div>
    <p>Something green no 2</p>
</div>
</div>

The example above shows that using the first-child selector makes each <h4> tag disappear because they are not on the same level. See the illustration below:

- container
 - title container
  - h4
 - </title container
- </container
- container
 - title container
  - h4
 - </title container
- </container>
- container
 - title container
  - h4
 - </title container
- </container>
- container
 - title container
  - h4
 - </title container
- </container>

As each <h4> tag is in a new container, applying CSS like this:

.container .title-container h4.title:first-child {
  display: none;
}

would hide the first <h4> tag in each container since every container only has one.

To solve this issue, try the following approach:

.container .title-container h4.title:first-child {
  display: none;
}

<div>
<div class="container">
    <div class="title-container">
        <h4 class="title blue">blue 1</h4>
        <p>Something blue no 1</p>
        <h4 class="title blue">blue 2</h4>
        <p>Something blue no 2</p>
    </div>
<div class="container">
    <div class="title-container">
        <h4 class="title green">green 1</h4>
        <p>Something green no 1</p>
        <h4 class="title green">green 2</h4>
        <p>Something green no 2</p>
</div>
</div>

I hope this explanation helps!

Answer 2

To make the first blue and first green elements disappear, you will need to make changes to both your html and CSS. Refer to the example provided below:

h4.title:first-child {
  display: none;
}

<div>
<div class="container">
    <div class="title-container">
        <h4 class="title blue">blue</h4>
    </div>
    <p>Something blue no 1</p>
</div>
<div class="container">
    <div class="title-container">
        <h4 class="title blue">blue</h4>
    </div>
    <p>Something blue no 2</p>
</div>
<div class="container">
    <div class="title-container">
        <h4 class="title green">green</h4>
    </div>
    <p>Something green no 1</p>
</div>
<div class="container">
    <div class="title-container">
        <h4 class="title green">green</h4>
    </div>
    <p>Something green no 2</p>
</div>
</div>

The example above shows that using the first-child selector makes each <h4> tag disappear because they are not on the same level. See the illustration below:

- container
 - title container
  - h4
 - </title container
- </container
- container
 - title container
  - h4
 - </title container
- </container>
- container
 - title container
  - h4
 - </title container
- </container>
- container
 - title container
  - h4
 - </title container
- </container>

As each <h4> tag is in a new container, applying CSS like this:

.container .title-container h4.title:first-child {
  display: none;
}

would hide the first <h4> tag in each container since every container only has one.

To solve this issue, try the following approach:

.container .title-container h4.title:first-child {
  display: none;
}

<div>
<div class="container">
    <div class="title-container">
        <h4 class="title blue">blue 1</h4>
        <p>Something blue no 1</p>
        <h4 class="title blue">blue 2</h4>
        <p>Something blue no 2</p>
    </div>
<div class="container">
    <div class="title-container">
        <h4 class="title green">green 1</h4>
        <p>Something green no 1</p>
        <h4 class="title green">green 2</h4>
        <p>Something green no 2</p>
</div>
</div>

I hope this explanation helps!

Answer 3

Answer №2

h4.title:first-of-type {
  display: none;
}

<div>
<div class="container">
    <div class="title-container">
        <h4 class="title blue">blue</h4>
    </div>
    <p>Something blue no 1</p>
</div>
<div class="container">
    <div class="title-container">
        <h4 class="title blue">blue</h4>
    </div>
    <p>Something blue no 2</p>
</div>
<div class="container">
    <div class="title-container">
        <h4 class="title green">green</h4>
    </div>
    <p>Something green no 1</p>
</div>
<div class="container">
    <div class="title-container">
        <h4 class="title green">green</h4>
    </div>
    <p>Something green no 2</p>
</div>
</div>

You need to make changes in the CSS style

h4.title:first-of-type {
  display: none;
}

Answer 4

h4.title:first-of-type {
  display: none;
}

<div>
<div class="container">
    <div class="title-container">
        <h4 class="title blue">blue</h4>
    </div>
    <p>Something blue no 1</p>
</div>
<div class="container">
    <div class="title-container">
        <h4 class="title blue">blue</h4>
    </div>
    <p>Something blue no 2</p>
</div>
<div class="container">
    <div class="title-container">
        <h4 class="title green">green</h4>
    </div>
    <p>Something green no 1</p>
</div>
<div class="container">
    <div class="title-container">
        <h4 class="title green">green</h4>
    </div>
    <p>Something green no 2</p>
</div>
</div>

You need to make changes in the CSS style

h4.title:first-of-type {
  display: none;
}

Answer 5

Answer №3

In an attempt to utilize the first-of-type selector, I am aiming to conceal the initial h4 tag within either the combined selectors .title.blue and .title.green.

You're on the right track, but not quite there yet.

To achieve this, you will need to apply :nth-of-type to an element that is higher up in the DOM hierarchy.

Here's a Functional Example:

div > div:nth-of-type(odd) > div h4 {
display: none;
}

<div>
<div class="container">
    <div class="title-container">
        <h4 class="title blue">blue</h4>
    </div>
    <p>Something blue no 1</p>
</div>
<div class="container">
    <div class="title-container">
        <h4 class="title blue">blue</h4>
    </div>
    <p>Something blue no 2</p>
</div>
<div class="container">
    <div class="title-container">
        <h4 class="title green">green</h4>
    </div>
    <p>Something green no 1</p>
</div>
<div class="container">
    <div class="title-container">
        <h4 class="title green">green</h4>
    </div>
    <p>Something green no 2</p>
</div>
</div>

Answer 6

In an attempt to utilize the first-of-type selector, I am aiming to conceal the initial h4 tag within either the combined selectors .title.blue and .title.green.

You're on the right track, but not quite there yet.

To achieve this, you will need to apply :nth-of-type to an element that is higher up in the DOM hierarchy.

Here's a Functional Example:

div > div:nth-of-type(odd) > div h4 {
display: none;
}

<div>
<div class="container">
    <div class="title-container">
        <h4 class="title blue">blue</h4>
    </div>
    <p>Something blue no 1</p>
</div>
<div class="container">
    <div class="title-container">
        <h4 class="title blue">blue</h4>
    </div>
    <p>Something blue no 2</p>
</div>
<div class="container">
    <div class="title-container">
        <h4 class="title green">green</h4>
    </div>
    <p>Something green no 1</p>
</div>
<div class="container">
    <div class="title-container">
        <h4 class="title green">green</h4>
    </div>
    <p>Something green no 2</p>
</div>
</div>

Answer 7

Answer №4

In the end, I discovered a different approach to solve this. Despite not being able to alter any markup, I managed to rearrange CSS classes.

My selector was

.container > .class-to-hide ~ .class-to-hide

. This allowed me to target all elements except for the first one with the class .class-to-hide.

You can view a demonstration of this solution on this code pen

Answer 8

In the end, I discovered a different approach to solve this. Despite not being able to alter any markup, I managed to rearrange CSS classes.

My selector was

.container > .class-to-hide ~ .class-to-hide

. This allowed me to target all elements except for the first one with the class .class-to-hide.

You can view a demonstration of this solution on this code pen

Using CSS to target the first element of a type that is not a sibling

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

Website design with a central vertical alignment and a subtle shadow effect

Styling Images Inside a DIV Container Using CSS Float

Smooth scrolling feature for Wordpress websites

I encountered an issue where the font awesome icons failed to load on my website

Creating a new grid row when changing the order of elements in the grid column arrangement

Customizing Javascript for Mouse Exiting Browser Window

CSS: The hiding should only apply to specific sections of my menu

Having trouble with overriding an @media query for material-ui react components?

Extract the entire div including all its elements and then transmit it using the PHP mail function

Ways to transfer information from HTML form components to the Angular class

Dynamic graphic with integrated navigation menu

Retrieve base64 encoded data from several content attributes

Unexpected behavior of Bootstrap columns within nested rows, occurring between the small and extra-small breakpoints

Guide for creating a scroll-triggered rotation animation using only JavaScript

I'm looking to incorporate XML data into table cells using JQuery. How can I go about creating this table?

What is the best way to ensure the meta value is updated to reflect exactly what is displayed on the

Tips for generating a JSON string with nested structure

Building a sub-navigation menu within the main navigation menu

What is the best way to update a stylesheet dynamically within an Angular project?

Tips for creating a puzzling effect with shadow as you move