CSS - Successive Indenting of Siblings After Headings

Creating cascading Heading tags with CSS sibling selectors

I honestly don't entirely understand why you want to do this. It seems cleaner to just always indent h2 elements. But I'll assume you have your reasons. You can fix this by making the h1 selector more specific than the other selector so that it takes precedence:

html body h1 {margin-left:0em;color: red;}
h1 ~ *:not(h1) {margin-left: 1em;color: blue;}
h2 ~ *:not(h2) {margin-left: 2em;color: green}

In this way, even though the 2nd h1 matches both the first and 3rd selectors, the first now takes precedence since it is more specific.

http://jsfiddle.net/LUPD5/

Indent everything after h1, h2, etc. before the next, one, while stacking the indents, with CSS

I think all you really want is each progressively lower heading indented the same amount, and the paragraphs indented with respect to whatever heading they fall after. We'll use the subsequent sibling combinator (~) for that, as you did, which only selects siblings after the selector.

For standard readability all headings of the same level should be indented the same amount. Paragraphs are probably less important in that regard. I'm assuming that you'll adhere to proper document structure and not place an H3 immediately after an H1, for example.

Here I've defined a CSS variable using a custom property* so that the indent factor can be updated at just one place and calculated for each rule. I've opted to use rem units for size consistent scaling across element types, but you could certainly use em units for variable indentation, or simply px.

:root {
  --indent-unit: 1rem;
}

h2 {
  text-indent: calc(var(--indent-unit) * 1);
}

h2~p,
h3 {
  text-indent: calc(var(--indent-unit) * 2);
}

h3~p,
h4 {
  text-indent: calc(var(--indent-unit) * 3);
}

h4~p,
h5 {
  text-indent: calc(var(--indent-unit) * 4);
}

<h1>Heading Level 1</h1>
<h2>Heading Level 2</h2>
<p>Paragraph.</p>
<p>Paragraph.</p>

<h3>Heading Level 3</h3>
<p>Paragraph.</p>
<p>Paragraph.</p>

<h2>Heading Level 2</h2>
<h3>Heading Level 3</h3>
<h4>Heading Level 4</h4>
<p>Paragraph.</p>
<p>Paragraph.</p>

Indent all tags following h2 until next h2 is hit using CSS

It sounds like you want to indent all siblings after the first h2 except other h2s, in which case this should do the job:

h2 ~ *:not(h2) {
    margin-left: 10px;
}

See the general sibling combinator and the negation pseudo-class as well as a live demo on jsbin.

CSS indent everything except headers

Well you should give the not indented text a tag. It doesn't matter what tag, just not an H2-tag. CSS style will not apply without the text having a tag.

<h2>Not indented</h2>
<p>THIS SHOULD BE INDENTED</p>
<p>THIS SHOULD BE INDENTED</p>
<div>THIS SHOULD BE INDENTED</div>
<h2>Not indented</h2>

http://jsfiddle.net/xm71wr2a/1/

general sibling selector used to style target:pseudo class

From the Mozilla Developer Network:

The ~ combinator separates two selectors and matches the second
element only if it is preceded by the first, and both share a common
parent.

So in the following selectors:

#home:target ~ #header #navigation #link-home

if #header is succeeded in the markup by the content addressed by #home:target, it won't be matched.

How to select an element appearing after another in css?

Adjacent Sibling Selector (+)
The adjacent sibling selector is used to select an element that is directly after another specific element.

Sibling elements must have the same parent element, and "adjacent" means "immediately following".

The following example selects the first

element that are placed immediately after elements:

H1 + p {
  background-color: yellow;
}

Try it here.https://www.w3schools.com/css/css_combinators.asp

Why is an element with position: fixed moving with a non-positioned sibling?

With position: fixed, your header element is removed from the document flow.

The first in-flow element is main, which has margin-top: 90px in your code.

The parent of this element is body, which normally has a default margin: 8px (see HTML default style sheet).

Due to CSS margin collapsing, the body element's margin-top: 8px is collapsed with the main element's margin-top: 90px.

As a result, both elements, now having the same margin, shift down 90px.

html {    background-color: green;    height: 100%; }
body {    background-color: pink;    height: 100%;}
header {   position: fixed;   border: 1px solid red;}
main {  margin-top: 90px;  background-color:yellow;}

<header>Project Header</header> <main class="container" id="layout-mainContent">    <div class="row" id="first-row">somecontent</div></main>

---

Related Topics