CSS/SCSS rules for representing different level content of a post

Question

I plan to use shift amount to represent the structure of a post consisting of different level content. The deeper the content is, the more the content is shifted right. For example,

<h1>Part1</h1>
This is a post about Universe.

<h2>Part1.1</h2>
First we talk about the Galaxy.

Facts about the Galaxy.
Now you know the Galaxy.

<h3>Part1.1.1</h3>
More details about the Galaxy.

<h2>Part1.2</h2>
Facts aoubt another galaxy.

<h1>Part2</h1>

I want the is no padding before This is a post about Universe., a 100px padding for <h2>Part....you know the Galaxy, a 200px padding for <h3>....details about the Galaxy.. I think css/sass can do this, but I don't know how to choosing thde corresponding elements.

score 0 · Answer 1 · answered Oct 17 '16 at 07:39

0

Here's an example, applied to your markup:

h2 {
  padding: 100px 0;
}
h3 {
  padding: 200px 0;
}

<h1>Part1</h1>
This is a post about Universe.

<h2>Part1.1</h2>
First we talk about the Galaxy.

Facts about the Galaxy.
Now you know the Galaxy.

<h3>Part1.1.1</h3>
More details about the Galaxy.

<h2>Part1.2</h2>
Facts aoubt another galaxy.

<h1>Part2</h1>

answered Oct 17 '16 at 07:39

Nick Ribal

1,959
19
26

No, you misunderstand the question. I also need the content between headers have a padding before them. – Cauchy Schwarz Oct 17 '16 at 19:12

score 0 · Answer 2 · answered Oct 18 '16 at 12:43

0

You need the use some element like div.

You can check this fiddle https://jsfiddle.net/kh50e9nz/

h2, h2 + * {padding-left:100px;}
h3, h3 + * {padding-left:200px;}

answered Oct 18 '16 at 12:43

Eren Akkus

471
4
11

It doesn't work If I have two divs under the h2 tag. https://jsfiddle.net/kh50e9nz/6/ – Cauchy Schwarz Oct 19 '16 at 07:02
so if you have two divs under the h2 tag, h2, h2 + *, h2 + * + * {padding-left:100px;} – Eren Akkus Oct 19 '16 at 08:11
The number of divs under the h2 tag is not fixed. I want to write a css/sass rule to apply to these situations no matter how many divs under the h2 tag. Maybe I have to use JQuery according to this [link](http://stackoverflow.com/questions/32035432/select-all-elements-between-two-known-elements-by-css-selector) – Cauchy Schwarz Oct 19 '16 at 10:38
So the key is the `~` selector. But it's not enough because for a expression `a ~ b` it doesn't require the precedence to be the closest _a_ element before _b_ . If we only have a limited number of CSS rules like `path ~ b`, when there are such many elements before the _b_ element that any `path ~ b` rule can be applied, then the result just depends on the last rule. That's not the result I want. This is an [example](https://jsfiddle.net/kh50e9nz/9/). – Cauchy Schwarz Oct 19 '16 at 14:22

CSS/SCSS rules for representing different level content of a post

2 Answers2