Geek asks and answers

Removing the top margin from the first element using modern CSS

Is it possible with CSS and the last Chrome or Firefox to automatically remove the top field from the first tag, <h1>or do I still need to use jQuery?

+3
source share
5 answers

You just need h1:first-child { margin-top: 0px; } demo

+8
source

There is no selector :first-of-page, so no, you cannot use CSS exactly. In no way in CSS do not extract all h1 from the page, regardless of their parents and previous siblings, and take only the first. You need to know a little more about your h1 elements.

Examples:

  • h1, ( ) body > header ( #header HTML 4.01)
  • h1 , h1:first-of-type
  • h1 , body > nav + section > h1 . , , body > header > nav + section > h1:first-of-type
+3
div#content h1:first-child { margin-top:0; }

AFAIK This will not work in IE6 and may be a bug in IE7.

0
source

Pseudo-selectors.

h1:first-child {
    margin-top: 0;
}

Please note that they are not supported in Failbrowsers (IE 7 and previous), so you may need a jQuery backup solution.

0
source

Add the class to the h1 tag, for example:

<h1 class="first">Your text</h1>

Then in css:

.first
{
    margin-top: 0;
}
-1
source

More articles:


All Articles