Welcome to WebmasterWorld Guest from 3.233.226.151

Forum Moderators: not2easy

Message Too Old, No Replies

Problems Targeting First a Tag using a:first-child

     
9:52 pm on Dec 1, 2014 (gmt 0)

Senior Member

WebmasterWorld Senior Member planet13 is a WebmasterWorld Top Contributor of All Time 5+ Year Member Top Contributors Of The Month

joined:June 16, 2010
posts: 3828
votes: 31


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...
10:06 pm on Dec 1, 2014 (gmt 0)

Senior Member

WebmasterWorld Senior Member planet13 is a WebmasterWorld Top Contributor of All Time 5+ Year Member Top Contributors Of The Month

joined:June 16, 2010
posts: 3828
votes: 31


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...
10:22 pm on Dec 1, 2014 (gmt 0)

Senior Member

WebmasterWorld Senior Member 10+ Year Member Top Contributors Of The Month

joined:Dec 15, 2003
posts:2645
votes: 7


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>
11:49 pm on Dec 1, 2014 (gmt 0)

Senior Member

WebmasterWorld Senior Member planet13 is a WebmasterWorld Top Contributor of All Time 5+ Year Member Top Contributors Of The Month

joined:June 16, 2010
posts: 3828
votes: 31


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)
6:09 am on Dec 2, 2014 (gmt 0)

Senior Member from US 

WebmasterWorld Senior Member lucy24 is a WebmasterWorld Top Contributor of All Time 5+ Year Member Top Contributors Of The Month

joined:Apr 9, 2011
posts:15932
votes: 887


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.
7:30 pm on Dec 2, 2014 (gmt 0)

Senior Member

WebmasterWorld Senior Member planet13 is a WebmasterWorld Top Contributor of All Time 5+ Year Member Top Contributors Of The Month

joined:June 16, 2010
posts: 3828
votes: 31


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).
9:14 pm on Dec 2, 2014 (gmt 0)

Senior Member from US 

WebmasterWorld Senior Member lucy24 is a WebmasterWorld Top Contributor of All Time 5+ Year Member Top Contributors Of The Month

joined:Apr 9, 2011
posts:15932
votes: 887


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>.
9:29 am on Dec 4, 2014 (gmt 0)

Junior Member

10+ Year Member

joined:May 28, 2003
posts: 198
votes: 4


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


#inclfile a:first-of-type{padding-left:0}
10:20 am on Dec 4, 2014 (gmt 0)

Senior Member from US 

WebmasterWorld Senior Member lucy24 is a WebmasterWorld Top Contributor of All Time 5+ Year Member Top Contributors Of The Month

joined:Apr 9, 2011
posts:15932
votes: 887


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).
4:51 pm on Dec 4, 2014 (gmt 0)

Senior Member

WebmasterWorld Senior Member planet13 is a WebmasterWorld Top Contributor of All Time 5+ Year Member Top Contributors Of The Month

joined:June 16, 2010
posts: 3828
votes: 31


Thanks for the tip, Paul.