Select all
after
tag

Question

This question might sound strange since an easy way to handle it is just to add a specific class or id to those

. But my html is rendered by some other tools so that I cannot manage those specific <p> myself, but I just want to padding the <p> after <h3> here. Those <p> are all children of a <section>, the code

<h3>ipsum</h3>
<p>lorem</p>
<p>foo</p>

I tried to solve this problem with h3 + p selector, but it can only do change to the first <p>. I want to select all the p after h3.

https://developer.mozilla.org/en-US/docs/Web/CSS/General_sibling_selectors — Sirko, Jul 03 '18 at 07:56
`+` has a companion, `~` … https://developer.mozilla.org/en-US/docs/Web/CSS/General_sibling_selectors — CBroe, Jul 03 '18 at 07:56

score 3 · Accepted Answer · answered Jul 03 '18 at 07:57

3

Just use the general sibling selector ~ (instead of the adjacent sibling selector +):

h3 ~ p {
  color: red;
}

<h3>ipsum</h3>
<p>lorem</p>
<p>foo</p>

answered Jul 03 '18 at 07:57

connexo

53,704
14
91
128

I thought sibling are used under the case where they are all children to `
`, thanks for pointing out.
– Zhen Xu Jul 03 '18 at 08:53

score 2 · Answer 2 · edited Jun 20 '20 at 09:12

+ : The + combinator selects adjacent siblings. This means that the second element directly follows the first, and both share the same parent.

~ : The ~ combinator selects siblings. This means that the second element follows the first (though not necessarily immediately), and both share the same parent.

So, use ~ instead of +

h3 ~ p {your code...}

h3 ~ p { background-color:yellow }

<h3>ipsum</h3>
<p>lorem</p>
<p>foo</p>

Select all after tag

tag

2 Answers2

`, thanks for pointing out.

Select all
after
tag