Upgrade to Pro — share decks privately, control downloads, hide ads and more …

The Power of the Plus: Creative Solutions with CSS Selectors

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.

Jeff Bridgforth

June 06, 2012
Tweet

Other Decks in Programming

Transcript

  1. CSS is something you can learn in a day (or

    a couple of days) but takes a lifetime to master.
  2. 1 Man Team Bonnier Corp. • Small Websites • Control

    over the code • Small CSS files • Larger Websites • CMS • Larger CSS files
  3. 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
  4. Heading This is the paragraph I want to target. There

    are other paragraphs. There are other paragraphs. Adjacent Sibling Combinator
  5. 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>
  6. Why had these selectors not become a part of my

    toolbox? • Browser Support • Control over my code
  7. 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; }
  8. .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
  9. 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; }
  10. <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
  11. 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>
  12. 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>
  13. .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
  14. .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; }
  15. 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)
  16. 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/