The Power of the Plus: Creative Solutions with CSS Selectors

Talk given at Day 2 of Front End Design Conference in St. Petersburg, Florida. I shared about creative solutions I have made using adjacent sibling and child combinators.

Transcript

1. The Power of the Plus Creative Solutions with CSS Selectors @webcraftsman
7. CSS is something you can learn in a day (or a couple of days) but takes a lifetime to master.
8. 1 Man Team Bonnier Corp. • Small Websites • Control over the code • Small CSS files • Larger Websites • CMS • Larger CSS files
9. http://net.tutplus.tutorials/html-css-techniques/the-30-css-selectors-you-must-memorize/
11. Adjacent Sibling Combinator E + F
12. HTML <h2>Heading</h2> <p>This is the paragraph I want to target</p> <p>There are other paragraphs.</p> <p>There are other paragraphs.</p> CSS h2 + p { color: black; } Adjacent Sibling Combinator
13. Heading This is the paragraph I want to target. There are other paragraphs. There are other paragraphs. Adjacent Sibling Combinator
14. Child Combinator E > F
15. HTML <ul class= "site-map" > <li> <h2>Headphones</h2> <ul> <li><a href="#">Accessories</a></li> <li><a href="#">In-ear</a></li> <li><a href="#">Noise canceling</a></li> </ul> </li> <li> <h2>Media Players</h2> <ul> <li><a href="#">Accessories</a></li> <li><a href="#" >Disc Players</a></li> <li><a href="#">Noise canceling</a></li> </ul> </li> </ul>
16. CSS .site-map > li { float: left; margin-left: 15px; overflow: hidden; }
17. Why had these selectors not become a part of my toolbox? • Browser Support • Control over my code
21. My solution .recipe-page .body h4 + p > b { font-weight: normal; } .recipe-page .body h4 + div b { font-weight: normal; } .recipe-page .body h4 ~ span { font-weight: normal !important; }
25. .rating + .rating-buttons > .write-comment, .comment-counts-text + .rating + .rating-buttons > .rate-review, .comment-counts-text + .rating-buttons > .rate-review, .comment-counts-text + .rating-buttons > .write-comment { display: none; } My solution
26. My solution .comment-counts-number.over9999 + .comment-counts-text { margin-top: 0; } .rating { margin-left: 6px; margin-top: 6px; } .comment-counts-text + .rating { margin-top: 0; }
32. http://css-tricks.com/the-checkbox-hack/
33. <div class="vote-on-item"> <input type="radio" value="Vote for this" name="foo"/> <label> <img src="http://placehold.it/176x160" width="176" height="160" alt="" /> <div class="title"><span>Title of Food Blog Nominated</span></div> <div class="flag"></div> </label> <div class="visit-blog"><a href="#">Visit the blog &raquo;</a></div> </div> My solution
34. My solution <div class="vote-on-item"> <input type="radio" value="Vote for this" name="foo"/> <label> <img src="http://placehold.it/176x160" width="176" height="160" alt="" /> <div class="title"><span>Title of Food Blog Nominated</span></div> <div class="flag"></div> </label> <div class="visit-blog"><a href="#">Visit the blog &raquo;</a></div> </div>
35. My solution <div class="vote-on-item"> <input type="radio" value="Vote for this" name="foo"/> <label> <img src="http://placehold.it/176x160" width="176" height="160" alt="" /> <div class="title"><span>Title of Food Blog Nominated</span></div> <div class="flag"></div> </label> <div class="visit-blog"><a href="#">Visit the blog &raquo;</a></div> </div>
36. .vote-on-item input { left:0; height: 170px; opacity: 0; filter: alpha(opacity = 0); outline: 0; position: absolute; top:0; width: 186px; z-index:2; } My solution
37. .vote-on-item label { border: 5px solid #222222; } .vote-on-item flag {display: none;} .vote-on-item input:checked + label { border-color:#cc000b; } .vote-on-item input:checked + label .flag { background: transparent url(check.png) no-repeat; display: block; height: 66px; left:7px; position: absolute; top:-5px; width: 46px; }
39. Performance
40. Performance 1.id (#myid) 2.class (.myclass) 3.tag (div, h1, p) 4.adjacent sibling (h1 + p) 5.child (ul > li) 6.descendent (li a) 7.universal (*) 8.attribute (a[rel="external"]) 9.pseudo-class and pseudo element (a:hover, li:first)
41. Performance 1.id (#myid) 2.class (.myclass) 3.tag (div, h1, p) 4.adjacent sibling (h1 + p) 5.child (ul > li) 6.descendent (li a) 7.universal (*) 8.attribute (a[rel="external"]) 9.pseudo-class and pseudo element (a:hover, li:first) http://csswizardry.com/2011/09/writing-efficient-css-selectors/
42. http://net.tutplus.tutorials/html-css-techniques/the-30-css-selectors-you-must-memorize/
43. http://speakerdeck.com/u/webcraftsman http://jeffbridgforth.com/front-end-talk
44. @webcraftsman
45. Thank You