nth-of-type don't show anything after 2

Question

how can I say that only the first thing should be shown?

.box:nth-of-type(2) {
    display:none;}

makes only the second thing hidden, how can I say "hide everything except the first one"?

Answer 1

You can use the :not selector with :first-child.

.box:not(:first-child){display:none;}

OR

You can select the first element using the :first-child Selector and give it the properties of display:block;. And add the display:none; property to the other elements

.box:first-child{display:block;}