Search code examples
csscss-selectorspseudo-class

Give headers margin-top unless they sit flush with container div?

I have an online document that has two columns of body text (each paragraph in p tags), with a top-level <h1>/<h2> title and multiple inline <h3>'s.

The CSS I'm using to style the columns isn't relevant to my question, but the basic HTML is as follows:

<h1>Page</h1>
<h2>Article Title</h2>

<div.container><!--Begin container-->

  <div.col1>
    <h3>article heading level 2</h3>
    <p>Paragraph...</p>
    <h3>article heading level 2</h3>
  </div>

  <div.col2>
    <p>Paragraph...</p>
    <h3>article heading level 2</h3>
    <p>Paragraph...</p>
  </div>

...and so on

</div><!--End container-->

I would like to style my <h3> tags so that the tags at the top (i.e. the first <h3> of each column) sit flush with the top of the container, but the all other <h3> tags have a top-margin.

The end goal is to find an elegant CSS treatment that will give my <h3>'s greater vertical space (margin-top) than my paragraphs without me having to go through and add a custom selector to each <h3>.

I was hoping that there was some way I could use pseudo classes to this effect.

Solution

  • You could use :not(:first-child) to achieve this:

    div.container > div > h3:not(:first-child) {
   margin-top:30px;
}

    This will apply the styling to all <h3> elements which are not the first child as you wish.

    jsFiddle here.

    Please note that :not() isn't supported in IE8 and before.

    If you happen to be using the jQuery library and would like for this selector (amongst support for various other pseudo-selectors) to work in IE8 and before, you could look into Selectivzr.