Make 1st one do this, and others do that

Is there a way - I know there is - to make it so the first occurrence of my < h2 > has padding: 0; and all other occurrences have a padding: 1em 0 0 0;

(I need to space out sections using the heading, but my padding: 1em 0 0 0; screws up the first section and pushes it too far away from the masthead.)

Thanks.

Basic CSS

Either give the tag an id / class or style all then over-ride with
https://developer.mozilla.org/en-US/docs/Web/CSS/%3Afirst-of-type

That doesn’t look very useful as shown in the example in the link.

I don’t want the first of everything in the parent to get styled.

On my home page, I have sections of links (e.g. News, Sports, Lifestyle, Entertainment). I add spacing between each group adding top padding to the < h2 >, but I don’t want a space between the first one (i.e. News) and the menu.

If I used what you suggested, I can see it causing issues with things as simple as a < p > or a < li >, you know?

This is just giving you another option of how to obtain what you’re trying to achieve.

What @Mittineague is saying is correct. It is just basic CSS. If you don’t want padding on h2, add a class or an Id to it
for example:

<h2 class="no-space"></h2>
<h2></h2>

Your css would look something like this:

h2.no-space{padding:0;}
h2{padding:1em;}

or however you would have it.

Wrong page

https://developer.mozilla.org/en-US/docs/Web/CSS/%3Anth-of-type

i.e.
h2:nth-of-type(1)

2 Likes

Instead of applying the padding to the <h2>, how about putting it on th bottom of the <section>?

section { padding: 0 0 1em 0 ;}

Ha ha. I was just going to ask if the nth pseudo thing would help me out! :smile:

In reality, I have an < h2 > followed by an < ul >, but yes, I could do the same thing.

This is an example of why I never get anything done - I toss and turn over refactoring issues like this forever!

Maybe adding bottom-padding to my < ul > would be better. Six of one…

1 Like

It seems the more logical choice to me, as you want to separate the h2 from a previous section, but not the header.

1 Like

This idea will help me tonight instead of counting sheep! (Where should I add padding…) :wink:

A nice explanation…

CSS-Tricks: nth-of-type

Not for the faint-hearted but if your page is well structured you can also use the lobotomized owl selector to good effect.:smile:

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style>
* {margin:0;}/* quick and dirty reset for demo only */
body {padding:0 10px}

* + * {margin:1em 0 0}
section {border-top:5px solid red;}
</style>
</head>

<body>
<section>
		<h2>Section Heading no margin top</h2>
		<p>content</p>
		<p>content</p>
		<p>content</p>
		<p>content</p>
		<h2>Mid heading has margin-top</h2>
		<p>content</p>
		<p>content</p>
		<p>content</p>
		<p>content</p>
</section>
<section>
		<h2>Section Heading no margin top</h2>
		<p>content</p>
		<p>content</p>
		<p>content</p>
		<p>content</p>
		<h2>Mid heading has margin-top</h2>
		<p>content</p>
		<p>content</p>
		<p>content</p>
		<p>content</p>
</section>
</body>
</html>

I started reading the link, but the author sounded like really stuffy college prof who likes to use big words that add no value.

Care to give us busy mortals a Cliff’s Notes version of what owls give us? :smile:

A way to style the second and subsequent occurrences of a tag differently to the way the first occurrence is styled.

In Paul’s example it would be all the <p> tags except those that immediately follow <h2> tags.

based on the first paragraph or two, the author made it sound like his approach was some large paradigm shift from how most people use CSS. That is what I was curious about. (Guess I’ll have to bookmark it for later because it sounds “deep”!)

It sounds deep because he is using the universal selector, * + *

Classically, the same type of 2nd-sibling-plus targeting would be written

p + p {margin-top:...etc...}

That CSS2 notation has been around for years. I use it frequently.

You can define the inline stylesheet for the first “h2” tag and use basic css for the rest ones.

Inline styles are really not the way to go. They can make maintenance of a site a nightmare, and negate the advantages of using a CSS style sheet.

inline styles will be good for SEO, especially for page speed.

I’m afraid you’ll need to explain that, because I cannot see how they would affect SEO in any way. It sounds like sheer nonsense to me.

[quote=“hanhtrinhxanh20, post:20, topic:206409”]
especially for page speed.
[/quote]If your styles are in a style sheet, it needs to be downloaded once, and is cached by the browser. Inline styles increase the size of the page, so each style you add inline increases the page weight. I’d have thought that if it had any perceptible effect, it would slow loading time.

Do you have a reliable source to back up your assertions?