4 Replies - 1617 Views - Last Post: 30 December 2012 - 09:37 PM

#1 tokei  Icon User is offline

  • New D.I.C Head

Reputation: 1
  • View blog
  • Posts: 34
  • Joined: 15-December 11

How to choose specific <li> position in css

Posted 19 December 2012 - 05:26 PM

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

Is This A Good Question/Topic? 0
  • +

Replies To: How to choose specific <li> position in css

#2 IJET  Icon User is offline

  • D.I.C Head
  • member icon

Reputation: 93
  • View blog
  • Posts: 121
  • Joined: 14-October 12

Re: How to choose specific <li> position in css

Posted 19 December 2012 - 06:01 PM

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.
Was This Post Helpful? 2
  • +
  • -

#3 gregwhitworth  Icon User is offline

  • Tired.
  • member icon

Reputation: 219
  • View blog
  • Posts: 1,604
  • Joined: 20-January 09

Re: How to choose specific <li> position in css

Posted 19 December 2012 - 08:36 PM

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.
Was This Post Helpful? 1
  • +
  • -

#4 j4v3d  Icon User is offline

  • D.I.C Head

Reputation: 5
  • View blog
  • Posts: 52
  • Joined: 24-November 12

Re: How to choose specific <li> position in css

Posted 24 December 2012 - 04:35 PM

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
Was This Post Helpful? 0
  • +
  • -

#5 tokei  Icon User is offline

  • New D.I.C Head

Reputation: 1
  • View blog
  • Posts: 34
  • Joined: 15-December 11

Re: How to choose specific <li> position in css

Posted 30 December 2012 - 09:37 PM

View PostIJET, 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;
  } 



View Postj4v3d, 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 :D
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1