csscss-selectorspseudo-class

How to use nth-child in CSS to select all elements after a certain one?

I've seen jQuery has a :gt(n) solution, but can the same behavior be achieved in CSS?

What I want is for the mobile website to not have more than 3 elements in some lists. So I would need something along the lines of:

@media(max-width:768px) {
   .list li:gt(3) {
      display:none;
   }
}

And I want to try avoiding using Javascript for it. Since the :gt(n) selector doesn't seem to exist in CSS, can the same selection be achieved with the :nth-child(n) selector?

Solution

  • Yes you can do it using :nth-child(n+4)

    In your case:

    @media(max-width:768px) {
   .list li:nth-child(n+4) {
      display:none;
   }
}

    You can see this fiddle : http://jsfiddle.net/wgLCH/2/