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
420
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
320
Start using CSS Grid Layout
rachelandrew
2
520
The New CSS Layout
rachelandrew
4
360
Your Speakers
rachelandrew
1
1k
Flexible Boxes and Grids
rachelandrew
1
190
Configuration Management with Puppet for Developers
rachelandrew
1
150
Food hacking
rachelandrew
2
260
CSS Grid Layout for Paris Web
rachelandrew
0
1.2k
The business of front-end development
rachelandrew
1
640
Other Decks in Technology
See All in Technology
隙間時間で爆速開発! Claude Code × Vibe Coding で作るマニュアル自動生成サービス
akitomonam
2
200
Webの技術とガジェットで那須の子ども達にワクワクを! / IoTLT_20250720
you
PRO
0
130
The Madness of Multiple Gemini CLIs Developing Simultaneously with Jujutsu
gunta
1
2.8k
OpenTelemetry の Log を使いこなそう
biwashi
5
1.1k
「育てる」サーバーレス 〜チーム開発研修で学んだ、小さく始めて大きく拡張するAWS設計〜
yu_kod
1
180
株式会社島津製作所_研究開発(集団協業と知的生産)の現場を支える、OSS知識基盤システムの導入
akahane92
1
1.3k
Railsの限界を超えろ!「家族アルバム みてね」の画像・動画の大規模アップロードを支えるアーキテクチャの変遷
ojima_h
4
520
クマ×共生 HACKATHON - 熊対策を『特別な行動」から「生活の一部」に -
pharaohkj
0
180
Kiroから考える AIコーディングツールの潮流
s4yuba
1
310
会社もクラウドも違うけど 通じたコスト削減テクニック/Cost optimization strategies effective regardless of company or cloud provider
aeonpeople
2
370
完璧を目指さない小さく始める信頼性向上
kakehashi
PRO
0
110
alecthomas/kong はいいぞ
fujiwara3
6
1.1k
Featured
See All Featured
The Cult of Friendly URLs
andyhume
79
6.5k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
251
21k
The Straight Up "How To Draw Better" Workshop
denniskardys
235
140k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
45
7.5k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
47
9.6k
Build your cross-platform service in a week with App Engine
jlugia
231
18k
RailsConf 2023
tenderlove
30
1.2k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
33
2.4k
Statistics for Hackers
jakevdp
799
220k
Building Flexible Design Systems
yeseniaperezcruz
328
39k
Optimising Largest Contentful Paint
csswizardry
37
3.4k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
31
2.4k
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