How can I hide elements after exceeding a certain count JavaScript or jQuery?
.wrapper > :nth-child(n + 5) { display: none; }
:first-of-type in css
The :first-of-type selector in CSS allows you to target the first occurence of an element within its container. It is defined in the CSS Selectors Level 3 spec as a “structural pseudo-class”, meaning it is used to style content based on its relationship with parent and sibling content.
Suppose we have an article with a title and several paragraphs:
A Title
Paragraph 1.
Paragraph 2.
Paragraph 3.
We want to make the first paragraph larger, as a sort of “lede” or introductory paragraph. Instead of giving it a class, we can use :first-of-type to select it:
p:first-of-type {
font-size: 1.25em;
}
Using :first-of-type is very similar to :nth-child but with one critical difference: it is less specific. In the example above, if we had used p:nth-child(1), nothing would happen because the paragraph is not the first child of its parent (the
::first-letter in css
::first-letter is a pseudo element which allows you to style the first letter in an element, without needing to stick a tag around that first letter in your HTML. While no tags are added to the DOM, it is as if the targeted first letter were encompassed in a tag. You can style that first letter as you would a real element with:
p::first-letter {
text-transform:capitalize;
}