I seem to use the following CSS frequently, so I started this hot-list to make my lookups easier instead of searching the web.
While I'd love to take credit for all of these snippets I didn't actually come up with them; necessity lead me to them elsewhere on the web and I just can't remember to whom I should give credit...
CSS: p:not(.potatoe) { background: #ff0000; }
HTML: <p> one potatoe </p> <p> two potatoe </p> <p> three potatoe </p> <p class="potatoe"> four </p>
CSS: li:nth-child(odd){ background:pink; } li:nth-child(even){ background:silver; }
HTML: <ul> <li>List item 1, with alternating background</li> <li>List item 2, with alternating background</li> <li>List item 3, with alternating background</li> <li>List item 4, with alternating background</li> <li>List item 5, with alternating background</li> </ul>
CSS: ul li:first-child{ border-top:thin solid silver; } ul li:last-child{ border-bottom:thin solid silver; }
HTML: <ul> <li>List item 1, with alternating background</li> <li>List item 2, with alternating background</li> <li>List item 3, with alternating background</li> <li>List item 4, with alternating background</li> <li>List item 5, with alternating background</li> </ul>
CSS: a[href*="cfsnap"]{ font-weight:700; }
HTML: <a href="http://www.cfsnap.com">Go to CFSNAP.com</a> <a href="blog.cfsnap.com/css">Go to CFSNAP.com's blog</a>