DOM hierarchy pseudo-classes allow you to style specific elements based on where they fall in the hierarchy and what type of elements they are. You can also use :nth-child to target custom element patterns, like every other element.
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>GistRun</title> <link rel="stylesheet" href="styles.css"> <style> ul { list-style: none; margin: 0; padding: 0; } li { padding: 5px; } /* li:first-child { background-color: rgb(225, 231, 252); } li:last-child { background-color: rgb(225, 231, 252); } li:nth-child(2) { background-color: rgb(225, 0, 252); }*/ /* The even child*/ /*li:nth-child(2n) { background-color: gold ; }*/ /* The odd child*/ /*li:nth-child(2n+1) { background-color: darkred; }*/ /* First 4 children */ li:nth-child(-n+4) { background-color: cadetblue; } /* Expect first three children*/ li:nth-child(n+4) { background-color: lightgoldenrodyellow; } /* Other psuedo classes: * :nth-last-child * :only-child * :only-of-type * :last-of-type * :nth-of-type(an+b) * :nth-last-of-type(an+b) */</style> </head> <body> <ul> <li><a href="#" target="_blank">target=_blank</a></li> <li><a href="#" target="someFrame">target=someFrame</a></li> <li><a href="#" rel="link-blog">rel=link-blog</a></li> <li><a href="#" rel="linkproducts">rel=linkproducts</a></li> <li><a href="#" rel="link about">rel=link about</a></li> <li><a href="#" rel="link-about" title="special">rel=link-about title=special </a></li> <li><a href="#" rel="link-other" title="special">rel=link-other title=special </a></li> <li><a href="#" rel="this item available now">rel=this item available now</a></li> <li><a href="#" rel="product-200-available-now">rel=product-200-available-now</a></li> <li><a href="#" rel="linkproductavailable300">rel=linkproductavailable300</a> <li><a href="#" rel="sale-product-400">rel=sale-product-400</a></li> <li><a href="#" rel="sale">rel=sale</a></li> <li><a href="#" rel="product-500-discontinued">rel=product-500-discontinued</a></li> <li><a href="#" rel="product600discontinued">rel=product600discontinued</a></li> <li><a href="#" rel="discontinued">rel=discontinued</a></li> </ul> <script src="script.js"></script> </body> </html>