HTML CSS SQL Meta tag Generator ScrollBar design Generator Encode Decode images

CSS Basics

Introduction Syntax Selectors Attribute Selectors Specificity Combinators !important Comments Colors

CSS Need to Know

Box Model Pseudo-class Pseudo-element Inline-block Math Functions Max and Min Opacity Outline Overflow Z-index Float

Most used

Align Backgrounds Borders Text Units Padding Margins Position Tables Display Fonts Lists Height and Width

CSS Reference

CSS Properties reference CSS Pseudo-Classes reference CSS Pseudo-Elements reference CSS Selector reference

Understanding the CSS :first-of-type Pseudo-class

The :first-of-type pseudo-class in CSS allows you to select and style the first element of a specific type within its parent. This is particularly useful when you want to apply styles to the first occurrence of an element without adding extra classes or IDs to your HTML markup.

What Is the :first-of-type Pseudo-class?

The :first-of-type pseudo-class represents the first sibling of its type (tag name) within a parent element. It targets the first instance of a specific element type among its siblings, regardless of their classes or IDs.

Syntax

The basic syntax for using :first-of-type is:


selector:first-of-type {
    /* CSS properties */
}

Example Usage

Consider the following HTML structure:


<div class="article">
    <h2>Article Title</h2>
    <p>Introduction paragraph.</p>
    <p>Main content paragraph.</p>
    <p>Conclusion paragraph.</p>
</div>

To style the first <p> element within the .article class, you can use:


.article p:first-of-type {
    font-weight: bold;
    font-size: 18px;
}

This CSS rule applies bold text and increases the font size of the first paragraph inside the .article div.

How It Works

The :first-of-type pseudo-class selects the first element of the specified type among its sibling elements within the same parent. It only considers elements of the same type, ignoring other types of elements that may be present.

Difference Between :first-of-type and :first-child

It's important to distinguish between :first-of-type and :first-child:

For example, if the first child of a parent is an <h2> element, p:first-child would not select any element, but p:first-of-type would select the first <p> element that appears after the <h2>.

More Examples

Styling the First List Item

HTML:


<ul class="menu">
    <li>Home</li>
    <li>About</li>
    <li>Services</li>
    <li>Contact</li>
</ul>

CSS:


.menu li:first-of-type {
    background-color: #f0f0f0;
}

This will apply a light gray background to the first <li> item in the menu.

Styling the First Table Column

HTML:


<table>
    <tr>
        <td>Row 1, Cell 1</td>
        <td>Row 1, Cell 2</td>
    </tr>
    <tr>
        <td>Row 2, Cell 1</td>
        <td>Row 2, Cell 2</td>
    </tr>
</table>

CSS:


td:first-of-type {
    font-weight: bold;
}

This styles the first <td> in each row, making the text bold.

Combining with Other Pseudo-classes

You can combine :first-of-type with other pseudo-classes for more specific selections.

Example: Styling the First Paragraph Inside Each Section

HTML:


<section>
    <h2>Section 1</h2>
    <p>First paragraph in section 1.</p>
    <p>Second paragraph in section 1.</p>
</section>
<section>
    <h2>Section 2</h2>
    <p>First paragraph in section 2.</p>
    <p>Second paragraph in section 2.</p>
</section>

CSS:


section p:first-of-type {
    text-indent: 20px;
}

This indents the first paragraph in each <section> element.

Browser Support

The :first-of-type pseudo-class is widely supported in all modern browsers, including:

Conclusion

The :first-of-type pseudo-class is a powerful and efficient way to target the first occurrence of an element type within its parent, without the need for additional classes or IDs. It enhances your CSS by allowing more precise selections, leading to cleaner HTML markup and more maintainable stylesheets.

.the-rich {
   top: 1%;
} 
   .working-class {
	bottom: 99%;
}