RSS

CSS :nth-child And :nth-of-type Complete Reference

13 Sep

Developers use nth-child in css to style alternate rows, for picking a specific child element etc. There is much more nth-child can deliver.

nthMaster has really mastered nth-child. See various live examples to see the real power of this css property.

Few interesting Snippets

Snippet 1: Using the :nth-child(n+6) like this allows you pick :nth-child(6) and above

1
2
3
4
li:nth-child(n+6) span {
    background-color: #298EB2;
    box-shadow: inset -3px -3px 10px rgba(0, 0, 0, 0.4), 0 0 10px black;
}

nth-child Positive Range

nth-child Positive Range

Snippet 2: Using this nth-child(n+4):nth-child(-n+8) we can select elements within certain ranges, in this case elements 4-8.

1
2
3
4
li:nth-child(n+4):nth-child(-n+8) span {
    background-color: #298EB2;
    box-shadow: inset -3px -3px 10px rgba(0, 0, 0, 0.4), 0 0 10px black;
}

Generic Child Ranges

Generic Child Ranges

 

Advertisements
 
Leave a comment

Posted by on September 13, 2013 in CSS

 

Leave a Reply

Please log in using one of these methods to post your comment:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

 
%d bloggers like this: