CODEWITHSUNDEEP
htmlcss
Xiphias
Xiphias

Reputation: 4716

CSS for elements following or preceding another element, not nested

I am using markdown to write my text, so I do not have control over the HTML elements. Therefore, this is given:

<h2>Headline</h2>
<p>A paragraph</p> // standard bottom-margin to next <p>
<p>Another paragraph</p> // double bottom-margin should apply here because the next element is h2

<h2>Another Headline</h2>
<p>And another paragraph</p> standard bottom-margin to next <p>

Is there a css-related approach --- or any at all --- to apply a larger margin between <p> and the next <h2> than between all the other <p> to <p> transitions?

I'd like to explicitly control those <p>s that come before a new <h2>, but not any other.

I'm using float so that a simple <h2> top-margin does not help.

This is what my site looks like:

enter image description here

Upvotes: 1

Views: 128

Answers (3)

Atul Gupta
Atul Gupta

Reputation: 755

h2:before {display:block;margin-top:20px;height:20px;content:"";background:#aaa;}

rough example http://jsfiddle.net/eHreL/

Upvotes: 1

Emil
Emil

Reputation: 7256

Edit: As per your edit this isn't what you're looking for.

You can control the h2's instead, for instance:

h2:not(:first-child) {
    margin-top: 10px;
}

This will create a margin of 10px above every h2 except the first.

Upvotes: 2

I don&#39;t use this profile anymo
I don&#39;t use this profile anymo

Reputation: 2676

How about the sibling selector? 

h2+p {/*your styles here*/}

Reference: http://css-tricks.com/child-and-sibling-selectors/

Upvotes: 4

Related Questions