How to select all div object between two header?

[diobrando]

How to select all div object between two headers?

I want to select any “div” items between two headers.
In this example:

I want to select “div” items between header(3-2) and between header(3-2) and padding-left the text as the header on the top of this selection.

[efemkay]

Is this somewhat related to ur other post here (How to indent the body text according to the header? - #7 by diobrando)?

I’m not sure abt select any (specific div) but u can select all divs after h3 by using the following (high level) css

.el-h3 ~ div { ... }

As per the other post, this will need contextual typography plugin (giving html layout the .el-xxx classes above).

Also note that the above applies to all items after .el-h3 (when u have more than one h3 heading). U can specify further by targeting h3 with specific title like below

.el-h3[data-heading="Journal"] ~ div { ... }

The above assumes u r targeting h3 with title “Journal”

Perhaps a demo using word processor of what u want to achieve can help others to understand and contribute to solve ur issues

[diobrando]

Yes, is related.
If I use your first code, the padding-left add all next div like an infinite stair.
I cant use the second code, but the problem it’s the same.

[efemkay]

i hope this is what u want to achieve? worth noting two things

1. as mentioned in the other post, this would require contextual typography plugin (so far there’s no way around it)
2. i use margin-inline-start as i feel it is safer (if u use padding, it might not look great if u decide to do border or background later on. also margin-left would do fine as well)

---

css for test paragraph 2. this require a bit more complicated css coding, but it will adjust for all elements “sub” of the header 3

.el-h3 ~ div:not(div[data-tag-name^="h"]) {
    margin-inline-start: 1.5em;
}

css for test paragraph 3. this one less complicated (targeting only <p> elements “under” header 3) but easier to duplicate in case u need to do the same for h2 or h4 and so on.

.para-adjust2 .el-h3 ~ div > p {
    margin-inline-start: 1.5em;
}

[diobrando]

The first code doesn’t work, don’t change anything.
The second code keeps all line at the same padding, look.