Selecting a particular list item in an unordered list using css

While working with unordered lists in HTML we sometimes need to apply certain css properties to particular list items. So how select first or second or any list item in an ordered or an unordered list? Here we will discuss about two methods to achieve desired results.

1. Using :nth-child() list item approach

suppose you want to select 4th list item from list shown below:

To achieve desired result you may need to change content in nth-child(this needs to change). Suppose you want to select all even or all odd positioned lists then you need code accordingly as described below:

So you need to play with n using addition, subtraction and multiplication. Also note that n=0,1,2,3…


2. Element + element / selector + element approach

Sometimes we need to select a particular list item from an unordered list when there are more than one lists. Suppose we have lists as shown below and we want to select 2nd list item of 2nd unordered list.



Leave a Reply

Your email address will not be published. Required fields are marked *

%d bloggers like this: