html

CSS Not First Type

“Have you ever seen some parents ignoring their one child while the rest are playing because that child is the eldest or something? This usually happens with the eldest child because the parents think that he/she might not need so much attention. If you did, then the concept of Not First Type will not be difficult for you to understand. The CSS first type selector has been used to simply ignore the first child of a specific parent and select the rest of the child elements of that particular parent. In other words, it has to choose every item that isn’t the parent element’s first descendant. In the format of the first child) component, it is shown as a parameter. Within this article today, we will learn to use the not-first child property of CSS.”

Example 01

Let’s get started with the first example of this article by creating a standard HTML file format using tags. We have started this HTML script with the html tag that has been followed by the head tag. The head tag defined the header of our HTML webpage. So, we have been using the title tag to add the name for this page. After the closing of a title tag, we have been using the title tag within the head tag. We will be taking a glance at the head tag after the discussion at the body of this HTML page.

Within the body tag, we have been starting it with the simple heading of size 1. Along with that, we have been using the “dl” to create a description list. Within this description list, a total of 2 description specifications has been used as per the “dt” tags opening and closing at line 13 and 17. The definition description “dd” tags are used to represent the items from a description list, i.e., at lines 14, 15, 16, 18, and 19. The description list has been closed after adding the description items. The body of our HTML page has been completed. So, we have been closing the body tag, i.e., </body>. Now, we will take a look at the style tag of our man head tag to style the body of our HTML code. The description specification “dt” has been styled with the font weight of bold, large font size, serif font family, and font size of 25px. The definition description tags are styled with the 4px margin and the font size of 22px.

For the “dd” tags, we have been using the “not”(first-of-type) offset to style all its children except the first immediate child. We have added the font size of 18px and the border of 3px solid of the yellow-green color. Now, this styling would only be applied to the rest of the child tags of the “dd” tag without the styling of its first child or member. This is about the style tag and this HTML page. So, we need to save it and then execute it with the Run option of the Visual Studio Code.

After executing this HTML script within the Chrome browser, we have got shown below the output of the description list. The heading has been displayed without any styling, while the description list has been displaying a total of two descriptions specifications main list Items, i.e., Animals and Sea Animals. The main description specifications are larger than the rest of the list items as specified by the style tag. At the same time, the “dd” definition descriptions have been styled differently.

The item adjacent to number 1 is styled a little bigger than the rest of the items. Along with that, all the items got a yellow-green color border around them, but the first item was left unchanged because it’s the first child, and it should be avoided as per the not first-of-type CSS offset used in the style tag.

Example 02

Let’s get started with another example of CSS, not a first-of-type offset selector, along with other selectors to make a comparison. So, we have started this HTML code with the standard html format of tags, i.e., starting from a simple html tag, followed by the head and body tag. We will be taking a glance at the main body part of this HTML script through the body tag, i.e., <body>. It starts with the use of heading tag <h1> of the largest size, and it closes </h1> with some text within both tags.

After that, it contains a “div” section to create a new container within the HTML body area with the class “parent” specified to be used for styling. This div container would have some paragraphs and headings within it. The heading of this container would be of size 1, starting with <h1> and ending with </h1>. After this, it contains a total of 4 paragraphs within it with the use of the start <p> tag and ending </p> tag. After all the paragraphs are completed and closed, we have been using the </div> tag to close the container for further insertion of elements here. The body of this HTML tag has been completed here as it has been using the </body> tag to close the body part. Let’s take a look at the header of this HTML page by adding the title to this page with the help of a “title” tag within the “head” main tag of HTML. After this, we have been utilizing the “style” tag of HTML CSS to add some styling to the body of our HTML page. So, it has been started with the class “parent” and the selector “first-child” to add styling to the first child of the particular element “div” that has been specified with the class “parent”.

Now, the heading of this “div” container would be colored blue with the font style oblique and font family of cursive. We have been using the paragraph tag “p” with the first-of-type selector to add styling to the first paragraph from the rest of the paragraphs. It would contain a background of blanched almonds and a font size of 2.25em. Now, the same parent class is used with the “not(:first-of-type)” selector to style all the same type of child elements, i.e., “p” except the first child of the “div” container. All those elements would be sea green with larger font sizes and different font families.

Also, the last-child selector has been used to style the last child of the “div” section, which is also a paragraph. It will be colored orange with a normal font style and a different font family. The styling has been completed here. Now, we will be executing it to see the changes.

The output is showing no styling for 1st heading, oblique styled blue colored first heading of “div” container, the first paragraph would be styled with the light pink background, the next two paragraphs are colored with sea green color, and the last paragraph is colored orange.

Conclusion

This article contains a brief explanation of the CSS selector, not first-of-type. For this, we have discussed its use and application on CSS elements within the introductory paragraph. After that, we implemented it within some examples of HTML script to show its working. Along with that, we have also covered its comparison with some sibling selectors to make its working more clear and prominent.

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.