CSS Selectors: The Next Generation

CSS Selectors
The Next
Generation
CSS Selectors
The Next
Generation
Jake Smith October 8, 2011
Saturday, October 8, 2011

View Slide

Jake Smith
Jake Smith
jakefolio
http://jakefolio.com
[email protected]

View Slide

http://bitly.com/mZbVNL
Links For The Talk

View Slide

Intro to Selectors
Selector Performance
Attribute Selectors
Pseudo Selectors
Pseudo Elements
PolyFills
The Future

View Slide

#CSS
.menu li a { color: blue; }

Drop Down

Sub #1
Sub #2

Descendant Selector
Select all the descendants of the speciﬁed element

View Slide

Descendant Selector
.menu
li
li
a
Descendants
Ancestor

View Slide

#CSS
ul li { color: green; }
ul > li { color: red; }

Top Level
Top Level

Sub Level
Sub Level

Child Combinator Selector
This selector matches all elements that are the immediate
children of a speciﬁed element.
* Only the “sub level” text will be red.

View Slide

Selector Context
ul
li
li
ol
Children
Parent
li

View Slide

Adjacent Sibling
#CSS
.module { margin: 0; }
.module + .module { margin-left: 25px; }

Module

Module #2

Module #3

The adjacent sibling selector selects all elements that are the
adjacent siblings of a speciﬁed element.
* Module #2 and #3 will have margin applied.

View Slide

Adjacent Sibling Selector
div
.module
.module
.module + +

View Slide

#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

View Slide

General Sibling
div
p
h1
p
h2

View Slide

Intro to Selectors
Attribute Selectors
Pseudo Selectors
Pseudo Elements
PolyFills
The Future

View Slide

CSS Speciﬁcity
It’s a numbers game.
100
#header .my-class
[alt]
div
10 1
Points Per Selector
:after

View Slide

CSS FACE OFF
Who Wins??
?
WINNER
#1
#slider
#2
.two-col .container .primary .content ul

View Slide

CSS FACE OFF
Who Wins??
1
WINNER
#1
#slider
100 Points
#2
.two-col .container .primary .content ul
41 Points

View Slide

CSS FACE OFF
Let’s make it more challenging!
?
WINNER
#1
.container .external
#2
.container a[rel="external"]

View Slide

CSS FACE OFF
Who Wins??
2
WINNER
#1
.container .external
020 Points
#2
.container a[rel="external"]
021 Points

View Slide

Selectors are read from
right to left

View Slide

#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!

View Slide

Intro to Selectors
Attribute Selectors
Pseudo Selectors
Pseudo Elements
PolyFills
The Future

View Slide

#CSS
img[alt] {
border: 1px green solid;
}

Attribute Selector
Check if attribute exists.

View Slide

#CSS
div[class|="widget"] {
...
}

Widget id of 1

Child Selectors
“Slug” selector
* All “widgets” will be selected

View Slide

#CSS
div[class*="foo"] {
color: red;
}

Apply to this div

Attribute Selector
“Contains” selector
CSS3

View Slide

#CSS
a[href^="mailto:"] {
background: url(/images/icn-email.gif);
}
Portfolio
FAQ
Contact
Child Selectors
“Begins” with selector
CSS3

View Slide

#CSS
a[href$=".pdf"] { background-image: url(pdf.png); }
Download White Paper
Child Selectors
“Ends” with selector
CSS3

View Slide

#CSS
[class$="right"] {
_display: inline;
}
*[class$="right"] {
_display: inline;
}
Attribute Selectors
Anti-pattern
* Universal selector will be used.

View Slide

Intro to Selectors
Attribute Selectors
Pseudo Selectors
Pseudo Elements
PolyFills
The Future

View Slide

#CSS
div p:first-child {
color: #333;
font-size: 14px;
}

Important Intro
Regular Content

:ﬁrst-child
:ﬁrst-child, :last-child and :only-child

View Slide

#CSS
.menu li {
border-bottom: 1px solid #ccc;
}
.menu li:last-child {
border: 0;
}

First Menu element
Menu element
Last Menu element

:last-child
:ﬁrst-child, :last-child and :only-child
CSS3

View Slide

#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

View Slide

: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

View Slide

: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

View Slide

#CSS
div:nth-child(3n) { background: #ccc; }

3n

3n

:nth-child/nth-of-type CSS3

View Slide

#CSS
.widget:nth-last-child(3n) { background: #ccc; }

3n

3n

:nth-last-child and :nth-last-of-type both start from the last
element and move up.
CSS3

View Slide

#CSS
.widget:nth-child(3n) { background: #ccc; }

Side Note
Side Note

Side Note

Side Note
3n

Let’s mix it up!
CSS3

View Slide

#CSS
div:nth-of-type(3n) { background: #ccc; }

Side Note
Side Note

3n
Side Note

Side Note

3n

Now with :nth-of-type
CSS3

View Slide

#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

View Slide

#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

View Slide

Intro to Selectors
Attribute Selectors
Pseudo Selectors
Pseudo Elements
PolyFills
The Future

View Slide

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 (::).

View Slide

Pseudo Elements

View Slide

#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.

View Slide


View Slide

#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

View Slide

Intro to Selectors
Attribute Selectors
Pseudo Selectors
Pseudo Elements
PolyFills
The Future

View Slide


View Slide

#HTML

Polyﬁll
Using IE9.js

View Slide

#CSS
.menu li:last-child {
border: 0;
}
.menu li.last {
border: 0;
}
#Javascript (jQuery)
$('.menu li:last-child').addClass('last');
Polyﬁll
Using jQuery to add classes
* IE6-8 will fail if declarations are combined.

View Slide

Intro to Selectors
Attribute Selectors
Pseudo Selectors
Pseudo Elements
PolyFills
The Future

View Slide

#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

View Slide

#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

View Slide

Currently Supported
http://www.standardista.com/css3/css3-selector-browser-support/

View Slide

Questions? Concerns?
Complaints?

View Slide

Thanks for Listening!
jakefolio
http://jakefolio.com
[email protected]
TEXT “JAKEFOLIO” TO 50500

View Slide

CSS Selectors: The Next Generation

CSS Selectors: The Next Generation

jakefolio

More Decks by jakefolio

Other Decks in Programming

Featured

Transcript