Question

I would like to set the css margin attribute of a standard tag (p h1…h6 ul li) to be dependent on the element that immediately precedes or follows the tag. For example, I’d like to set the margin-top of h1 to 10px if the element before it in the DOM is p, but to 20px if the element before it is /ul. I need to accomplish this using just css, without the use of spacers or divs — because the content is inserted by CMS users who can’t be expected to do anything beyond applying ordinary p h1…h6 ul li to their text.

Is this possible with css?

Thanks!

Answer 1

You can use the adjacent sibling CSS selector:

p + h1 {
   margin-top: 10px;
}

Will apply margin-top of 10px to h1 elements immediately following a p element.

Here’s a good article on the subject.