CSS :nth-child and :nth-of-type pseudo-classes

Posted 27 June 2017 12:00 AM by Clara Rodriguez, Front-End Developer @ ClearPeople

There are many times when we need to select a specific item or set of items from a list. We could achieve this by using JavaScript but there is a simpler way using these CSS pseudo-classes. 

Both pseudo selectors allow you to match elements based on their position within a parent element’s list of child elements. They accept an argument that can be a number, the keywords “even” or “odd” or a formula (an+b), and they iterate through all the children of the parent and select the matching elements. 

Here we can see some examples of each one:

:nth-child

:nth-of-type

In these examples both selectors are doing the same because all the children are the same kind of elements (li tags). In this other example, we can see the difference between them:

The difference is that :nth-child can select any sibling element in an arrangement, not only elements that are specified before the colon, while :nth-of-type targets a particular type of element in an arrangement with relation to similar siblings, not all siblings.

Here are some recipes for nth:child so you can see how it works and what you can do. And with this tool you can test your own recipes for both :nth-child and :nth-of-type.



Share:

Add your comment

 
 

 

Archive

Tagcloud

Digital Transformation employee engagement staff satisfaction productivity Microsoft Teams Office 365 Yammer cms content management system agile GDPR Microsoft Graph collaboration Microsoft sharepoint 2016 upgrade migration SharePoint Online 2016 Tech Trends Digital Disruption Context marketing marketing SharePoint 2010 SharePoint 2013 TFS Git security kentico Analytics intranet jquery QA Quality Assurance testing digital workspace content management websites Sitecore sitecore marketplace sitecore module cloud Microsoft Cloud Storage digital strategy technical consulting sitecore modules Experience database Sitecore 7 Sitecore 8 support account management customer experience Data Storage windows azure cms integration front end front end development prototype Cloud Storage StorSimple Front-end Development Layout SharePoint 2013 colour palette UI design website design log viewer sitecore cms website Azure big data business-critical sharepoint accessibility android apple chrome clear people clearpeople debug emulator ios mobile testing opera resize adobe desktop flash ie10 internet explorer 10 metro windows 8 bcsp SharePoint Advanced System Reporter reporting framework ControlMode form control master page placeholder publishing console SharePoint 2007 SharePoint error search search results search values software testing testing scenario audit content information architecture retention schedules PowerShell QuickLaunch scripts SharePoint server 2010 business solutions metalogix replication replicator storagepoint stena technet UK Technet picture library slideshow web part RTM released to manufacturing caml caml query MOSS 2007 query infopath