Problems Targeting First a Tag using a:first-child

[Planet13]

Hi all:

I want to target the left padding of the first a tag, but this is not working:

<div id="inclfile">
Click Links Below to View More Styles<br> <a href="javascript:changePhoto('/images/shoes-cb/branded_bella.jpg')">Branded Bella</a> | <a href="javascript:changePhoto('/images/shoes-cb/branded_bella_side.jpg')">Branded Bella Side View</a> | <a href="javascript:changePhoto('/images/shoes-cb/wildflower.jpg')">WildFlower</a> | <a href="javascript:changePhoto('/images/shoes-cb/wildflower_side.jpg')">WildFlower - Side View</a>
</div>

#inclfile a {padding: 0 10px 0 10px;} /*add padding to all a tags */
#inclfile a:first-child {padding-left: 0;} /* remove left padding from first a tag */

But it still shows left padding on the first a tag.

Any help appreciated.

P.S. I have also tried

#inclfile a:first-child {padding: 0 10px 0 0;}

and that did not work, either...

[Planet13]

Hmmm...

I see when I remove that br tag, it works.

So I tried the following, and none of them worked:

#inclfile br a:first-child {padding: 0 10px 0 0;}
#inclfile > br a:first-child {padding: 0 10px 0 0;}
#inclfile > br > a:first-child {padding: 0 10px 0 0;}
#inclfile br > a:first-child {padding: 0 10px 0 0;}

Yes, I WAS just trying to throw the kitchen sink at it hoping it would work.

Alas, no cigar...

[Demaestro]

first-child literally has to be the first child of it's parent.... not the first of it's type, but the first child.

<div id="inclfile">
Click Links Below to View More Styles<br> <a href="javascript:changePhoto('/images/shoes-cb/branded_bella.jpg')">Branded Bella</a> | <a href="javascript:changePhoto('/images/shoes-cb/branded_bella_side.jpg')">Branded Bella Side View</a> | <a href="javascript:changePhoto('/images/shoes-cb/wildflower.jpg')">WildFlower</a> | <a href="javascript:changePhoto('/images/shoes-cb/wildflower_side.jpg')">WildFlower - Side View</a>
</div>

In the above example, the <br> tag is the first child, that is why when you remove it, it works.

In the following example it shows the <a> tags wrapped in a <span> tag leaving the <a> tags to be the only children. This way first-child last-child will always work for your <a> tags.

<div id="inclfile">
Click Links Below to View More Styles<br> <span><a href="javascript:changePhoto('/images/shoes-cb/branded_bella.jpg')">Branded Bella</a> | <a href="javascript:changePhoto('/images/shoes-cb/branded_bella_side.jpg')">Branded Bella Side View</a> | <a href="javascript:changePhoto('/images/shoes-cb/wildflower.jpg')">WildFlower</a> | <a href="javascript:changePhoto('/images/shoes-cb/wildflower_side.jpg')">WildFlower - Side View</a></span>
</div>

[Planet13]

Thanks for the explanation, Demaestro.

It worked fine.

I guess the lesson here is:

a br tag can BE a child, but it can't HAVE a child (i.e., it can't be an ancestor)

[lucy24]

a br tag can BE a child, but it can't HAVE a child

Right. Same would go for any self-closing element like <hr> or <img> or <wbr> -- and also for inline elements like <i> or <kbd> or other formatting. That's why none of your quoted four worked:

#inclfile br a:first-child {padding: 0 10px 0 0;}
#inclfile > br a:first-child {padding: 0 10px 0 0;}
#inclfile > br > a:first-child {padding: 0 10px 0 0;}
#inclfile br > a:first-child {padding: 0 10px 0 0;} 

Now, if you remove "br" from the list you've got two variants:

#inclfile a:first-child {padding: 0 10px 0 0;}
#inclfile > a:first-child {padding: 0 10px 0 0;}

The first form means "an <a> element that is the first child of its parent whatever that parent may be, so long as the whole thing comes inside the element with id 'inclfile'". Note that in this version there may be any number of first-child <a> elements; it just depends on how many layers of elements you've got.

The second form means "an <a> element that is the first child of its parent if and only if that parent is the element with id 'inclfile'". So there can only be one-- but it only works if there are no intervening layers.

http://www.w3.org/TR/CSS2/selector.html#first-child
(link intentionally suppressed)

There's also some business about "adjacent sibling selectors" which you have not needed to use yet. But one of these days you'll have a question beginning in "How do I code for this set of circumstances..."

Incidentally: The specific configuration

padding: 0 10px 0 0;

can't be reduced to fewer items, because you need to specify that padding-left has a different value from padding-right. But if only one of these four values is meant to be different from the default padding for <a> elements, it's better to just say

padding-left: 0

and let everything else be inherited. Then if you change the default (non-first-child) styles, you don't need to change anything in the special first-child style.

[Planet13]

Wow!

Lucy, you should work for a tutorial company because:

1) You know what you are talking about, and

2) You have plenty of Vitamin P (as in "Patience," which is needed for dealing with CSS numbskulls such as myself).

Thanks much for the clear explanation. I literally would have been back here in a few days asking the same question but would have substituted <hr> or <img> tags for <br> tags if you hadn't mentioned the part about self-closing tags being a no go.

Thanks again (for everything).

[lucy24]

Come to think of it, that "adjacent-siblings" selector may come sooner than we think. Looking back at the form that didn't work

#inclfile br a:first-child {padding: 0 10px 0 0;}

If the <br> only occurs once, as the first tag inside "inclfile", then you would in fact be able to say

#inclfile br + a {padding: 0 10px 0 0;}

See the + sign? It means
IF <br> and <a> are consecutive children of the same parent (whether that parent is "inclfile" or something further down)
AND this happens inside "inclfile"
THEN apply the given style

Note that the form is simply
#inclfile br + a
not
#inclfile br + #inclfile a

You don't need to re-state #inclfile because if <br> is inside #inclfile then, by definition, so is <a>.

[Paul_o_b]

For modern browsers (ie9+ (plus all other modern browsers)) you could also do this:

#inclfile a:first-of-type{padding-left:0}

[lucy24]

Oh thanks Paul. I didn't know (or had forgotten) about first-of-type but it's obviously what's wanted here ... and caniuse.com [caniuse.com] seems to say that it can be used in all browsers* and also in MSIE >= 9.


* The only exceptions I can see are Safari 3.1 (meaning, what, OS 10.2? or even Classic?) and FF 3 (i.e. < 3.5).

[Planet13]

Thanks for the tip, Paul.