{"id":206,"date":"2011-05-04T14:44:50","date_gmt":"2011-05-04T14:44:50","guid":{"rendered":"http:\/\/www.sitekickr.com\/blog\/?p=206"},"modified":"2011-05-04T14:45:22","modified_gmt":"2011-05-04T14:45:22","slug":"css-get-nth-element","status":"publish","type":"post","link":"https:\/\/www.sitekickr.com\/blog\/css-get-nth-element\/","title":{"rendered":"Use CSS to get the 2nd, 3rd, 4th element"},"content":{"rendered":"<p>There are times where it would be great to apply a given style to the 2nd, 3rd, 4th, etc. element of a parent. This is a simple task with jQuery. But if you have no other need for jQuery, other than this, why load it into your site.<\/p>\n<p>If you only need to grab element 2 through 6 or so, this method is not super sloppy. Any further, and it really looks &quot;hacky&quot;.<\/p>\n<p>The magic here is the next sibling selector (+). You may have been familiar with it, but perhaps never considered using it in this way.<\/p>\n<p>To get the 2nd element:<\/p>\n<p>[parent selector] [child selector]:first-child + [child selector] \/\/ 2nd element<br \/>\n\t[parent selector] [child selector]:first-child + [child selector] + [child selector] \/\/ 3rd element<\/p>\n<p>\t[parent selector] [child selector]:first-child + [child selector] + [child selector] + [child selector] \/\/ 4th element<\/p>\n<p>\t&nbsp;<\/p>\n<p>For example, to get the 2nd, 3rd, 4th elements in a list:<\/p>\n<p><code>ul li:first-child li \/* 2nd list element *\/<br \/>\n\tul li:first-child li + li \/* 3rd list element *\/<br \/>\n\tul li:first-child li + li + li \/* 4th list element *\/<br \/>\n\t<\/code><\/p>\n","protected":false},"excerpt":{"rendered":"<p>There are times where it would be great to apply a given style to the 2nd, 3rd, 4th, etc. element of a parent. This is&hellip;<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"amp_status":""},"categories":[12],"tags":[90],"_links":{"self":[{"href":"https:\/\/www.sitekickr.com\/blog\/wp-json\/wp\/v2\/posts\/206"}],"collection":[{"href":"https:\/\/www.sitekickr.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.sitekickr.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.sitekickr.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.sitekickr.com\/blog\/wp-json\/wp\/v2\/comments?post=206"}],"version-history":[{"count":2,"href":"https:\/\/www.sitekickr.com\/blog\/wp-json\/wp\/v2\/posts\/206\/revisions"}],"predecessor-version":[{"id":208,"href":"https:\/\/www.sitekickr.com\/blog\/wp-json\/wp\/v2\/posts\/206\/revisions\/208"}],"wp:attachment":[{"href":"https:\/\/www.sitekickr.com\/blog\/wp-json\/wp\/v2\/media?parent=206"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.sitekickr.com\/blog\/wp-json\/wp\/v2\/categories?post=206"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.sitekickr.com\/blog\/wp-json\/wp\/v2\/tags?post=206"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}