How Can I Use CSS to Style a Paragraph Only When It Directly Follows a Specific H1 Element?

Understanding the CSS Adjacent Sibling Selector

When styling HTML elements, the ability to target specific elements based on their relationships is crucial. This is where the CSS adjacent sibling selector comes in.

Problem Statement

Consider the following HTML and CSS code:

<h1></h1>

The goal is to ensure that every

tag that follows the h1.hc-reform element has the property clear: both.

Incorrect Attempt

The attempt made:

h1.hc-reform > p {
  clear: both;
}

does not work because the > selector selects only direct child elements. In this case, the

tag is not a direct child of the h1.hc-reform element.

Adjacent Sibling Selector

To achieve the desired result, the adjacent sibling selector must be used. It is represented by a plus sign ( ).

h1.hc-reform + p {
  clear: both;
}

This selector targets elements that come immediately after the specified element, in this case, the

tag immediately following the h1.hc-reform element.

Note: The adjacent sibling selector is not supported in Internet Explorer 6 and earlier versions.

The above is the detailed content of How Can I Use CSS to Style a Paragraph Only When It Directly Follows a Specific H1 Element?. For more information, please follow other related articles on the PHP Chinese website!