-1

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/

TylerH
  • 20,799
  • 66
  • 75
  • 101
BostonMacOSX
  • 1,369
  • 2
  • 17
  • 38

2 Answers2

1

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

Gandalf the Gay
  • 384
  • 1
  • 13
0

I changed the CSS here

                #activeitemslist .ind_item:first-child SPAN.fa-arrow-up {display:none !important }
Lucky Chingi
  • 2,248
  • 1
  • 10
  • 15