![](https://www.delftstack.com/img/CSS/feature image - css first of class.png)
CSS First Of Class Delft Stack
The :first-of-type CSS pseudo-class represents the first element of its type among a group of sibling elements. Try it Syntax css :first-of-type { /*. */ } Examples Styling the first paragraph HTML htmlHeading
Paragraph 1
Paragraph 2
CSS p:first-of-type { color: red; font-style: italic; } Result Nested elements 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: Select :first-of-type by class only Ask Question Asked 10 years, 5 months ago Modified 10 years, 5 months ago Viewed 2k times 0 I am trying to solve a bug in CKEditor where it doesn't apply the margin properly. Using Bootstrap, the first span's margin is effectively ignored as it falls outside the row. div:first-of-type → All![](https://i.pinimg.com/originals/07/e0/78/07e0787fdbbbbbebe8e305974bcb44e0.jpg)
This class is a fun and approachable exploration of handcoding your first website. The class
css first-of-type under other class. 1. Target :first-child or :nth-of-type(1) 1. CSS first-of-type stopped working after adding new section class. 2. I'm curious why 'first-of-type' is doesn't work. Hot Network Questions Binomial series Usage of the word "gelangte" Counting Collinear Points. CSS :first-of-type :first-of -type In This Article The :first-of-type CSS pseudo-class represents the first element of its type among a group of sibling elements. /* Selects the first to appear inside a parent element regardless of its position inside the siblings */ p:first-of-type { color: red; } The trick to using the combinator to emulate a :first-of-class psuedo class is to use a regular selector to style all the elements of the class with the style you want. Then use the combinator to turn it off for all but the first element. In our original example, the CSS now looks like this: The :first CSS pseudo-class is used with the @page at-rule to select the first page in a printed document. It's very similar to the way :first-child selector works to target the first child element in a parent container, but instead selects the first printed page in a series of pages when the document is sent to a printer.. @page :first { margin: 50%; }