Targeting the first instance of a html tag type in a div

HTML & CSS
1

I’m trying to use CSS to give the first table in the div (Content) a bottom-padding of 10px.
This is what I have so far, but is it not working?

Content table:first-child {
padding-bottom:15px;
}
Im trying to apply it here…
http://fixmysite.us/gmpc/?page_id=365#

2

The table is not the first child of the Content div. (The H1 is.)

You could try something like

#content > table {}
3

dang… its not working.
Since it always the first table after the h1 tag in the Content div, shouldn’t the adjacent selector work?
h1 + table {
padding-bottom:15px;
border-color:#00FF00
}

4

I hope you are aware of the browser compatibility limitations of :first-of pseudo classes. That being said, let’s clear up some concepts.

PAR >EL , will select ANY ‘EL’ that’s a DIRECT CHILD of PAR ( in other words it will not target other lower descendants)
PAR EL:first-child, will select said ‘EL’ only if it happens to be the FIRST DIRECT CHILD.

Along the same line, ‘+’ selects the only if the element is the very NEXT element. (<h1></h1><table>…) but not (<h1></h1><div></div><table>)
“~” would target the ANY AND ALL tables after THE H1 ( you could always reset h1~table{}/h1 ~table~table{} but that’s convoluted, I think)

you may be looking for :PAR EL:first-of-type
Again do note the limited support.

Hope that helps

5

Anyhow, the padding is not showing visibly because of some weirdness with the tables, which you don’t need to be using here anyhow.

6