CSS: selectors and the box model

4,304 views

Published on

0 Comments
3 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
4,304
On SlideShare
0
From Embeds
0
Number of Embeds
35
Actions
Shares
0
Downloads
69
Comments
0
Likes
3
Embeds 0
No embeds

No notes for slide

CSS: selectors and the box model

  1. 1. CSS— a crash course in — selectors the box model Idan Gazit - @idangazit pyweb-il #20 / 25th Oct 2010
  2. 2. Selectors The Box Model Precompilers - next time
  3. 3. SELECTORS
  4. 4. h1 { color: red; font-size: 32px;} selector declaration block
  5. 5. h1 { color: red; font-size: 32px;} declaration selector declaration block
  6. 6. h1 { color: red; font-size: 32px;} declaration selector declaration block property value
  7. 7. h1 { color: red; font-size: 32px;} selector declaration block
  8. 8. IN THE BEGINNING, THERE WAS THE DOM
  9. 9. <!DOCTYPE HTML> <html> <head> <title>Show off the DOM!</title> </head> <body> <div id="content"> <p> Picture yourself on a boat in a river, with tangerine trees and marmalade skies. </p> </div> </body> </html>
  10. 10. HTML head body title div p
  11. 11. RELATIONSHIPS Ancestor/Descendant Parent/Child Sibling
  12. 12. HTML head body title div p ancestor descendant descendant descendant
  13. 13. HTML head body title div p ancestor descendant descendant child parent
  14. 14. HTML head body title div p siblingsibling
  15. 15. http://flic.kr/p/C3C52
  16. 16. SPECIFIC HIERARCHICAL ATTRIBUTE PSEUDO-CLASSES PSEUDO-ELEMENTS
  17. 17. p.large p of class “large” SPECIFIC HIERARCHICAL ATTRIBUTE PSEUDO-CLASSES PSEUDO-ELEMENTS p type #nav any element with id “nav” .intro.large multiple classes IE6
  18. 18. div > p child SPECIFIC HIERARCHICAL ATTRIBUTE PSEUDO-CLASSES PSEUDO-ELEMENTS div p descendant h1 + p adjacent sibling IE6 IE6 *universal
  19. 19. SPECIFIC HIERARCHICAL ATTRIBUTE PSEUDO-CLASSES PSEUDO-ELEMENTS div ~ p general later sibling CSS 3 IE6
  20. 20. img[alt=“foo”] <img alt=“foo” … > SPECIFIC HIERARCHICAL ATTRIBUTE PSEUDO-CLASSES PSEUDO-ELEMENTS img[alt] <img alt=“…anything…” … > img[alt~=“foo”] <img alt=“blah foo bar” … > img[alt|=“foo”] <img alt=“blah-foo-bar” … > IE6 IE6 IE6 IE6
  21. 21. img[alt^=“foo”] <img alt=“foobar” … > SPECIFIC HIERARCHICAL ATTRIBUTE PSEUDO-CLASSES PSEUDO-ELEMENTS img[alt$=“foo”] <img alt=“barfoo” … > img[alt*=“foo”] <img alt=“barfoobar” … > IE6 IE6 IE6 CSS 3
  22. 22. PSEUDO-CLASSES :first-child :link :visited :hover :active :focus :lang(foo) SPECIFIC HIERARCHICAL ATTRIBUTE PSEUDO-CLASSES PSEUDO-ELEMENTS IE6 - links only IE7 - links only IE8 IE8 - still not 100%
  23. 23. SPECIFIC HIERARCHICAL ATTRIBUTE PSEUDO-CLASSES PSEUDO-ELEMENTS div>p:first-child <div> <p>yes!</p> <p>no</p> </div> IE8
  24. 24. FOREVER ALONE :first-of-type :last-of-type, :only-of-type :last-child, :only-child :not :empty :nth-child(…), :nth-of-type(…) :nth-last-child(), :nth-last-of-type() :target SPECIFIC HIERARCHICAL ATTRIBUTE PSEUDO-CLASSES PSEUDO-ELEMENTS FF3 None of this works in IE < 9. CSS 3 FF3 opera
  25. 25. SPECIFIC HIERARCHICAL ATTRIBUTE PSEUDO-CLASSES PSEUDO-ELEMENTS div>p:first-of-type <div> <h1>no</h1> <p>yes!</p> <p>no</p> </div> CSS 3None of this works in IE < 9.
  26. 26. SPECIFIC HIERARCHICAL ATTRIBUTE PSEUDO-CLASSES PSEUDO-ELEMENTS li:only-child <ul> <li>no</li> <li>no</li> <li>no</li> </ul> <ul> <li>yes!</li> </ul> CSS 3None of this works in IE < 9.
  27. 27. SPECIFIC HIERARCHICAL ATTRIBUTE PSEUDO-CLASSES PSEUDO-ELEMENTS div.special *:not(ul) <div class= “special”> <h1>yes</h1> <p>yes</p> <ul>… no …</ul> </div> CSS 3None of this works in IE < 9.
  28. 28. SPECIFIC HIERARCHICAL ATTRIBUTE PSEUDO-CLASSES PSEUDO-ELEMENTS :nth-child(formula) An+B: “Every A’th element starting from B” 3n: 0, 3, 6, 9… 3n+1: 1, 4, 7, 10… even (== 2n+1) odd (== 2n) CSS 3None of this works in IE < 9.
  29. 29. SPECIFIC HIERARCHICAL ATTRIBUTE PSEUDO-CLASSES PSEUDO-ELEMENTS p:target p:target { color: red; } <nav> … <a href=“#about”>About Us</a> </nav> … <p id=“about”> About us blah blah blah </p> CSS 3None of this works in IE < 9.
  30. 30. PSEUDO-ELEMENTS :first-line, :first-letter :before, :after SPECIFIC HIERARCHICAL ATTRIBUTE PSEUDO-CLASSES PSEUDO-ELEMENTS IE8 webkit, opera
  31. 31. SPECIFIC HIERARCHICAL ATTRIBUTE PSEUDO-CLASSES PSEUDO-ELEMENTS li.optional:before li.optional:before { font-color: red; content: “optional - ” } <h1>Bring for hike:</h1> <ul> <li>hat</li> <li>water</li> <li class=“optional”>camera</li> </ul> Bring for hike: • hat • water • optional - camera IE8
  32. 32. SPECIFICITY style=“…” attribute in an element IDs attributes, classes, pseudo-classes elements, pseudo-elements Later rules of same specificity trump earlier rules http://www.w3.org/TR/CSS2/cascade.html#specificity
  33. 33. OMG WTF PPK quirksmode.org/css/contents.html
  34. 34. THE BOX MODEL
  35. 35. WTF? Doesn’t work the way you expect.
  36. 36. HOW BIG AM I? div { width: 400px; height: 500px; padding: 10px; border: 1px solid black; margin: 20px; }
  37. 37. HOW BIG AM I? width: 400px +10 +10 +1 +1 = 422px height: 500px +10 +10 +1 +1 = 522px padding left + right border left + right padding top + bottom border top + bottom
  38. 38. Math size + padding + border = actual size
  39. 39. More Math width: auto; containing block width - margin - border - padding = calculated width.
  40. 40. Margin Collapsing Yes, there are more surprises.
  41. 41. POP QUIZ <div id=“first”>…</div> <div id=“second”>…</div> #first { margin-bottom: 30px; } #second { margin-top: 20px; }
  42. 42. W3C www.w3.org/TR/CSS2/box.html
  43. 43. Thank you! @idangazit db.tt/D7TAX6X — or — www.slideshare.net/idangazit/css-selectors-and-the-box-model

×