Why isn't first-child working in this CSS documnet

Question

I'm wondering why the following CSS fiddle is not just turning off the up arrow on the first child and not any other DIVs.

<div id="activeitemslist" class="">
  <div class="ind_item">
      <div class="ind_updn">
          <span class="fa fa-arrow-up"></span>
          <span class="fa fa-arrow-down"></span>
      </div>
  </div>
  <div class="ind_item">
      <div class="ind_updn">
          <span class="fa fa-arrow-up"></span>
          <span class="fa fa-arrow-down"></span>
      </div>
  </div>
 </div>

CSS

#activeitemslist{width:100%;border:1px solid red}

#activeitemslist DIV:first-child SPAN.fa-arrow-up {display:none !important }

.ind_item > DIV{display: inline-block;text-align: center;vertical-align: middle}

https://jsfiddle.net/vvc0a4gx/

Your code seems to work fine...I think you should have a question... — Ionut, Oct 26 '15 at 13:07
Because `#activeitems DIV:first-child` matches divs on all levels inside #activeitems. Change DIV to `.ind_item` or use `#activeitems > DIV:first-child` — hampusohlsson, Oct 26 '15 at 13:10

score 1 · Answer 1 · answered Jan 08 '18 at 21:44

Hi.

Where is the problem?

Let's try explain essential part of your CSS rule: #activeitemslist DIV:first-child. It looks for a div which is first child of his parent and parent must be inside element with id="activeitemslist".

According to this both up arrows fit in your rule #activeitemslist DIV:first-child SPAN.fa-arrow-up {display:none !important } so both are not displayed.

Solution

To refer just to first child div of element with id="activeitemslist" CSS rule should looks like #activeitemslist > div:first-child.

So to not display first up arrow in exemplary fiddle use follow CSS rule (there is no need to use !important):

#activeitemslist > div:first-child span.fa-arrow-up {
    display: none;
}

Updated code fiddle from the question with the solution.

Sources

You can read more about CSS3 selectors on e.g. W3Schools page.

Cheers

score 0 · Answer 2 · answered Oct 26 '15 at 13:08

0

I changed the CSS here

                #activeitemslist .ind_item:first-child SPAN.fa-arrow-up {display:none !important }

answered Oct 26 '15 at 13:08

Lucky Chingi

2,222
1
9
15

Why isn't first-child working in this CSS documnet

2 Answers2

Hi.

Where is the problem?

Solution

Sources

Cheers