I have done many websites in the past and had to set specific attributes for multiple items that were really the same item but because of its positioning, I couldn’t use all the same values.  What do I mean with this?

Let’s say you have a column with 4 blocks in it.  We are gonna say it is the side bar and you have the following items in it:  Specials, Product of the Week, Upcoming Events and Sponsored Ads.  I am referencing a site I did for VIP Billiards.

Now in that side bar, you want spacing between each section.  So in this case, I used my <h3> tag to create the spacing and I set the value to 1.5em.  But when I do that, I feel like my spacing at the top of the column is too large.  How do we fix that in a quick manner without having to have a new class for the <h3> tag?

Simple, we add a “first-child” to the <h3> tag.  We re-adjust the {margin-top} to 1.0em; and then add the following code:

h3:first-child {

margin-top: .5em

}

By doing this, we give the first <h4> tag in that column only a .5em margin at the top and give the spacing for the rest a 1.0em margin.

Now we have nice spacing between the navigation bar and the column as well between each section.  And because we added a “first-child” for the <h3>, it works for any section that has an <h3> tag.

Using a first-child can fix other issues as well.  Maybe you want to set the spacing between a few images but you don’t want a margin to the left on the first image.  Use a first-child for your images.

Now if we can use a first-child, then that should mean we can use a “last-child” as well.  Test it out, let me know how it works for you.

Happy coding!!

-Jim

PS:  10/25/2014 – Since writing this and making minor adjustments, I re-adjusted my <h3> by adding a padding-top: 6px; and a padding-bottom: 6px; and with the h3:first-child {padding-top:0px;}.  This helped with page layout a little better than how it is written above. CSS is so versatile that there are many ways to “skin a cat”.