:last-child works, :first-child doesn't

最新推荐文章于 2023-12-22 02:23:09 发布

SalmonellaVaccine

最新推荐文章于 2023-12-22 02:23:09 发布

阅读量800

点赞数

分类专栏： CSS

CSS 专栏收录该内容

81 篇文章 0 订阅

订阅专栏

http://stackoverflow.com/questions/25454603/last-child-works-first-child-doesnt

I have an aside with two <div class="sku"> elements. I'm trying to use CSS to manipulate the :first-child but it doesn't work. However, when trying to access the :last-child it does.

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*/
}

Why won't :first-child select the first div?

Answer:

You cannot use :first-child psuedo class since .sku is not the first child. A better option is to use either :first-of-type (for first child) or :nth-of-type (which can accept a number or an equation) pseudo classes:

Because the .sky is the last child of the parent element. You have 3 elements on that level, h1 + .sku + .sku which :last-child is the last sku. If you had a h2 after the last sku. It doesnt work.

http://stackoverflow.com/questions/2717480/css-selector-for-first-element-with-class

I have a bunch of elements with a class name red:

<p class="red"></p>
<div class="red"></div>

I can't seem to select the first element with the class="red" using the following CSS rule:

.red:first-child{
  border:5px solid red;
}

What is wrong in this selector and how do I correct it?

UPDATE:

Thanks to the comments, I figured out that the element has to be the first child of its parent to get selected which is not the case that I have. I have the following structure:

<div class="home">
  <span>blah</span>
  <p class="red">first</p>
  <p class="red">second</p>
  <p class="red">third</p>
  <p class="red">fourth</p>
</div>

and this rule fails as mentioned in the comments:

.home .red:first-child{
  border:1px solid red;
}

How can I target the first child with class red?

Answer:

The :first-child selector is intended, like the name says, to select the first child of a parent tag. The children have to be embedded in the same parent tag. Your exact example will work (Just tried ithere):

<body>
    <p class="red">first</p>
    <div class="red">second</div>
</body>

Maybe you have nested your tags in different parent tags? Are your tags of class red really the first tags under the parent?

Notice also that this doesnt only apply to the first such tag in the whole document, but everytime a new parent is wrapped around it, like:

<div>
    <p class="red">first</p>
    <div class="red">second</div>
</div>
<div>
    <p class="red">third</p>
    <div class="red">fourth</div>
</div>

first and third will be red then.

Update:

I dont know why martyn deleted his answer, but he had the solution, the :nth-of-type selector:

<html>
<head>
<style type="text/css">
.red:nth-of-type(1)
{
    border:5px solid red;
} 
</style>
</head>

<body>
    <div class="home">
        <span>blah</span>
        <p class="red">first</p>
        <p class="red">second</p>
        <p class="red">third</p>
        <p class="red">fourth</p>
    </div>
</body>
</html>

Credits to Martyn. More infos for example here. Be aware that this is a CSS 3 selector, therefore not all browsers will recognize it (e.g. IE8 or older).