CODEWITHSUNDEEP
htmlcss
Tuan Vu Cao
Tuan Vu Cao

Reputation: 1

Selector first-child, first-of-type not working

I have tried both first-child and first-of-type to hidden a first class "entry-list" but not working.

Here my code :

HTML

<div class="entry-content">
  <div class="row">
    <h2>Title</h2>
    <div class="view-more"></div>
    <div class="entry-list"></div>
    <div class="entry-list"></div>
    <div class="entry-list"></div>
  </div>
</div>

CSS

.entry-content>.row>div.entry-list:first-of-type {
    display: none;
}

Many thanks in advance

Upvotes: 0

Views: 231

Answers (2)

dippas
dippas

Reputation: 60553

if you change your element in your .view-more class you can do it by using first-of-type

.row div:first-of-type {
  display: none
}
<div class="entry-content">
  <div class="row">
    <h2>Title</h2>
    <span class="view-more">VM</span>
    <div class="entry-list">1</div>
    <div class="entry-list">2</div>
    <div class="entry-list">3</div>
  </div>
</div>

Upvotes: 1

MichalCh
MichalCh

Reputation: 241

You can easily get this done if you wrap your entry lists div with a another div.

You can read more here: https://developer.mozilla.org/en-US/docs/Web/CSS/:first-child

<div class="entry-content">
  <div class="row">
    <h2>Title</h2>
    <div class="view-more"></div>
    <div class="entry-lists">
        <div class="entry-list">First</div>
        <div class="entry-list">Second</div>
        <div class="entry-list">Last</div>
    </div>
  </div>
</div>

Here is a working fiddle: https://jsfiddle.net/h92dfz3o/

Upvotes: 0

Related Questions