Hide list items after certain number (nth-of-type, nth-child)

By September 15, 2017CSS

Its an interesting CSS property through which you can define property for particular list items (show/hide, color, background… any CSS property can be defined).

:nth-child(1n+0) {
CSS declaration;
}

Example


li:nth-child(1n+4) {
display: none;
}

  • n–> Initial is 0
  • 4 –> Just an example
  • Put the number that targets your required list.
    In the above example, it’ll hide all list item which is in position 4 and above

    Next


    :nth-of-type(number) {
    css declarations;
    }

    Example


    p:nth-of-type(3) {
    color: green;
    }

    This property will turn the 3rd paragraph to green color

Leave a Reply