How to style every element which has an adjacent item right before it?

To style every element that has an adjacent item right before it, you can use the CSS adjacent sibling selector (+). The adjacent sibling selector selects elements that immediately follow another specific element. Here’s an example:

/* Select every element that has an adjacent item right before it */
.previous + * {
  /* Styles */
}

In this example, the .previous + * selector targets any element that immediately follows an element with the class .previous. You can replace .previous with a different class or selector to match the specific element you want to target.

For instance, if you want to style paragraphs that have a heading right before them, you can use the following CSS:

h2 + p {
  /* Styles applied to paragraphs with an adjacent h2 heading */
}

In this case, the h2 + p selector selects paragraphs (<p>) that directly follow an h2 heading. The specified styles will only be applied to those paragraphs.

Using the adjacent sibling selector allows you to target and style elements based on their immediate sibling elements, providing flexibility in applying specific styles to elements in relation to their adjacent counterparts.

error: Content is protected !!