Am I using the CSS parent > child selector correctly?

Question

I have the following markup:

<div id="footer">
    <a href="/">Home</a> | 
    <a href="/about">About</a> | 
    <a href="/contact">Contact</a>
</div>

With the following styling:

#footer {
    position: relative;
    float: left;
    background: white;
    width: 960px;
    height: 50px;
    border-bottom-left-radius: 50px;
    border-bottom-right-radius: 50px;
    -moz-border-radius-bottomleft: 50px;
    -moz-border-radius-bottomright: 50px;
    box-shadow: 2px 2px 3px #000;
    -moz-box-shadow: 2px 2px 3px #000;
    -webkit-box-shadow: 2px 2px 3px #000;
}
#footer > a {
    padding-top: 10px;
}

Is there any particular reason that the padding isn't applied to all of the child <a> elements of my #footer div?

I'm trying a similar effect without a parent > child selector somewhere else on my page, so I'm assuming it's a problem with my selector.

Browser version: Chrome 11 Beta Mac OS X

The first thing you need to put down is browser model and version. Many older versions of IE do not support the immediate-child selector, e.g. Also, you need to specify what you mean by "not working". — Stephen Chung
– Stephen Chung, Commented Apr 18, 2011 at 3:57
turn on Chrome's developer tools, point to the <a> tag in question, and check its padding. There can be millions of reasons why it doesn't show up -- for example, has it been overwritten by a higher-priority rule? — Stephen Chung
– Stephen Chung, Commented Apr 18, 2011 at 4:07
maxdesign.com.au/articles/inline --- top padding is generally ignored for elements that are display: inline; — gnarf
– gnarf, Commented Apr 18, 2011 at 4:23

Community · Accepted Answer · 2017-05-23 11:47:42Z

2

@boss, <a> is an inline element not a block element. so, vertically margin & padding only working on block element . Then define display:block in your a tag for more information please check this Why do bottom padding and bottom margins not help to add vertical spacing between these links?

edited May 23, 2017 at 11:47

CommunityBot

11 silver badge

answered Apr 18, 2011 at 4:32

sandeep

93.2k24 gold badges140 silver badges156 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

BoltClock · Accepted Answer · 2011-04-18 11:00:55Z

1

Would #footer a:first-child do it?

-- Answer from the comments below --

Ahh, they're all inline. To define padding separate from the others they need to be "block" elements, floating next to each other?

Adding

#footer a { display:block; float:left; }

would give you the ability to give the first one padding the other two don't have

edited Apr 18, 2011 at 11:00

BoltClock

728k165 gold badges1.4k silver badges1.4k bronze badges

answered Apr 18, 2011 at 4:03

jamie-wilson

1,92521 silver badges38 bronze badges

7 Comments

jamie-wilson Over a year ago

I get the right response using the browser you mentioned. It doesn't seem to discriminate between elements using the '>' though. jsbin.com/oqova4/edit

Qcom Over a year ago

I am using node.js if that makes any difference. Should I post my server and port number?

jamie-wilson Over a year ago

I really doubt that would be affecting your CSS. If you can get your design working in jsbin or a standalone HTML file, then it could be nodejs - but to start with I couldn't see how that would affect it. "Apple Alt J" into Dev Tools, and check the styling (as Stephen Chung above mentioned) and check the styling on each element

Qcom Over a year ago

Try this (jsbin.com/acahe6/3) rough version of what my page looks like. By checking the dev tools, I'm getting no padding. Maybe it is being overwritten.

jamie-wilson Over a year ago

Adding #footer a { display:block; float:left; } would give you the ability to give the first one padding the other two don't have.... But they look fine inline?

|

Hristo · Accepted Answer · 2011-04-18 04:34:00Z

1

I'm not quite sure why this isn't working, however as a remedy, I recommend wrapping all your links in like a div and giving that a margin-top. Check out the fiddle...

http://jsfiddle.net/Ft7Tr/

I hope this helps.
Hristo

answered Apr 18, 2011 at 4:34

Hristo

46.7k68 gold badges169 silver badges235 bronze badges

Collectives™ on Stack Overflow

Am I using the CSS parent > child selector correctly?

3 Answers 3

Comments

7 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

7 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related