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

[lukeurtnowski]

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#

[ralph.m]

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

You could try something like

#content > table {}

[lukeurtnowski]

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
}

[dresden_phoenix]

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

[ralph.m]

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