- :first-of-type
- Try it
- Syntax
- Examples
- Styling the first paragraph
- HTML
- CSS
- Result
- Nested elements
- HTML
- CSS
- Result
- Specifications
- Browser compatibility
- See also
- Found a content problem with this page?
- MDN
- Support
- Our communities
- Developers
- CSS Pseudo-classes
- Syntax
- Anchor Pseudo-classes
- Example
- Pseudo-classes and HTML Classes
- Example
- Example
- Simple Tooltip Hover
- Example
- CSS — The :first-child Pseudo-class
- Match the first element
- Example
- Match the first element in all elements
- Example
- Match all elements in all first child elements
- Example
- CSS — The :lang Pseudo-class
- Example
- More Examples
- All CSS Pseudo Classes
- All CSS Pseudo Elements
:first-of-type
The :first-of-type CSS pseudo-class represents the first element of its type among a group of sibling elements.
Try it
Syntax
Examples
Styling the first paragraph
HTML
h2>Headingh2> p>Paragraph 1p> p>Paragraph 2p>
CSS
p:first-of-type color: red; font-style: italic; >
Result
Nested elements
This example shows how nested elements can also be targeted. Note that the universal selector ( * ) is implied when no type selector is written.
HTML
article> div>This `div` is first!div> div>This span>nested `span` is firstspan>!div> div> This em>nested `em` is firstem>, but this em>nested `em` is lastem>! div> div>This span>nested `span` gets styledspan>!div> p>This `p` qualifies!p> div>This is the final `div`.div> article>
CSS
article :first-of-type background-color: pink; >
Result
Specifications
Browser compatibility
BCD tables only load in the browser
See also
Found a content problem with this page?
This page was last modified on Feb 21, 2023 by MDN contributors.
Your blueprint for a better internet.
MDN
Support
Our communities
Developers
Visit Mozilla Corporation’s not-for-profit parent, the Mozilla Foundation.
Portions of this content are ©1998– 2023 by individual mozilla.org contributors. Content available under a Creative Commons license.
CSS Pseudo-classes
A pseudo-class is used to define a special state of an element.
For example, it can be used to:
- Style an element when a user mouses over it
- Style visited and unvisited links differently
- Style an element when it gets focus
Syntax
The syntax of pseudo-classes:
Anchor Pseudo-classes
Links can be displayed in different ways:
Example
/* unvisited link */
a:link color: #FF0000;
>
/* visited link */
a:visited color: #00FF00;
>
/* mouse over link */
a:hover color: #FF00FF;
>
/* selected link */
a:active color: #0000FF;
>
Note: a:hover MUST come after a:link and a:visited in the CSS definition in order to be effective! a:active MUST come after a:hover in the CSS definition in order to be effective! Pseudo-class names are not case-sensitive.
Pseudo-classes and HTML Classes
Pseudo-classes can be combined with HTML classes:
When you hover over the link in the example, it will change color:
Example
Hover on
An example of using the :hover pseudo-class on a element:
Example
Simple Tooltip Hover
Hover over a element to show a
element (like a tooltip):
Hover over me to show the
element.
Example
p <
display: none;
background-color: yellow;
padding: 20px;
>
CSS — The :first-child Pseudo-class
The :first-child pseudo-class matches a specified element that is the first child of another element.
Match the first
element
In the following example, the selector matches any
element that is the first child of any element:
Example
Match the first element in all
elements
In the following example, the selector matches the first element in all
elements:
Example
Match all elements in all first child
elements
In the following example, the selector matches all elements in
elements that are the first child of another element:
Example
CSS — The :lang Pseudo-class
The :lang pseudo-class allows you to define special rules for different languages.
In the example below, :lang defines the quotation marks for elements with lang=»no»:
Example
Some text A quote in a paragraph
Some text.
More Examples
Add different styles to hyperlinks
This example demonstrates how to add other styles to hyperlinks.
Use of :focus
This example demonstrates how to use the :focus pseudo-class.
All CSS Pseudo Classes
Selector | Example | Example description |
---|---|---|
:active | a:active | Selects the active link |
:checked | input:checked | Selects every checked element |
:disabled | input:disabled | Selects every disabled element |
:empty | p:empty | Selects every element that has no children |
:enabled | input:enabled | Selects every enabled element |
:first-child | p:first-child | Selects every elements that is the first child of its parent |
:first-of-type | p:first-of-type | Selects every element that is the first element of its parent |
:focus | input:focus | Selects the element that has focus |
:hover | a:hover | Selects links on mouse over |
:in-range | input:in-range | Selects elements with a value within a specified range |
:invalid | input:invalid | Selects all elements with an invalid value |
:lang(language) | p:lang(it) | Selects every element with a lang attribute value starting with «it» |
:last-child | p:last-child | Selects every elements that is the last child of its parent |
:last-of-type | p:last-of-type | Selects every element that is the last element of its parent |
:link | a:link | Selects all unvisited links |
:not(selector) | :not(p) | Selects every element that is not a element |
:nth-child(n) | p:nth-child(2) | Selects every element that is the second child of its parent |
:nth-last-child(n) | p:nth-last-child(2) | Selects every element that is the second child of its parent, counting from the last child |
:nth-last-of-type(n) | p:nth-last-of-type(2) | Selects every element that is the second element of its parent, counting from the last child |
:nth-of-type(n) | p:nth-of-type(2) | Selects every element that is the second element of its parent |
:only-of-type | p:only-of-type | Selects every element that is the only element of its parent |
:only-child | p:only-child | Selects every element that is the only child of its parent |
:optional | input:optional | Selects elements with no «required» attribute |
:out-of-range | input:out-of-range | Selects elements with a value outside a specified range |
:read-only | input:read-only | Selects elements with a «readonly» attribute specified |
:read-write | input:read-write | Selects elements with no «readonly» attribute |
:required | input:required | Selects elements with a «required» attribute specified |
:root | root | Selects the document’s root element |
:target | #news:target | Selects the current active #news element (clicked on a URL containing that anchor name) |
:valid | input:valid | Selects all elements with a valid value |
:visited | a:visited | Selects all visited links |
All CSS Pseudo Elements
Selector | Example | Example description |
---|---|---|
::after | p::after | Insert content after every element |
::before | p::before | Insert content before every element |
::first-letter | p::first-letter | Selects the first letter of every element |
::first-line | p::first-line | Selects the first line of every element |
::marker | ::marker | Selects the markers of list items |
::selection | p::selection | Selects the portion of an element that is selected by a user |