Styling Elements with No Siblings: The Power of :only-of-type in CSS

• Parent Element
  This is the element that contains the element you want to style.
• Siblings
  These are other elements within the same parent element that share the same tag name.
• Element
  This refers to the HTML tag you want to style, like h1, p, or div.
• :only-of-type
  This is the actual selector you use in your CSS code.

Example

<div>
  <h1>This is a heading</h1>
  <p>This is a paragraph</p>
</div>

Here, if you use the following CSS:

h1:only-of-type {
  color: red;
}

Only the <h1> element will be styled red because it's the only element of its type (h1) within its parent (div). The <p> element won't be affected because it has a sibling (the <h1>).

• However, :only-of-type has lower specificity than :first-of-type and :last-of-type combined.
• It offers a more concise way to target single elements compared to using :first-of-type and :last-of-type together.
• You can use :only-of-type on any element type.

---

Styling the only image in a section

<section>
  <h2>My Favorite Things</h2>
  <img src="image.jpg" alt="Image description">
  <p>Here's a list of things I like.</p>
</section>

section img:only-of-type {
  border: 5px solid #ddd;
  margin: 10px;
}

This code applies a border and margin only to the img element if it's the only one inside the section element.

Highlighting the single definition term

<dl>
  <dt>Term</dt>
  <dd>Definition</dd>
</dl>

dl dd:only-of-type {
  font-weight: bold;
}

This code makes the dd element bold if it's the only definition term within the <dl> (definition list).

Emphasizing the sole navigation link

<header>
  <a href="#">Home</a>
</header>

header a:only-of-type {
  background-color: #eee;
  padding: 5px 10px;
}

This code adds a background color and padding to the a element only if it's the single link inside the header.

---

Combining :first-of-type and :last-of-type

element:first-of-type:last-of-type {
  /* Your styles here */
}

Example

<div>
  <h1>This is a heading</h1>
</div>

h1:first-of-type:last-of-type {
  color: red;
}

This achieves the same result as using :only-of-type in the previous example, but with slightly lower specificity.

Combining child selectors and negation (not)

parent element > element:not(~sibling) {
  /* Your styles here */
}

• sibling: Replace this with the specific sibling element type you want to exclude (e.g., p, h2).
• ~: The tilde symbol selects siblings of the target element.
• parent element: Selects the parent element of the target element.

Example

<div>
  <h1>This is a heading</h1>
  <p>This is a paragraph</p>
</div>

div > h1:not(~p) {
  color: red;
}

This code makes the <h1> element red only if it doesn't have a sibling paragraph element (<p>).

Using a unique class

If you have complete control over the HTML structure, assigning a unique class to the element you want to style is the most straightforward approach.

Example

<div>
  <h1 class="special-heading">This is a heading</h1>
</div>

.special-heading {
  color: red;
}

This ensures the styles only apply to the element with the class special-heading.

• Use a unique class for the most control and maintainability.
• Use parent element > element:not(~sibling) when you need to exclude specific siblings.
• Use :first-of-type:last-of-type if you're confident the element will always be the only one of its type.