KEMBAR78
CSS: selectors and the box model | PDF
CSS— a crash course in —
selectors
the box model
Idan Gazit - @idangazit
pyweb-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
http://flic.kr/p/C3C52
SPECIFIC
HIERARCHICAL
ATTRIBUTE
PSEUDO-CLASSES
PSEUDO-ELEMENTS
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
div > p
child
SPECIFIC
HIERARCHICAL
ATTRIBUTE
PSEUDO-CLASSES
PSEUDO-ELEMENTS div p
descendant
h1 + p
adjacent sibling
IE6
IE6
*universal
SPECIFIC
HIERARCHICAL
ATTRIBUTE
PSEUDO-CLASSES
PSEUDO-ELEMENTS
div ~ p
general 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: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.
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: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
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
OMG WTF PPK
quirksmode.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
padding
left + right
border
left + right
padding
top + bottom
border
top + bottom
Math
size + padding + border = actual size
More Math
width: auto;
containing block width
- margin
- border
- padding
= calculated width.
Margin Collapsing
Yes, there are more surprises.
POP QUIZ
<div id=“first”>…</div>
<div id=“second”>…</div>
#first {
margin-bottom: 30px;
}
#second {
margin-top: 20px;
}
W3C
www.w3.org/TR/CSS2/box.html
Thank you!
@idangazit
db.tt/D7TAX6X
— or —
www.slideshare.net/idangazit/css-selectors-and-the-box-model

CSS: selectors and the box model