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
CSS3 Selectors
Search
Rachel Andrew
July 31, 2012
Technology
8
1.4k
CSS3 Selectors
Rachel Andrew
July 31, 2012
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
500
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
610
Other Decks in Technology
See All in Technology
Pwned Labsのすゝめ
ken5scal
2
460
AIエージェント時代のエンジニアになろう #jawsug #jawsdays2025 / 20250301 Agentic AI Engineering
yoshidashingo
8
3.9k
AI自体のOps 〜LLMアプリの運用、AWSサービスとOSSの使い分け〜
minorun365
PRO
7
570
LINE NEWSにおけるバックエンド開発
lycorptech_jp
PRO
0
310
ディスプレイ広告(Yahoo!広告・LINE広告)におけるバックエンド開発
lycorptech_jp
PRO
0
450
AIエージェント入門
minorun365
PRO
32
19k
Amazon Q Developerの無料利用枠を使い倒してHello worldを表示させよう!
nrinetcom
PRO
2
120
エンジニアリング価値を黒字化する バリューベース戦略を用いた 技術戦略策定の道のり
kzkmaeda
7
3k
OPENLOGI Company Profile
hr01
0
60k
Aurora PostgreSQLがCloudWatch Logsに 出力するログの課金を削減してみる #jawsdays2025
non97
1
230
IAMのマニアックな話2025
nrinetcom
PRO
6
1.3k
日経のデータベース事業とElasticsearch
hinatades
PRO
0
250
Featured
See All Featured
How to train your dragon (web standard)
notwaldorf
91
5.9k
Unsuck your backbone
ammeep
669
57k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
366
25k
Reflections from 52 weeks, 52 projects
jeffersonlam
348
20k
VelocityConf: Rendering Performance Case Studies
addyosmani
328
24k
Visualization
eitanlees
146
15k
Gamification - CAS2011
davidbonilla
80
5.2k
Building a Modern Day E-commerce SEO Strategy
aleyda
38
7.1k
Music & Morning Musume
bryan
46
6.4k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
160
15k
Six Lessons from altMBA
skipperchong
27
3.6k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
129
19k
Transcript
CSS3 Selectors The CSS Summit 2012
Rachel Andrew @rachelandrew rachelandrew.co.uk edgeofmyseat.com grabaperch.com
What is CSS3?
CSS3 is the next version of CSS
CSS3 is Modular
Some CSS3 modules are more complete than others
W3C Maturity Levels Working Draft Candidate Recommendation Proposed Recommendation W3C
Recommendation
CSS3 is supported by browsers Some browsers and some (parts
of) modules.
Selectors module W3C Recommendation http://www.w3.org/TR/css3-selectors/
h1 {} p {} .thing {} #uniquething {} .thing p
Basic Selectors
The problem with CSS2 selectors
<h1>My heading</h1> <p class=”first”> ... </p> <p> ... </p> Adding
classes
CSS3 Selectors “Common sense” new selectors target elements more precisely
without adding classes
Attribute Selectors Select elements based on attributes
form input[type="text"] { } ! form input[type="submit"] { } Attribute
Selectors
Attribute Selectors
label[for="fContact"] { ! float: none; ! width: auto; } Attribute
Selectors
a[href ^="mailto:"] { padding-right: 20px; ! background-image:url(email.png); ! background-repeat: no-repeat;
! background-position: right center; } Attribute Selectors
Structural pseudo-class selectors
a:link {} a:visited {} Pseudo-Class Selectors
a:hover {} a:active {} Dynamic Pseudo-Class
:first-child target an element when it is the first child
of a parent element
<div class=”wrapper”> <p> ... </p> <p> ... </p> <p> ...
</p> </div> :first-child
:first-child
.wrapper p { ! ! font-size: 1.5em; } :first-child
.wrapper p:first-child { ! ! font-size: 1.5em; } :first-child
:first-child
:last-child target an element when it is the last child
of a parent element
:last-child
.navigation li:last-child { ! ! border-bottom: none; } :last-child
:last-child
:nth-child select multiple elements according to their position in the
document tree
:nth-child
tr:nth-child(odd) td { ! ! background-color: #f0e9c5; } :nth-child
:nth-child
tr:nth-child(3) td { ! ! background-color: #f0e9c5; } :nth-child
:nth-child
tr:nth-child(2n+1) td { ! ! background-color: #f0e9c5; } :nth-child http://reference.sitepoint.com/css/understandingnthchildexpressions
: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.
p:nth-of-type(odd) { ! ! background-color: #f0e9c5; } :nth-of-type
:nth-of-type
:only-child matches an element if it is the only child
element of it’s parent.
li { ! list-style-type: disc; } ! li:only-child { !
list-style-type: none; } :only-child
:only-child
:empty matches an element if it is empty
p { ! padding: 0 0 1em 0; ! margin:
0; } ! p:empty { ! padding: 0; } :empty
For input elements Structural pseudo-classes for use with forms.
:checked the checked state of a checkbox or radio button
.agreeterms:checked { border:2px solid blue; } :checked
enabled and disabled detecting input element states
input:enabled { color: #000; } :enabled
input:disabled { color: #999; } :disabled
The CSS3 Basic User Interface Module http://www.w3.org/TR/css3-ui/ (Working Draft)
:default :valid :invalid :in-range :out-of-range :required :optional :read-only :read-write
<input type="text" name="fName" id="fName" required="required" /> ! ! <input type="email"
name="fEmail" id="fEmail" required="required" placeholder="name@example.com" /> HTML5 attributes
input:focus:required:invalid { background-image: url(error.png); background-position: 98% center; background-repeat: no-repeat; }
Adding an icon to required fields
Adding an icon to required fields
input:required:valid { background-image: url(accept.png); background-position: 98% center; background-repeat: no-repeat; }
Adding an icon to valid fields
Adding an icon to valid fields
input[type="email"]:focus:required:invalid { ! background-image: url(email_error.png); } Show a different icon
for the field type
Show a different icon for the field type
the Negation pseudo- class :not(selector)
<p> ... </p> <p class=”box”> ... </p> <p> ... </p>
:not
p:not(.box) { ! ! padding: 1em; ! ! border:2px solid
#000; ! } :not
:not
Pseudo-elements
:first-letter the first character of the first line of text
.wrapper:first-letter { ! font-size: 200%; ! font-weight: bold; ! color:
red; } :first-letter
:first-letter
:first-line the first formatted line of text
.wrapper:first-line { ! font-size: 200%; ! font-weight: bold; ! color:
red; } :first-line
:first-line
:before Render content before the element when using generated content
<div class=”content”> ... </div> :before
.content:before { content: "Start here:"; } :before
:before
:after Render content after the element when using generated content
.content:after { content: "End here:"; } :after
Generated content can be very useful...
CSS Arrow Please
Adding a bird
::selection Content selected in browser by the user
.wrapper p::selection {! background-color: red; } ::selection
::selection
Combinators Combining selectors to target elements
Descendant Selector Select all elements that are descendants of a
specified parent
.wrapper p { ! font-size: 1.5em; } Descendant Selector
Child Selector Select all elements that are immediate children of
a specified parent
<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
li { ! color: #000; } ! ul > li
{ ! color: red; } Child Selector
Child Selector
Adjacent Sibling Select elements that are the adjacent siblings of
an element
.wrapper h1 + p { ! font-size: 1.5em; } Adjacent
Sibling
Adjacent Sibling
General Sibling Select elements that are the siblings of an
element
.wrapper h2~p { ! color: red; } General Sibling
General Sibling
Browser Support
Browser Support
Your options
Do Nothing. or serve a simpler layout to older browsers
JavaScript Plug the holes in browser support using JavaScript.
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>
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>
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>
CSS “PolyFills” plugging the holes in support
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/
selectivizr http://selectivizr.com/
Check your stats.
greenbelt.org.uk
IE8
var patch_css = function() { ! ! // supporting css
stuff ! ! ! ! $('input[type=submit]').addClass('submit'); ! ! $('h1+h2').addClass('stacked'); ! ! $('h1+p').addClass('stacked'); ! ! ! }; patch_css
CSS3 Workflow How I approach my projects.
CSS3 Workflow Develop without any polyfill or JavaScript fixes in
place.
CSS3 Workflow Validate.
CSS3 Workflow Test & Fix in older browsers
CSS3 Workflow Decide if you need to use a polyfill
and which kind
CSS3 Workflow Test again.
Thank You! @rachelandrew rachelandrew.co.uk edgeofmyseat.com grabaperch.com