How To Use CSS :nth-child easy way

Add Tool

Use CSS :nth-child easy way


Use CSS :nth-child easy way

There is a CSS selector which allows you to select the exactly item that you want from a list. This selector is the :nth-child selector, in this tutorial you will learn what you can do with the :nth-child and how it can be helpful.

Below is a list which has 10 list items in it, we are going to use :nth-child, :first-child and :last-child to select the items we want to highlight.

Use CSS :nth-child To Select Exact Item

By passing a number to the nth-child function you can define which child to return from the selector group.

  • Item 1
  • Item 2
  • Item 3
  • Item 4
  • Item 5
  • Item 6
  • Item 7
  • Item 8
  • Item 9
  • Item 10

#selector_example li:nth-child(4){ font-size:150%;font-weight:bold;color:green; }

#selector_example li:nth-child(4){
     font-size:150%;
     font-weight:bold;
     color:green;
}

Use CSS :nth-child To Select All But the First 5 Items

By passing in a n+ number into the nth-child selector you can make it pick all elements from this number.

  • Item 1
  • Item 2
  • Item 3
  • Item 4
  • Item 5
  • Item 6
  • Item 7
  • Item 8
  • Item 9
  • Item 10

#selector_example2 li:nth-child(n+6){ font-size:150%; font-weight:bold; color:green; }

#selector_example li:nth-child(n+6){
font-size:150%;
font-weight:bold;
color:green;
}

Use CSS :nth-child To Select Only First 5 Items

By passing in a negative n+ a number you make it return all element before this number.

  • Item 1
  • Item 2
  • Item 3
  • Item 4
  • Item 5
  • Item 6
  • Item 7
  • Item 8
  • Item 9
  • Item 10

#selector_example3 li:nth-child(-n+5){ font-size:150%; font-weight:bold; color:green; }

#selector_example li:nth-child(-n+5){
font-size:150%;
font-weight:bold;
color:green;
}

Use CSS :nth-child To Select Every 3rd Item

nth-child can be used to return a sequence of numbers by saying how many are in the sequence 3n+1 then it will go to every 3rd element.

  • Item 1
  • Item 2
  • Item 3
  • Item 4
  • Item 5
  • Item 6
  • Item 7
  • Item 8
  • Item 9
  • Item 10

#selector_example4 li:nth-child(3n+1){ font-size:150%; font-weight:bold; color:green; }

#selector_example li:nth-child(3n+1){
font-size:150%;
font-weight:bold;
color:green;
}

Use CSS :nth-child To Select Only Odd Items

You can pass it an odd parameter which will select all the element which have an odd index. So it will return all elements at position 1, 3, 5, 7, 9 etc. This functionality is very useful for defining the colour of alternative table rows.

  • Item 1
  • Item 2
  • Item 3
  • Item 4
  • Item 5
  • Item 6
  • Item 7
  • Item 8
  • Item 9
  • Item 10

#selector_example5 li:nth-child(odd){ font-size:150%; font-weight:bold; color:green; }

#selector_example li:nth-child(odd){
font-size:150%;
font-weight:bold;
color:green;
}

Use CSS :nth-child To Select Only Even Items

This example shows the same as above but for all the even numbers. For example it will return all elements at position 2, 4, 6, 8, 10 etc.

  • Item 1
  • Item 2
  • Item 3
  • Item 4
  • Item 5
  • Item 6
  • Item 7
  • Item 8
  • Item 9
  • Item 10

#selector_example6 li:nth-child(even){ font-size:150%; font-weight:bold; color:green; }

#selector_example li:nth-child(even){
font-size:150%;
font-weight:bold;
color:green;
}

Use CSS :first-child To Select First Item

Alternative CSS selectors is the first-child which will crazy enough return the first child.

  • Item 1
  • Item 2
  • Item 3
  • Item 4
  • Item 5
  • Item 6
  • Item 7
  • Item 8
  • Item 9
  • Item 10

#selector_example7 li:first-child{ font-size:150%; font-weight:bold; color:green; }

#selector_example li:first-child{
font-size:150%;
font-weight:bold;
color:green;
}

Use CSS :last-child To Select Last Item

Alternative to the first-child selector is the last-child selector which of course will return the last child in the element group.

  • Item 1
  • Item 2
  • Item 3
  • Item 4
  • Item 5
  • Item 6
  • Item 7
  • Item 8
  • Item 9
  • Item 10

#selector_example8 li:last-child{ font-size:150%; font-weight:bold; color:green; }

#selector_example li:last-child{
font-size:150%;
font-weight:bold;
color:green;
}

Use CSS :nth-last-child To Select Second From Last Item

You can also use the last-child to start the selection from the end, just by using the nth-last-child selector. This will return the child starting from the end of the group.

  • Item 1
  • Item 2
  • Item 3
  • Item 4
  • Item 5
  • Item 6
  • Item 7
  • Item 8
  • Item 9
  • Item 10

#selector_example9 li:nth-last-child(2){ font-size:150%; font-weight:bold; color:green; }

#selector_example li:nth-last-child(2){
font-size:150%;
font-weight:bold;
color:green;
}

Test how to use the nth-child property with the ntb-child tester on Coveloping.com. nth-child Tester  Thank you paulund to share this informative CSS Advance Tutorial as web development resources


Tags: css nth-child not working, css nth-child class, css nth-child(2n+1), css nth-child first, css nth-child all but first, css nth-child all
Payza

About Masum Billah

Use CSS :nth-child easy way 1stWebSuite website seo tool is a free website ranking tool site provides a lot of on page and off page seo useful tools for you. On this site, we have a large number of website ranking tools


SIGN UP TO GET UPDATE TO YOUR INBOX




Discuss about: How To Use CSS :nth-child easy way


adf.ly