:last-child is effective, but :first-child is inefficient

Question

:last-child is effective, but :first-child is inefficient

I'm having trouble using CSS to hide the first .sku element within an aside that contains two of these elements. Strangely, the :last-child selector works just fine. Can anyone explain why this might be happening? Here's a link to the JSFiddle for reference.

JSFiddle

HTML

<aside>
  <h1>Product Name</h1>
  <div class="sku">
    <h3>
      100 – Small
    </h3>
    <div class="dimension">
      <ul>
        <li>
          <span class="title">
            Product Dimensions
          </span>
          <span class="specs">
            23.75w
            x
            17.75h
            x
            28d
          </span>
        </li>
      </ul>
    </div>
  </div>
  <div class="sku">
    <h3>
      200 – Large
    </h3>
    <div class="dimension">
      <ul>
        <li>
          <span class="title">
            Product Dimensions
          </span>
          <span class="specs">
            29.75w
            x
            17.75h
            x
            28d
          </span>
        </li>
      </ul>
    </div>
  </div>
</aside>

CSS

.sku:first-child { 
  display:none !important; /*doesn't hide the first child*/
}

.sku:last-child { 
  display:none !important; /*does hide the first child*/
}

Can someone shed light on why :first-child is not selecting the first div as expected?

css html css-selectors

Answer 1

Answer №1

To target the first child that has the class .sku, use the :first-of-type pseudo class instead of :first-child. Alternatively, you can also utilize the :nth-of-type pseudo class with a specific number or equation:

.sku:nth-of-type(1) {
    display: none;
}

Check out the Updated Demo here

Answer 2

To target the first child that has the class .sku, use the :first-of-type pseudo class instead of :first-child. Alternatively, you can also utilize the :nth-of-type pseudo class with a specific number or equation:

.sku:nth-of-type(1) {
    display: none;
}

Check out the Updated Demo here

Answer 3

Answer №2

When using the :first-child selector, it targets the first child element in a container. In this specific scenario, the H1 is the first child so the original code provided does not achieve the intended result. An alternative approach would be to use:

h1 + .sku { }

However, it is important to note that this will only work correctly if your HTML structure follows the specified order.

Answer 4

When using the :first-child selector, it targets the first child element in a container. In this specific scenario, the H1 is the first child so the original code provided does not achieve the intended result. An alternative approach would be to use:

h1 + .sku { }

However, it is important to note that this will only work correctly if your HTML structure follows the specified order.

:last-child is effective, but :first-child is inefficient

Answer №1

Answer №2

Similar questions

Exploring the world of child theme customization in WordPress

Troubleshooting: Issue with Angular 2 bidirectional data binding on two input fields

Tips for turning off the auto save password option on browsers for user registration forms

Why is the inline-block element in the list displaying on two lines? The text contains a number, but does it affect the layout?

To determine whether a variable is an integer in PHP

Changing my PHP contact form from method GET to POST is causing it to malfunction

Prevent the elongation of HTML select elements in Bootstrap

What are your thoughts on using inline PHP to assign values to JavaScript variables?

Having trouble with Github pages' responsiveness on certain devices

Overflowing HTML Table Spills Over into Neighboring Div

Alignment Woes in Bootstrap Designs

Arrange the icons in multiple rows to ensure an equal distribution of icons on each row

JQuery is facing difficulty in animating a div following the completion of a "forwards" css animation

How to eliminate a particular item within a string only in rows that include a different specific item using JavaScript

When you hover over the button, a picture will appear

Canvas - Drawing restricted to new tiles when hovered over, not the entire canvas

Creating a spinning Cube with separate fields for x, y, and z rotation speeds: a step-by-step guide

Error: The parent selector "&" cannot be used in top-level selectors. $::webkit-input-placeholder

What are the steps to format text into 2 columns with a personalized design?

Create a dynamic animation using Angular to smoothly move a div element across the