Useful :nth-child Recipes

Useful :nth-child Recipes

I get a little giddy when I come across perfect uses for:nth-child or :nth-of-type . The better you understand them, the more css nerdgasms you get to have!

In these simple “recipes” (really: expressions) I’ll arbitrarily use a flat list of list items and randomly chosen numbers. But it should be fairly obvious how to alter them to get similar selections.

Select Only the Fifth Element

Freelancing Design and Download Themes. Download Responsive themes for CMS, WooCommerce, eCommerce, SEO, Joomla, WordPress, Magento, Opencart, HTML, Jquery and Plugins. Hire Freelancers and design your website according your business needs.

 

li:nth-child(5) {
    color: green;   
}

To select the first element, you can use :first-child, or I bet you can guess how to alter the above to do it as well.

Select All But The First Five

Freelancing Design and Download Themes. Download Responsive themes for CMS, WooCommerce, eCommerce, SEO, Joomla, WordPress, Magento, Opencart, HTML, Jquery and Plugins. Hire Freelancers and design your website according your business needs.

 

li:nth-child(n+6) {
    color: green;   
}

If there were more than 10 elements here, it would select all of them beyond 5.

Select Only The First Five

Freelancing Design and Download Themes. Download Responsive themes for CMS, WooCommerce, eCommerce, SEO, Joomla, WordPress, Magento, Opencart, HTML, Jquery and Plugins. Hire Freelancers and design your website according your business needs.

 

li:nth-child(-n+5) {
    color: green;   
}

Select Every Fourth, Starting At The First

Freelancing Design and Download Themes. Download Responsive themes for CMS, WooCommerce, eCommerce, SEO, Joomla, WordPress, Magento, Opencart, HTML, Jquery and Plugins. Hire Freelancers and design your website according your business needs.

 

li:nth-child(4n-7) {  /* or 4n+1 */
    color: green;   
}

Select Only Odd or Even

Freelancing Design and Download Themes. Download Responsive themes for CMS, WooCommerce, eCommerce, SEO, Joomla, WordPress, Magento, Opencart, HTML, Jquery and Plugins. Hire Freelancers and design your website according your business needs.

 

li:nth-child(odd) {
    color: green;   
}

Freelancing Design and Download Themes. Download Responsive themes for CMS, WooCommerce, eCommerce, SEO, Joomla, WordPress, Magento, Opencart, HTML, Jquery and Plugins. Hire Freelancers and design your website according your business needs.

 

li:nth-child(even) {
    color: green;   
}

Select The Last Element

Freelancing Design and Download Themes. Download Responsive themes for CMS, WooCommerce, eCommerce, SEO, Joomla, WordPress, Magento, Opencart, HTML, Jquery and Plugins. Hire Freelancers and design your website according your business needs.

 

li:last-child {
    color: green;
}

Selects the 10th because we have 10 elements here, but if there was 8 it would select the 8th, or if there were 1,290 it would select the 1,290th.

Select the Second to Last Element

Freelancing Design and Download Themes. Download Responsive themes for CMS, WooCommerce, eCommerce, SEO, Joomla, WordPress, Magento, Opencart, HTML, Jquery and Plugins. Hire Freelancers and design your website according your business needs.

 

li:nth-last-child(2) {
    color: green;
}

Selects the 9th because we have 10 elements here, but if there were 30 elements it would select the 29th.

Browser Support

Interestingly enough, :first-child was supported by IE 7, but it’s not until IE 9 where the rest of this stuff is supported. Other than IE there isn’t much browser support concern, and if you are worried about IE, then use Selectivizr. If browser support stuff is interesting or important for you, definitely check out When can I use… which tracks this stuff very well.

909 total views, 1 views today

Related Posts

Loading Facebook Comments ...

No comments

Leave a Reply

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

Enter the captcha code *

Please wait...

Subscribe to our newsletter

Want to be notified when our article is published? Enter your email address and name below to be the first to know.

Coupon Code "HAPPY10" - Get Discounts upto 90% + 10% off on Purchase of themes/templates and Plugins