How would you change the color of a paragraph that immediately follows a heading?

0-2 years experience

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

2-5 years experience

1. 1A 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. 2Our 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. 3We’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. 1We’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. 2In 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. 3How would you approach this problem if the headings and paragraphs are rendered by different micro-frontends with isolated CSS scopes?

8+ years experience

1. 1We’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. 2Our 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. 3A 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?