To change the style of a paragraph that immediately follows a heading, you can use the adjacent sibling combinator (+). This targets only the first element directly after the specified element.

Key Points

1
Syntax: h1 + p selects the first <p> that immediately follows an <h1>.
2
Only the next sibling is targeted; other paragraphs or siblings are not affected.
3
Useful for styling content that follows headings consistently without adding extra classes.

Example: Adjacent Sibling Combinator

Difficulty: 3/10

Topics: CSS sibling selectors, HTML structure dependency, specificity and inheritance

Scenario Questions

0-2 years experience

1
How would you write CSS to make the paragraph right after an h2 turn red, but leave other paragraphs unchanged?
2
What happens if you use h1 ~ p instead of h1 + p? Can you explain the difference in behavior?
3
You applied the selector but the paragraph isn’t changing color — what are the first three things you’d check?

2-5 years experience

1
A designer says the paragraph after any heading should be styled differently, but now the styling breaks when we add a caption between the heading and paragraph — how do you fix it without changing the HTML?
2
Our team’s CSS file has 500+ rules — a paragraph after a heading stopped styling after a recent update. How would you debug which rule is overriding it?
3
We’re using a CMS that sometimes inserts empty divs between headings and paragraphs. How do you ensure the styling still works reliably?

5-8 years experience

1
We’re building a reusable content component that renders headings and paragraphs dynamically — how do you design the CSS to be robust against unpredictable DOM structure while keeping specificity low?
2
In a large-scale documentation site, we need to style paragraphs after headings differently based on section type — how would you structure the CSS to avoid specificity wars and enable theming?
3
How would you approach this problem if the headings and paragraphs are rendered by different micro-frontends with isolated CSS scopes?

8+ years experience

1
We’re migrating a legacy site with hundreds of pages using inline styles and table-based layouts — how do you systematically enforce consistent heading-paragraph styling without breaking existing content or requiring full HTML rewrites?
2
Our design system needs to support multiple themes and accessibility modes — how would you architect the CSS layer to allow dynamic styling of heading-following paragraphs without increasing bundle size or runtime complexity?
3
A cross-team component library is being adopted company-wide, but different teams are using inconsistent heading hierarchies. How do you design a CSS strategy that scales across teams while minimizing maintenance overhead and enforcing semantic correctness?

Follow-up Questions

❓What if the heading isn't an h1 but an h2? How would you adjust?
❓What happens if there's a comment or whitespace between the heading and paragraph?
❓How would you handle this if the structure is generated dynamically by a framework?