html

CSS First of Type

A cascading style sheet has a property to highlight the first content of HTML amongst several of one specific type and then apply the effects. HTML and CSS both will play a vital role in implementing this phenomenon.

How does First of type property work in CSS?

This property works in such a way that the content on which we want to apply any specified effect is written with the ‘first-of-type’ keywords. It automatically accesses the content that is declared the first time inside the code. The basic syntax for this property is:

HTML content tag <>: first-of-type {
// effects you want to apply.
}

Why do we use First of type in CSS?

In CSS, we can apply different effects on HTML contents. One of the main and important approaches to applying effects on the HTML tags is through the internal, inline, or external CSS. The inline CSS is written inside the tags which means it is only used when an effect is applied on that tag specifically. Whereas internal and external CSS are used when the classes and ids we use in the style sheet are accessed only by those tags where we have included the names of classes and ids.

But in the case of ‘first-of-type’, we don’t need to use classes or ids. This property is used when you want to use one HTML tag in a repetitive number of times but you would want to apply the effect only on the tag that appears first. This property has made the process of applying effects on the tag easier as compared to inline CSS. In here, we only write a simple piece of code at the start in the style tag rather than finding each HTML content tag and mentioning the style tag with effects inside it.

Example 1: First of type in the Paragraph and heading

This property of first of type is applied simply to the paragraph of the HTML content.

First, the background color of the webpage will be set. It is an extra property just used to make the output more appealing. A heading is declared along with a <h3> heading tag. Again, a new heading is used here. This time it is heading 2 <h2>. Then, a simple paragraph tag is in use. Inside the opening and closing tags of the paragraph, we have added a dummy sample text. A new heading <h3> is added which is again followed by a new paragraph tag. This is the hierarchy or the sequence of all the HTML contents we have used:

<h3> … </h3>
<h2> … </h2>
<p> … </p>
<h3> … </h3>
<p> … </p>

HTML body code

This CSS first of type is applied on a few of these HTML tags only on them which appeared first. So, this will surely help the user to identify the first-come tags.

HTML CSS code

After the HTML body, you need to add CSS in the head section of the HTML code. In the head position, we have given a title to our page. Then, inside the style tag, a paragraph is added to the first-of-type property. We have added color and italized the font style to the paragraph.

P: first-of-type {
Color: red;
Font-style: italic;
}

Further, heading 3 <h3> is applied with a yellow color and the font style is chosen.

Close all the tags and save the code with an HTML extension to create an HTML webpage on the browser. Otherwise, the ‘.txt’ extension will only form text to appear on the website when you open the file in the web browser.

Output

On the execution of the file, you will see that the first type property is applied to the heading and the paragraph.

Example 2: CSS first of type in description list

In HTML, a description list is used to contain the HTML content just like a simple unordered list does. First, these are some basic terminologies of the description list that will be used in the example code:

  • <dl> is for the description list.
  • <dt> this tag is for the definition of the descriptive term or the name.
  • <dd> it is used to describe each term mentioned.

Now, we will see how it works in HTML body code. Inside the body, a heading is added. After that we start the description list by using <dl> tag and then two <dt> are used. Inside both the term tags <dt>, we have used 3 descriptions of the terms<dd> .This example shows the veggies and fruits as dt and the names as <dd>. A small piece of code is written below.

<dl>
<dt> Vegetables: </dt>
    <dd>1. Tomatoes</dd>
</dl>

After that, close all the tags and move toward the CSS part.

HTML body code

Once you are done with the HTML part in the style tag, apply an effect to the <dt> tag with the font weight or style as bold.

Dt {
Font-weight: bold;
}

As <dt> tags are two, we have not mentioned the first type property, this effect will be applied to both the <dt> values.

All the terms that are written as <dd> are given a padding distance between each other. So, we have simply written the ‘dd’ name to apply this effect to all the DDS.

Dd {
margin: 3px;
}

HTML CSS code

But we want to apply a border effect on only that dd that appears first among all the 6 <<dd> tags. So we will use this CSS property. Also, the background effect is added to the <dd> tag with the border.

Dd: first-of-type {
Border: 2px solid purple;
Background-color: lightgreen;
}

Output

On the execution, you will see that the first <dd> is highlighted with a background color and a border.

Note
In the HTML body, there are no criteria to mention inside the tag or highlight specifically to show that a particular tag is the first one or that we want to apply an effect on a specific tag. You just need to make sure that all the tags are declared properly along with the opening and closing tags. And the order of HTML content should be noted while writing the code because this first of type property will be applied only to the content that is declared first.

Conclusion

In this article, we tried to assist the user with an important aspect of CSS design with the first-of-type property. This property is useful when you need to apply the effects on the very first declared HTML content among the number of the same type of content. First, we started with the basic working of the first-of-type effect and the need for this property in webpage designing. We have explained two examples including the heading and the paragraph selection in the first example. Whereas the second example contains the description list to be affected through this CSS property.

About the author

Aqsa Yasin

I am a self-motivated information technology professional with a passion for writing. I am a technical writer and love to write for all Linux flavors and Windows.