repeating element - style first one only

Code: 
UL.myClass LI:first-child { border-top: 1px solid #CCC; }
Be worth testing that in different browsers though, as IIRC psuedo selectors aren't fully supported.

The alternative is to add a class through jQuery on load - although that's a bit of overkill unless you're already using jQ on the site.
 
not as keen on psuedi selectors for the reason you suggested. had previsouly used something like a+a { } but as i don't know the amount it's a pain, so was hoping for something like a { this style }, a*x { this style }
 
Mammalian said:
not as keen on psuedi selectors for the reason you suggested. [...]
Click to expand...

Browser support for first-child:

http://www.quirksmode.org/css/contents.html
http://www.quirksmode.org/m/css.html

Definitely not: IE5.5, IE6, IE Mobile.
Works, but doesn't update with dynamic content: IE7, Opera Mini, most Webkits, NetFront, Skyfire.
Works 100%: IE9, FF, Safari, Chrome, Opera, Opera Mobile, Some Webkits, Blackberry.

My recommendation: unless you know for a fact that you're going to have circumstances where links/list items are going to be added dynamically, just go with first-child.

The easiest alternative is to give a class of 'FirstInList' or similar to the first li or a.

Or, if it's a vertical stack, apply the border to the top of the ul.

[EDIT: Unless you've got no control over the markup, of course].
 
Last edited:
Javascript enabled? MooTools/JQuery?

<ul id='mylist'>
<li></li>
<li></li>
...
</ul

-------------------------------------------------
(mootools)

$('mylist').children[0].setStyle('border-top', '1px solid #000');
 
Mammalian said:
first-child seems like the best option then but my concern is that what happens when i add something before the list of links in the future and forget i'm using it? say an image which now becomes the first child.?
Click to expand...
I hate to say it, but that's like saying, "maybe I shouldn't style links in general in case I forget I'm using it". You simply just don't forget what CSS you've used.


Mammalian said:
is there a way to say first-child:li ?
Click to expand...
yeah, ... li:first-child :D
:first-child applies to the li, so will always target the first li in your list.
 
Last edited:
Mammalian said:
[...] what happens when i add something before the list of links in the future and forget i'm using it? say an image which now becomes the first child. [...]
Click to expand...
Then yeah, the image will have the top border [well, technically, the <li> or <a> containing the image will].

Though if it's an image that isn't also a link - e.g. some form of decoration, or a column heading - then you have to question what it's doing in an [un]ordered list; you'd be better off placing that outside the <ul> or <ol>.

If you want to be able to keep a top border above the topmost text link of a mixed-media list, then you'll need to give it a class.

Unless there's a scripty way of doing it, but that seems like using a sledgehammer to crack a walnut.
 
You must log in or register to reply here.
Back
Top Bottom