With the onset of CSS3 a lot of new selectors were introduced. Many of these new selectors have been of a lot of help to us. The first-child selector is one such selector. Using the first-child selector, you can target the element which is the first child of its parent element. This means if you want to target the first <li> of an unordered list or <ul> you can use the :first-child selector to target the first “li” element. The code for it would look similar to the following :

The above code would target the first <li> of the <ul> and change its color to red. This is a really simple and useful property. However, remember that :first-child would work only when the element you are targeting is the first child of the parent element. This means that if there is any other sibling element before the element you are targeting, then the first-child property would NOT work as expected. Let’s consider the following example :

In the above example, you can notice that the first <p> within the <div> is being targeted. However, this would NOT work because the <p> is technically NOT the first child of the <div>. The first child of the <div> is the <h1> tag.

So, how to make the :first-child work in CSS ?

If there are other sibling elements before the “first child element” that you are targeting, you should use the first-of-type selector. The first-of-type selector would target the elements which are of a “certain type or tag” and are the first ones of its type within its parent element. To understand this clearly please take a look at the following example :

In the example above, the first paragraph within the <div> would have the text color as red. The key here is to understand that the <p> or paragraph is NOT technically the first child and that when you want to target the paragraph or  <p> you should target the <p> which is the first child of its parent <div> and of the ‘certain’ type or of the ” <p> type “.

Hope you understood the concept and liked the article. Please like us on Facebook and follow us on Twitter.

Related Posts

  • How to use Font Awesome Icons? What is Font Awesome? Font Awesome is basically an Icon-Font Kit. It is a font that renders icons and is somewhat similar (though not exactly) to the windings in […]
  • How to center align a Div ? One of the most common queries all the new front End developers have is " How do we center align a DIV? ". Well, let me tell you that it is one of the easiest task. […]
  • How to disable selection of text in html using CSS ? Depending on your requirement you might have to disable text selection or text highlighting in HTML using CSS or JavaScript. While there are different ways to do this, […]
  • What is the difference between Padding and Margin in CSS ? One of the most common confusions that developers starting off with CSS generally have is the difference between Padding and Margin. They are some of the most commonly […]
  • How to remove or Hide arrow / Spinners from input type number ? I am sure that by now you would have used various new input types available as a part of HTML5. Many of these input types have eliminated the requirement for JavaScript […]
  • Conditional Comments in HTML Many of us would have come across scenarios where we wanted a different Stylesheet or CSS properties for IE (Internet Explorer). While many would have resorted to […]