CSS - Hide middle element in

Question

I have the following html :

<div class="dashboard-widget big-counter">
                    <ul class="list-inline">
                        <li>
                            <div class="title">Pageview</div>
                        </li>
                        <li>
                            <div class="title">Order</div>
                        </li>
                        <li>
                            <div class="title">Sales</div>
                        </li>
                        <li>
                            <div class="title">Earning</div>
                        </li>

                    </ul>
                </div> <!-- .big-counter -->

I am trying to hide the last 3 <li> elements out of the 4, so I only need to have the "Pageview" first <li> element visible.

I've read in another question that the most browser compatible way of doing this would be li + li trick, so to hide the first element, the CSS would be as follows :

.dashboard-widget.big-counter ul.list-inline li {
display: none !Important;
}

.dashboard-widget.big-counter ul.list-inline li + li {
display: list-item !Important;
} 

But that works great for the first element.

How can I skip the first element and hide the last 3 with this method ?

Or any other browser compatible method ?

My fiddle is here : http://jsfiddle.net/03w0kk4t/

Answer 1

You could use CSS's nth-child():

.dashboard-widget.big-counter ul.list-inline li:nth-child(2),  /*this element's 2nd child*/
.dashboard-widget.big-counter ul.list-inline li:nth-child(3),  /*this element's 3rd child*/
.dashboard-widget.big-counter ul.list-inline li:nth-child(4) { /*this element's 4th child*/
    display: none !important;
}

Then, use either nth-child(1) or :first-child to select the first element

.dashboard-widget.big-counter ul.list-inline li:nth-child(1) {
    display: list-item !important;
}

or

.dashboard-widget.big-counter ul.list-inline li:first-child {
    display: list-item !important;
}

http://jsfiddle.net/joe_young/zqm2osso/

Answer 2

.dashboard-widget.big-counter ul.list-inline li:first-child {
display: list-item !Important;
}

Or you can target first child. http://jsfiddle.net/03w0kk4t/4/

About browser support: Browser support for CSS :first-child and :last-child

P.S. !important is not needed, in this case.

Answer 3

You need to change the CSS, Try this.

.dashboard-widget.big-counter ul.list-inline li:not(:nth-child(1)) {
  display: none !Important;
}
.dashboard-widget.big-counter ul.list-inline li + li {
display: list-item !Important;
}

Answer 4

You could use CSS3 Selectors to make the behavior you want. Use this reference for more help.

Example of css

li:nth-child(2),li:nth-child(3),li:nth-child(4){display:none;}

Answer 5

The most browser compatible solution is indeed by using the adjacent sibling selector li + li (IE7+ and modern browsers). You just have to put display: none to this rule and let first element display by default.

.dashboard-widget.big-counter ul.list-inline li + li {
  display: none;
}

<div class="dashboard-widget big-counter">
  <ul class="list-inline">
    <li>
      <div class="title">Pageview</div>
    </li>
    <li>
      <div class="title">Order</div>
    </li>
    <li>
      <div class="title">Sales</div>
    </li>
    <li>
      <div class="title">Earning</div>
    </li>
  </ul>
</div>
<!-- .big-counter -->

Reference: Adjacent sibling selectors