HTML CSS SQL Meta tag Generator ScrollBar design Generator Encode Decode images

CSS Basics

Introduction Syntax Selectors Attribute Selectors Specificity Combinators !important Comments Colors

CSS Need to Know

Box Model Pseudo-class Pseudo-element Inline-block Math Functions Max and Min Opacity Outline Overflow Z-index Float

Most used

Align Backgrounds Borders Text Units Padding Margins Position Tables Display Fonts Lists Height and Width

CSS Reference

CSS Properties reference CSS Pseudo-Classes reference CSS Pseudo-Elements reference CSS Selector reference

CSS Element: only-child

The :only-child CSS pseudo-class represents any element that is the only child of its parent.

Let's look at an example to understand how :only-child works:

Result:

    <div>
      <p>This paragraph is the only child of the div element</p>
    </div>
  

This paragraph is the only child of the div element

In the example above, the <p> element is the only child of the <div> element. We can target this element using the :only-child CSS pseudo-class.

Here is an example of how to style the <p> element using the :only-child pseudo-class:

Result:

    <style>
         div p:only-child {
                 color: blue;
          }
    </style>
    <div>
      <p>This paragraph is the only child of the div element</p>
    </div>
  

This paragraph is the only child of the div element

In the example above, the <p> element is styled with a blue color because it is the only child of the <div> element.

By using the :only-child CSS pseudo-class, you can target elements that are the only child of their parent and apply specific styles to them.

.dead {
   bottom: -6912px;
}