# first-of-type Let's say we wanted to target DOM Elements of a particular type inside a parent DOM container say a `section`. ```
Inner Content not in an inner enclosed DIV or DOM Element.
Inner Content 1 in 1st plan DIV
Inner Content 2 in 1st plan DIV
Content 2 in Red
Content 3 in Red
Content 4 in Red
Content 5 in Red
Content 1 in Green
Content 2 in Green
``` If we do `section.plan div` it'll target all DIVs inside `section.plan`. So a `section.plan div { color: blue; }` will make text content in all DIVs in color blue. But if we do `section.plan > div` it'll target all only DIVs that are **direct ** decendants of `section.plan` - all first level DIVs under `section.plan`. So `section.plan > div { border: 1px solid red; }` will not have red borders for the DIVs with **Inner Content 1/2 in 1st plan DIV**. But what about `section.plan > div:first-child` ? This would select the DIV that's the first child of the parent `section.plan`. Here's the catch - if the first child of `section.plan` is a P like `

First child is not a DIV

` then `section.plan > div:first-child` will fail to do anything - since the first child of `section.plan` is not a DIV but a P tag. `section.plan > div:first-child` does not mean select the first DIV that's the child of `section.plan` - it means that *if* the first child is a DIV then apply the CSS. To catch the **first** DIV that's a child of `section.plan` we use `section.plan > div:first-of-type` ```html fist-of-type

First child is not a DIV

Inner Content not in an inner enclosed DIV or DOM Element.
Inner Content 1 in 1st plan DIV
Inner Content 2 in 1st plan DIV
Content 2 in Red
Content 3 in Red
Content 4 in Red
Content 5 in Red
Content 1 in Green
Content 2 in Green
``` [first-of-type is supported on all recent browsers, old and new ones](https://caniuse.com/?search=first-of-type). Demo : https://s3.amazonaws.com/s3.css.co.in/demo/first-of-type.html