CSS: only-child, only-of-type selector with Example

This post was most recently updated on December 28th, 2016

CSS selectors are patterns or specific elements you want to select and apply styles to it. Here are 2 not most commonly used but useful selectors.

There have been many scenarios where you want to check

1. if an element is the only child of a parent
   <div><p> only p tag of div </p> </div> p:only-child { color: red; }

   1 2 3 4

   <div><p> only p tag of div </p> </div>    p:only-child {         color: red;    }

   Click here for demo. only-child selector would not allow other element of any type under parent div. So it would strictly search for single child p elements to apply the style.

2. if an element is only child of a parent of its type
   <div><p> only p tag of div </p> <a> only anchor child of div </a> </div> p:only-of-type { color: red ; }

   1 2 3 4

   <div><p> only p tag of div </p> <a> only anchor child of div </a> </div>    p:only-of-type {         color: red ;    }

   Click here for demo. only-of-type would only allow elements of other type under parent div. So it would search elements that do not have duplicate p elements in a parent div.

    

Browser Compatibility:

	only-child	only-of-type
	4.0	4.0
	9.0	9.0
	3.5	3.5
	3.2	3.2