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?
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:
.sku:nth-of-type(1) {
display: none;
}
Updated Demo
The :first-child means the first child. Which is in this case the H1. So this does not work. You can use:
h1 + .sku { }
But only if this is the order you place your HTML.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With