I was trying to come up with a way to use image sprites for background images, without needing to specify a ton of class names.<\/p>\n
The usual method would be:<\/p>\n
<\/p>\n But, by leveraging the next sibling CSS selector, we can avoid the need for classes or ids to identify our elements.<\/p>\n I was trying to come up with a way to use image sprites for background images, without needing to specify a ton of class names.…<\/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,14],"tags":[74,73],"_links":{"self":[{"href":"https:\/\/www.sitekickr.com\/blog\/wp-json\/wp\/v2\/posts\/157"}],"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=157"}],"version-history":[{"count":1,"href":"https:\/\/www.sitekickr.com\/blog\/wp-json\/wp\/v2\/posts\/157\/revisions"}],"predecessor-version":[{"id":158,"href":"https:\/\/www.sitekickr.com\/blog\/wp-json\/wp\/v2\/posts\/157\/revisions\/158"}],"wp:attachment":[{"href":"https:\/\/www.sitekickr.com\/blog\/wp-json\/wp\/v2\/media?parent=157"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.sitekickr.com\/blog\/wp-json\/wp\/v2\/categories?post=157"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.sitekickr.com\/blog\/wp-json\/wp\/v2\/tags?post=157"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}<ul>
\n\t <li class="class1"><a href="">Item 1<\/a><\/li>
\n\t <li class="class2"><a href="">Item 2<\/a><\/li>
\n\t <li class="class3"><a href="">Item 3<\/a><\/li>
\n\t<\/ul>
\n\t<\/code><\/p>\n<style>
\n\tul li a { background: url('icons.png') no-repeat; }
\n\tul li.class1 a { background-position: 0 -30px; }
\n\tul li.class2 a { background-position: 0 -60px; }
\n\tul li.class3 a { background-position: 0 -90px; }
\n\t<\/style>
\n\t<\/code><\/p>\n<ul>
\n\t <li><a href="">Item 1<\/a><\/li>
\n\t <li><a href="">Item 2<\/a><\/li>
\n\t <li><a href="">Item 3<\/a><\/li>
\n\t<\/ul><\/code><\/p>\n<style>
\n\tul li a { background: url('icons.png') no-repeat; }
\n\tul li a { background-position: 0 -30px; }
\n\tul li + li a { background-position: 0 -60px; }
\n\tul li + li + li a { background-position: 0 -90px; }
\n\t<\/style>
\n\t<\/code><\/p>\n","protected":false},"excerpt":{"rendered":"