This is the coolest feature of CSS, having the contol to the number of the elements without using the javascript. This only targets using the pseudo classes. These are the selectors who points to different html tags without the use of classes or ids or the javascript. If you need the best output in less code or need to eliminate the more dependenciesover classes, then this is the pro way.

Here is a small article describing the :only-child && :only-of-type Pseudo-classes working. I have an example too on codepen, you can try and use that for the more detail.

Basically what web says>

:only-child The :only-child CSS pseudo-class represents an element without any siblings. This is the same as :first-child:last-child or :nth-child(1):nth-last-child(1), but with a lower specificity.

:only-of-type The :only-of-type CSS pseudo-class represents an element that has no siblings of the same type

CSS pseudo-classes are used to add special effects to some selectors. You do not need to use JavaScript or any other script to use those effects. A simple syntax of pseudo-classes is as follows

A pseudo-class is used to define a special state of an element.

For example, it can be used to: Style an element when a user mouses over it Style visited and unvisited links differently Style an element when it gets focus

VIEW SAMPLE HERE:

See the Pen study reference for the :only-child && :only-of-type, these are Pseudo-classes by Nishant Dogra (@mrdogra007) on CodePen.