Slide 1
Slide 1 text
CSS Selectors
The Next
Generation
CSS Selectors
The Next
Generation
Jake Smith October 8, 2011
Saturday, October 8, 2011
Slide 2
Slide 2 text
Jake Smith
Jake Smith
jakefolio
http://jakefolio.com
[email protected]
Saturday, October 8, 2011
Slide 3
Slide 3 text
http://bitly.com/mZbVNL
Links For The Talk
Saturday, October 8, 2011
Slide 4
Slide 4 text
Intro to Selectors
Selector Performance
Attribute Selectors
Pseudo Selectors
Pseudo Elements
PolyFills
The Future
Saturday, October 8, 2011
Slide 6
Slide 6 text
Descendant Selector
.menu
li
li
a
Descendants
Ancestor
Saturday, October 8, 2011
Slide 7
Slide 7 text
#CSS
ul li { color: green; }
ul > li { color: red; }
- Top Level
- Top Level
- Sub Level
- Sub Level
Slide 8
Slide 8 text
Selector Context
ul
li
li
ol
Children
Parent
li
Saturday, October 8, 2011
Slide 9
Slide 9 text
Adjacent Sibling
#CSS
.module { margin: 0; }
.module + .module { margin-left: 25px; }
The adjacent sibling selector selects all elements that are the
adjacent siblings of a specified element.
* Module #2 and #3 will have margin applied.
Saturday, October 8, 2011
Module
Module #2
Module #3
Slide 10
Slide 10 text
Adjacent Sibling Selector
div
.module
.module
.module + +
Saturday, October 8, 2011
Slide 11
Slide 11 text
#CSS
h2 ~ p {
color: red;
}
Primary Headline
General Paragraph - Not Selected
Secondary Headline
Will be Selected
Will be Selected
Extra Content
Will be Selected
General Sibling The selector matches elements that are siblings of a given element. * Every element after the h2 will be selected CSS3 Saturday, October 8, 2011Slide 12
Slide 12 text
General Sibling
div
p
h1
p
h2
Saturday, October 8, 2011
Slide 13
Slide 13 text
Intro to Selectors
Selector Performance
Attribute Selectors
Pseudo Selectors
Pseudo Elements
PolyFills
The Future
Saturday, October 8, 2011
Slide 14
Slide 14 text
CSS Specificity
It’s a numbers game.
100
#header .my-class
[alt]
div
10 1
Points Per Selector
:after
Saturday, October 8, 2011
Slide 15
Slide 15 text
CSS FACE OFF
Who Wins??
?
WINNER
#1
#slider
#2
.two-col .container .primary .content ul
Saturday, October 8, 2011
Slide 16
Slide 16 text
CSS FACE OFF
Who Wins??
1
WINNER
#1
#slider
100 Points
#2
.two-col .container .primary .content ul
41 Points
Saturday, October 8, 2011
Slide 17
Slide 17 text
CSS FACE OFF
Let’s make it more challenging!
?
WINNER
#1
.container .external
#2
.container a[rel="external"]
Saturday, October 8, 2011
Slide 18
Slide 18 text
CSS FACE OFF
Who Wins??
2
WINNER
#1
.container .external
020 Points
#2
.container a[rel="external"]
021 Points
Saturday, October 8, 2011
Slide 19
Slide 19 text
Selectors are read from
right to left
Saturday, October 8, 2011
Slide 20
Slide 20 text
#CSS
body.two-col { ... }
body.two-col .container { ... }
body.two-col .container .primary { ... }
Selector Flow
Do NOT write your css like you’re following your HTML
structure!
Saturday, October 8, 2011
Slide 21
Slide 21 text
Intro to Selectors
Selector Performance
Attribute Selectors
Pseudo Selectors
Pseudo Elements
PolyFills
The Future
Saturday, October 8, 2011
Slide 22
Slide 22 text
#CSS
img[alt] {
border: 1px green solid;
}
Attribute Selector
Check if attribute exists.
Saturday, October 8, 2011
Attribute Selector
Check if attribute exists.
Saturday, October 8, 2011
Slide 23
Slide 23 text
#CSS
div[class|="widget"] {
...
}
Child Selectors
“Slug” selector
* All “widgets” will be selected
Saturday, October 8, 2011
Widget id of 1
Slide 24
Slide 24 text
#CSS
div[class|="widget"] {
...
}
Child Selectors
“Slug” selector
* All “widgets” will be selected
Saturday, October 8, 2011
Widget id of 1
Slide 25
Slide 25 text
#CSS
div[class*="foo"] {
color: red;
}
Apply to this div
Attribute Selector
“Contains” selector
CSS3
Saturday, October 8, 2011
Slide 27
Slide 27 text
#CSS
a[href$=".pdf"] { background-image: url(pdf.png); }
Download White Paper
Child Selectors
“Ends” with selector
CSS3
Saturday, October 8, 2011
Slide 28
Slide 28 text
#CSS
[class$="right"] {
_display: inline;
}
*[class$="right"] {
_display: inline;
}
Attribute Selectors
Anti-pattern
* Universal selector will be used.
Saturday, October 8, 2011
Slide 29
Slide 29 text
Intro to Selectors
Selector Performance
Attribute Selectors
Pseudo Selectors
Pseudo Elements
PolyFills
The Future
Saturday, October 8, 2011
Slide 30
Slide 30 text
#CSS
div p:first-child {
color: #333;
font-size: 14px;
}
:first-child
:first-child, :last-child and :only-child
Saturday, October 8, 2011
Important Intro
Regular Content
Slide 31
Slide 31 text
#CSS
.menu li {
border-bottom: 1px solid #ccc;
}
.menu li:last-child {
border: 0;
}
- First Menu element
- Menu element
- Last Menu element
Slide 32
Slide 32 text
#CSS
tr:nth-child(odd) {
background: #ccc;
}
First Row
Second Row
:nth-child/nth-of-type
:nth-* accepts 3 types of parameters: odd, even and equation
(3n/3)
CSS3
Saturday, October 8, 2011
Slide 33
Slide 33 text
:nth-child/nth-of-type
:nth-* equation explained
3n
(3x0) = 0 (no select)
(3x1) = 3
(3x2) = 6
3n+1
(3x0) + 1 = 1
(3x1) + 1 = 4
(3x2) + 1 = 7
n+5
0 + 5 = 5
1 + 5 = 6
2 + 5 = 7
3n-1
(3x0) - 1= 0
(3x1) - 1= 2
(3x2) - 1= 5
Saturday, October 8, 2011
Slide 34
Slide 34 text
:nth-child/nth-of-type
:nth-* equation examples
odd 3 3n 3n+1 3n-1 n+3
1 X X
2 X
3 X X X X
4 X X
5 X X X
6 X X
7 X X X
8 X X
Saturday, October 8, 2011
Slide 35
Slide 35 text
#CSS
div:nth-child(3n) { background: #ccc; }
:nth-child/nth-of-type CSS3
Saturday, October 8, 2011
3n
3n
Slide 36
Slide 36 text
#CSS
.widget:nth-last-child(3n) { background: #ccc; }
:nth-child/nth-of-type
:nth-last-child and :nth-last-of-type both start from the last
element and move up.
CSS3
Saturday, October 8, 2011
3n
3n
Slide 37
Slide 37 text
#CSS
.widget:nth-child(3n) { background: #ccc; }
:nth-child/nth-of-type
Let’s mix it up!
CSS3
Saturday, October 8, 2011
Side Note
Side Note
Side Note
Side Note
3n
Slide 38
Slide 38 text
#CSS
div:nth-of-type(3n) { background: #ccc; }
:nth-child/nth-of-type
Now with :nth-of-type
CSS3
Saturday, October 8, 2011
Side Note
Side Note
3n
Side Note
Side Note
3n
Slide 39
Slide 39 text
#CSS
input:not([type="radio"]):not([type="checkbox"]):not
([type="submit"]):not([type="button"]):not([type="image"]) {
border: 1px solid #ccc;
border-radius: 5px;
}
Full Name:
Opt-in:
Pseudo Selectors :not() - negation selector CSS3 Saturday, October 8, 2011Slide 40
Slide 40 text
#CSS
input:checked + label { border: 1px dashed #ccc; }
input[type="text"]:disabled { background: rgba(10, 10, 10, 0.7); }
input:required { font-weight: bold; }
input:optional { color: green; }
input:valid { box-shadow: 0 0 5px rgba(0, 0, 0, 0.4); }
input:invalid { box-shadow: 0 0 5px red; }
Pseudo Selectors
Form based selectors
CSS3
Saturday, October 8, 2011
Slide 41
Slide 41 text
Intro to Selectors
Selector Performance
Attribute Selectors
Pseudo Selectors
Pseudo Elements
PolyFills
The Future
Saturday, October 8, 2011
Slide 42
Slide 42 text
Pseudo Elements
A pseudo-element is identified by using two colons
(::). Available pseudo-elements:
::first-line, ::first-letter, ::before and ::after
For compatability purposes the the single colon (:)
notation has been accepted. All new CSS3 only
pseudo-elements, ::selection, are required to use
double colon (::).
Saturday, October 8, 2011
Slide 43
Slide 43 text
Pseudo Elements
Saturday, October 8, 2011
Slide 44
Slide 44 text
#CSS
.top { ... }
.top:before {
content: "";
display: block;
position: absolute;
bottom: -10px;
left: 0;
}
.top:after {
content: "";
display: block;
position: absolute;
bottom: -10px;
right: 0;
}
Pseudo Elements
:before and :after
This is how CSS ribbons are created.
Saturday, October 8, 2011
Slide 45
Slide 45 text
Saturday, October 8, 2011
Slide 46
Slide 46 text
#CSS
::-webkit-validation-bubble { ... }
::-webkit-validation-bubble-top-outer-arrow { ... }
::-webkit-validation-bubble-top-inner-arrow { ... }
::-webkit-validation-bubble-message { ... }
Pseudo Elements
Style form validation messages (webkit)
CSS3
Saturday, October 8, 2011
Slide 47
Slide 47 text
Intro to Selectors
Selector Performance
Attribute Selectors
Pseudo Selectors
Pseudo Elements
PolyFills
The Future
Saturday, October 8, 2011
Slide 48
Slide 48 text
Saturday, October 8, 2011
Slide 49
Slide 49 text
#HTML
Polyfill
Using IE9.js
Saturday, October 8, 2011
Slide 50
Slide 50 text
#CSS
.menu li:last-child {
border: 0;
}
.menu li.last {
border: 0;
}
#Javascript (jQuery)
$('.menu li:last-child').addClass('last');
Polyfill
Using jQuery to add classes
* IE6-8 will fail if declarations are combined.
Saturday, October 8, 2011
Slide 51
Slide 51 text
Intro to Selectors
Selector Performance
Attribute Selectors
Pseudo Selectors
Pseudo Elements
PolyFills
The Future
Saturday, October 8, 2011
Slide 52
Slide 52 text
#CSS
.primary-nav $li a { ... }
Subject Selector
Apply style to the subject instead of the “key” selector
http://www.w3.org/TR/2011/WD-selectors4-20110929/
CSS4
Saturday, October 8, 2011
Slide 53
Slide 53 text
#CSS
1. a:local-link(0) { ... }
2. a:local-link(1) { ... }
3. a:local-link(2) { ... }
4. a:local-link(3) { ... }
:local-link
The local link is determined based on the site URI. The
parameter accepted in local-link tells the selector how many
“url segments” to require.
#HTML
1. Home
2. 2011
3. March
4. March
5. March
http://www.w3.org/TR/2011/WD-selectors4-20110929/
CSS4
Saturday, October 8, 2011
Slide 54
Slide 54 text
Currently Supported
http://www.standardista.com/css3/css3-selector-browser-support/
Saturday, October 8, 2011
Slide 55
Slide 55 text
Questions? Concerns?
Complaints?
Saturday, October 8, 2011
Slide 56
Slide 56 text
Thanks for Listening!
jakefolio
http://jakefolio.com
[email protected]
TEXT “JAKEFOLIO” TO 50500
Saturday, October 8, 2011