CODEWITHSUNDEEP
csscss-selectors
Yahreen
Yahreen

Reputation: 1669

How to display the first 3 list items and hide the rest with CSS nth-child?

Is it possible to select multiple children past a defined number with CSS selectors?

I'd like to hide all list items past #3:

<ul>
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li> <!-- hide this -->
  <li>5</li> <!-- hide this -->
</ul>

<style>
  ul li:nth-child(X) {
    display: none;
  }
</style>

Upvotes: 52

Views: 65544

Answers (1)

DerWaldschrat
DerWaldschrat

Reputation: 1915

I do not know which browser supports this, but you can pass a formula to :nth-of-type():

ul li:nth-of-type(1n+4) {display: none;} /* should match your case */

Further details on: http://www.w3schools.com/cssref/sel_nth-of-type.asp

Edit

I altered it from (n+4) to (1n+4) since the first version works but isn't valid. I use this in media queries to hide cut-down items on smaller screens.

Example:

b:nth-of-type(1n+4){ opacity:.3; }
<b>1</b>
<b>2</b>
<b>3</b>
<b>4</b>
<b>5</b>

Upvotes: 98

Related Questions