[tokei]

Hi all member,

I have a problem to select the specific position using <li>

Example:

                <ul>
                    <li><a rel="me" href="#">delicious</a></li>
                    <li><a rel="me" href="#">digg</a></li>
                    <li><a rel="me" href="#">facebook</a></li>
                    <li><a rel="me" href="#">last.fm</a></li>
                    <li><a rel="me" href="#">rss</a></li>
                    <li><a rel="me" href="#">twitter</a></li>
                </ul><!-- social -->

I know CSS has ability to select the first item and last item using :first-child and :last-child, but how to select for the third, forth and so on using CSS...

Let's say I want to select facebook and last.fm, how to use it using CSS

Thanks for your help

[IJET]

I believe you're looking for the following:

li:nth-child(1)

Where the number 1 can be changed to whichever element you choose to be modified.

[gregwhitworth]

That will work, but I suggest using a standard class since you're doing this staticly anyways, add a class called .last-fm or .facebook so that your css doesn't need comments. As your CSS will be more intuitive, take the following for example:

li.facebook a {}

// Facebook
li:nth-child(1) a {}

It really is a matter of preference to some extent, but it also allows you to move the list items around without any style issues.

[j4v3d]

give your li element a class or id and do your styling based on that.

nth child is supported in only a few browsers, think it doesn't work in IE7/8

[tokei]

IJET, on 19 December 2012 - 06:01 PM, said:

I believe you're looking for the following:

li:nth-child(1)

Where the number 1 can be changed to whichever element you choose to be modified.

Thank you for your help.

<b>HTML version </b>

<ul>
    <li><a rel="me" href="#">delicious</a></li>
    <li><a rel="me" href="#">digg</a></li>
    <li><a rel="me" href="#">facebook</a></li>
    <li><a rel="me" href="#">last.fm</a></li>
    <li><a rel="me" href="#">rss</a></li>
    <li><a rel="me" href="#">twitter</a></li>
</ul><!-- social -->

<b>CSS</b>

  li:nth-child(2) a {  //increase font size for 'digg' only
      font-size:20px;
  } 

j4v3d, on 24 December 2012 - 04:35 PM, said:

give your li element a class or id and do your styling based on that.

nth child is supported in only a few browsers, think it doesn't work in IE7/8

Thanks for your help. I have test on IE9. It works