css: selectors and the box model
DESCRIPTION
TRANSCRIPT
CSS— a crash course in —
selectorsthe box model
Idan Gazit - @idangazitpyweb-il #20 / 25th Oct 2010
Selectors
The Box Model
Precompilers - next time
SELECTORS
h1 { color: red; font-size: 32px;}
selector declaration block
h1 { color: red; font-size: 32px;}declaration
selector declaration block
h1 { color: red; font-size: 32px;}declaration
selector declaration block
property value
h1 { color: red; font-size: 32px;}
selector declaration block
IN THE BEGINNING,THERE WAS THE DOM
<!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>
HTML
head body
title div
p
RELATIONSHIPS
Ancestor/Descendant
Parent/Child
Sibling
HTML
head body
title div
p
ancestor
descendant
descendant
descendant
HTML
head body
title div
p
ancestor
descendant
descendant
child
parent
HTML
head body
title div
p
siblingsibling
SPECIFIC
HIERARCHICAL
ATTRIBUTE
PSEUDO-CLASSES
PSEUDO-ELEMENTS
p.largep of class “large”
SPECIFIC
HIERARCHICAL
ATTRIBUTE
PSEUDO-CLASSES
PSEUDO-ELEMENTS
ptype
#navany element with id “nav”
.intro.largemultiple classes
IE6
div > pchild
SPECIFIC
HIERARCHICAL
ATTRIBUTE
PSEUDO-CLASSES
PSEUDO-ELEMENTS div pdescendant
h1 + padjacent sibling
IE6
IE6
*universal
SPECIFIC
HIERARCHICAL
ATTRIBUTE
PSEUDO-CLASSES
PSEUDO-ELEMENTS
div ~ pgeneral later sibling
CSS 3
IE6
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
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
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%
SPECIFIC
HIERARCHICAL
ATTRIBUTE
PSEUDO-CLASSES
PSEUDO-ELEMENTS
div>p:first-child<div> <p>yes!</p> <p>no</p></div>
IE8
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
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.
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.
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.
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.
SPECIFIC
HIERARCHICAL
ATTRIBUTE
PSEUDO-CLASSES
PSEUDO-ELEMENTS
p:targetp: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.
PSEUDO-ELEMENTS
:first-line, :first-letter
:before, :after
SPECIFIC
HIERARCHICAL
ATTRIBUTE
PSEUDO-CLASSES
PSEUDO-ELEMENTS
IE8
webkit, opera
SPECIFIC
HIERARCHICAL
ATTRIBUTE
PSEUDO-CLASSES
PSEUDO-ELEMENTS
li.optional:beforeli.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
SPECIFICITYstyle=“…” attribute in an element
IDs
attributes, classes, pseudo-classes
elements, pseudo-elements
Later rules of same specificity trump earlier ruleshttp://www.w3.org/TR/CSS2/cascade.html#specificity
OMG WTF PPKquirksmode.org/css/contents.html
THE BOX MODEL
WTF?Doesn’t work the way you expect.
HOW BIG AM I?div { width: 400px; height: 500px; padding: 10px; border: 1px solid black; margin: 20px;}
HOW BIG AM I?
width: 400px +10 +10 +1 +1 = 422px
height: 500px +10 +10 +1 +1 = 522px
paddingleft + right
borderleft + right
paddingtop + bottom
bordertop + bottom
Mathsize + padding + border = actual size
More Mathwidth: auto;
containing block width- margin- border- padding= calculated width.
Margin CollapsingYes, there are more surprises.
POP QUIZ<div id=“first”>…</div><div id=“second”>…</div>
#first { margin-bottom: 30px;}
#second { margin-top: 20px;}
W3Cwww.w3.org/TR/CSS2/box.html
Thank you!@idangazit
db.tt/D7TAX6X— or —
www.slideshare.net/idangazit/css-selectors-and-the-box-model