Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
ConFoo: CSS3 Selectors
Search
Rachel Andrew
February 28, 2013
Technology
5
410
ConFoo: CSS3 Selectors
Links and notes can be found at:
http://www.rachelandrew.co.uk/presentations/css3-selectors
Rachel Andrew
February 28, 2013
Tweet
Share
More Decks by Rachel Andrew
See All by Rachel Andrew
MirrorConf: Solving Layout Problems with CSS Grid & Friends
rachelandrew
1
300
Start using CSS Grid Layout
rachelandrew
2
490
The New CSS Layout
rachelandrew
4
340
Your Speakers
rachelandrew
1
990
Flexible Boxes and Grids
rachelandrew
1
170
Configuration Management with Puppet for Developers
rachelandrew
1
130
Food hacking
rachelandrew
2
260
CSS Grid Layout for Paris Web
rachelandrew
0
1.1k
The business of front-end development
rachelandrew
1
600
Other Decks in Technology
See All in Technology
MIMEと文字コードの闇
hirachan
2
690
エンジニアリング価値を黒字化する バリューベース戦略を用いた 技術戦略策定の道のり
kzkmaeda
3
860
ホワイトボードチャレンジ 説明&実行資料
ichimichi
0
130
システム・ML活用を広げるdbtのデータモデリング / Expanding System & ML Use with dbt Modeling
i125
1
290
LINEギフトにおけるバックエンド開発
lycorptech_jp
PRO
0
130
2025-02-21 ゆるSRE勉強会 Enhancing SRE Using AI
yoshiiryo1
1
430
データエンジニアリング領域におけるDuckDBのユースケース
chanyou0311
3
600
Goで作って学ぶWebSocket
ryuichi1208
3
2.3k
抽象化をするということ - 具体と抽象の往復を身につける / Abstraction and concretization
soudai
27
14k
クラウドサービス事業者におけるOSS
tagomoris
3
960
人はなぜISUCONに夢中になるのか
kakehashi
PRO
6
1.7k
Potential EM 制度を始めた理由、そして2年後にやめた理由 - EMConf JP 2025
hoyo
2
1.1k
Featured
See All Featured
The Art of Programming - Codeland 2020
erikaheidi
53
13k
Making Projects Easy
brettharned
116
6k
How To Stay Up To Date on Web Technology
chriscoyier
790
250k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
44
7k
Scaling GitHub
holman
459
140k
Thoughts on Productivity
jonyablonski
69
4.5k
The Pragmatic Product Professional
lauravandoore
32
6.4k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
175
52k
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
4
420
Imperfection Machines: The Place of Print at Facebook
scottboms
267
13k
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
7
640
Site-Speed That Sticks
csswizardry
4
390
Transcript
CSS3 Selectors Rachel Andrew: ConFoo 2013 Thursday, 28 February 13
Thursday, 28 February 13
What is CSS3? Thursday, 28 February 13
CSS3 is the next version of CSS Thursday, 28 February
13
CSS3 is Modular Thursday, 28 February 13
Some CSS3 modules are more complete than others Thursday, 28
February 13
W3C Maturity Levels Working Draft Candidate Recommendation Proposed Recommendation W3C
Recommendation Thursday, 28 February 13
CSS3 is supported by browsers Some browsers and some (parts
of) modules. Thursday, 28 February 13
Selectors module W3C Recommendation http://www.w3.org/TR/css3-selectors/ Thursday, 28 February 13
h1 {} p {} .thing {} #uniquething {} .thing p
Basic Selectors Thursday, 28 February 13
The problem with CSS2 selectors Thursday, 28 February 13
<h1>My heading</h1> <p class=”first”> ... </p> <p> ... </p> Adding
classes Thursday, 28 February 13
CSS3 Selectors “Common sense” new selectors target elements more precisely
without adding classes Thursday, 28 February 13
Attribute Selectors Select elements based on attributes Thursday, 28 February
13
form input[type="text"] { } ! form input[type="submit"] { } Attribute
Selectors Thursday, 28 February 13
Attribute Selectors Thursday, 28 February 13
label[for="fContact"] { ! float: none; ! width: auto; } Attribute
Selectors Thursday, 28 February 13
a[href ^="mailto:"] { padding-right: 20px; ! background-image:url(email.png); ! background-repeat: no-repeat;
! background-position: right center; } Attribute Selectors Thursday, 28 February 13
Structural pseudo-class selectors Thursday, 28 February 13
a:link {} a:visited {} Pseudo-Class Selectors Thursday, 28 February 13
a:hover {} a:active {} Dynamic Pseudo-Class Thursday, 28 February 13
:first-child target an element when it is the first child
of a parent element Thursday, 28 February 13
<div class=”wrapper”> <p> ... </p> <p> ... </p> <p> ...
</p> </div> :first-child Thursday, 28 February 13
:first-child Thursday, 28 February 13
.wrapper p { ! ! font-size: 1.5em; } :first-child Thursday,
28 February 13
.wrapper p:first-child { ! ! font-size: 1.5em; } :first-child Thursday,
28 February 13
:first-child Thursday, 28 February 13
:last-child target an element when it is the last child
of a parent element Thursday, 28 February 13
:last-child Thursday, 28 February 13
.navigation li:last-child { ! ! border-bottom: none; } :last-child Thursday,
28 February 13
:last-child Thursday, 28 February 13
:nth-child select multiple elements according to their position in the
document tree Thursday, 28 February 13
:nth-child Thursday, 28 February 13
tr:nth-child(odd) td { ! ! background-color: #f0e9c5; } :nth-child Thursday,
28 February 13
:nth-child Thursday, 28 February 13
tr:nth-child(3) td { ! ! background-color: #f0e9c5; } :nth-child Thursday,
28 February 13
:nth-child Thursday, 28 February 13
tr:nth-child(2n+1) td { ! ! background-color: #f0e9c5; } :nth-child http://css-tricks.com/how-nth-child-works/
Thursday, 28 February 13
:nth-of-type select multiple elements according to their position in the
document tree BUT only those elements that are the same as the type the rule is applied to. Thursday, 28 February 13
p:nth-of-type(odd) { ! ! background-color: #f0e9c5; } :nth-of-type Thursday, 28
February 13
:nth-of-type Thursday, 28 February 13
:only-child matches an element if it is the only child
element of it’s parent. Thursday, 28 February 13
li { ! list-style-type: disc; } ! li:only-child { !
list-style-type: none; } :only-child Thursday, 28 February 13
:only-child Thursday, 28 February 13
:empty matches an element if it is empty Thursday, 28
February 13
p { ! padding: 0 0 1em 0; ! margin:
0; } ! p:empty { ! padding: 0; } :empty Thursday, 28 February 13
For input elements Structural pseudo-classes for use with forms. Thursday,
28 February 13
:checked the checked state of a checkbox or radio button
Thursday, 28 February 13
.agreeterms:checked { border:2px solid blue; } :checked Thursday, 28 February
13
enabled and disabled detecting input element states Thursday, 28 February
13
input:enabled { color: #000; } :enabled Thursday, 28 February 13
input:disabled { color: #999; } :disabled Thursday, 28 February 13
The CSS3 Basic User Interface Module http://www.w3.org/TR/css3-ui/ (Working Draft) Thursday,
28 February 13
:default :valid :invalid :in-range :out-of-range :required :optional :read-only :read-write Thursday,
28 February 13
<input type="text" name="fName" id="fName" required="required" /> ! ! <input type="email"
name="fEmail" id="fEmail" required="required" placeholder="
[email protected]
" /> HTML5 attributes Thursday, 28 February 13
input:focus:required:invalid { background-image: url(error.png); background-position: 98% center; background-repeat: no-repeat; }
Adding an icon to required fields Thursday, 28 February 13
Adding an icon to required fields Thursday, 28 February 13
input:required:valid { background-image: url(accept.png); background-position: 98% center; background-repeat: no-repeat; }
Adding an icon to valid fields Thursday, 28 February 13
Adding an icon to valid fields Thursday, 28 February 13
input[type="email"]:focus:required:invalid { ! background-image: url(email_error.png); } Show a different icon
for the field type Thursday, 28 February 13
Show a different icon for the field type Thursday, 28
February 13
the Negation pseudo- class :not(selector) Thursday, 28 February 13
<p> ... </p> <p class=”box”> ... </p> <p> ... </p>
:not Thursday, 28 February 13
p:not(.box) { ! ! padding: 1em; ! ! border:2px solid
#000; ! } :not Thursday, 28 February 13
:not Thursday, 28 February 13
Pseudo-elements Thursday, 28 February 13
:first-letter the first character of the first line of text
Thursday, 28 February 13
.wrapper:first-letter { ! font-size: 200%; ! font-weight: bold; ! color:
red; } :first-letter Thursday, 28 February 13
:first-letter Thursday, 28 February 13
:first-line the first formatted line of text Thursday, 28 February
13
.wrapper:first-line { ! font-size: 200%; ! font-weight: bold; ! color:
red; } :first-line Thursday, 28 February 13
:first-line Thursday, 28 February 13
:before Render content before the element when using generated content
Thursday, 28 February 13
<div class=”content”> ... </div> :before Thursday, 28 February 13
.content:before { content: "Start here:"; } :before Thursday, 28 February
13
:before Thursday, 28 February 13
:after Render content after the element when using generated content
Thursday, 28 February 13
.content:after { content: "End here:"; } :after Thursday, 28 February
13
Generated content can be very useful... Thursday, 28 February 13
CSS Arrow Please Thursday, 28 February 13
Adding a bird Thursday, 28 February 13
.clearfix:after { visibility: hidden; display: block; font-size: 0; content: "
"; clear: both; height: 0; } .clearfix { display: inline-block; } /* start commented backslash hack \*/ * html .clearfix { height: 1%; } .clearfix { display: block; } /* close commented backslash hack */ Clear Fix Thursday, 28 February 13
::selection Content selected in browser by the user Thursday, 28
February 13
.wrapper p::selection {! background-color: red; } ::selection Thursday, 28 February
13
::selection Thursday, 28 February 13
Combinators Combining selectors to target elements Thursday, 28 February 13
Descendant Selector Select all elements that are descendants of a
specified parent Thursday, 28 February 13
.wrapper p { ! font-size: 1.5em; } Descendant Selector Thursday,
28 February 13
Child Selector Select all elements that are immediate children of
a specified parent Thursday, 28 February 13
<ul> <li>Item 1 <ol> <li>Sub list item 1</li> <li>Sub list
item 2</li> </ol> </li> <li>Item 2</li> </ul> Child Selector Thursday, 28 February 13
li { ! color: #000; } ! ul > li
{ ! color: red; } Child Selector Thursday, 28 February 13
Child Selector Thursday, 28 February 13
Adjacent Sibling Select elements that are the adjacent siblings of
an element Thursday, 28 February 13
.wrapper h1 + p { ! font-size: 1.5em; } Adjacent
Sibling Thursday, 28 February 13
Adjacent Sibling Thursday, 28 February 13
General Sibling Select elements that are the siblings of an
element Thursday, 28 February 13
.wrapper h2~p { ! color: red; } General Sibling Thursday,
28 February 13
General Sibling Thursday, 28 February 13
Browser Support Thursday, 28 February 13
Browser Support Thursday, 28 February 13
Your options Thursday, 28 February 13
Do Nothing. or serve a simpler layout to older browsers
Thursday, 28 February 13
JavaScript Plug the holes in browser support using JavaScript. Thursday,
28 February 13
div#wrapper p:first-child, div#wrapper p.first { ! ! font-size: 1.5em; }
jQuery: first-child <script src="http://code.jquery.com/jquery-latest.js"></ script> <script> $(document).ready(function(){ ! $("div#wrapper p:first-child").addClass("first"); }); </script> Thursday, 28 February 13
ul#navigation li:last-child, ul#navigation li.last { ! ! border-bottom: none; }
jQuery: last-child <script src="http://code.jquery.com/jquery-latest.js"></ script> <script> $(document).ready(function(){ ! $("ul#navigation li:last-child").addClass("last"); }); </script> Thursday, 28 February 13
tr:nth-child(odd) td, td.odd { ! background-color: #f0e9c5; } jQuery: nth-child
<script src="http://code.jquery.com/jquery-latest.js"></ script> <script> $(document).ready(function(){ ! $("tr:nth-child(odd) td").addClass("odd"); }); </script> Thursday, 28 February 13
CSS “PolyFills” plugging the holes in support Thursday, 28 February
13
What is a polyfill? A polyfill, or polyfiller, is a
piece of code (or plugin) that provides the technology that you, the developer, expect the browser to provide natively. http://remysharp.com/2010/10/08/what-is-a-polyfill/ Thursday, 28 February 13
selectivizr http://selectivizr.com/ Thursday, 28 February 13
Check your stats. Thursday, 28 February 13
greenbelt.org.uk Thursday, 28 February 13
IE8 Thursday, 28 February 13
var patch_css = function() { ! ! // supporting css
stuff ! ! ! ! $('input[type=submit]').addClass('submit'); ! ! $('h1+h2').addClass('stacked'); ! ! $('h1+p').addClass('stacked'); ! ! ! }; patch_css Thursday, 28 February 13
CSS3 Workflow How I approach my projects. Thursday, 28 February
13
CSS3 Workflow Develop without any polyfill or JavaScript fixes in
place. Thursday, 28 February 13
CSS3 Workflow Validate. Thursday, 28 February 13
CSS3 Workflow Test & Fix in older browsers Thursday, 28
February 13
CSS3 Workflow Decide if you need to use a polyfill
and which kind Thursday, 28 February 13
CSS3 Workflow Test again. Thursday, 28 February 13
Thank You! @rachelandrew rachelandrew.co.uk edgeofmyseat.com grabaperch.com Thursday, 28 February 13