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
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
american airlines®️ USA Contact Numbers: Complete 2025 Support Guide
supportflight
1
110
What’s new in Android development tools
yanzm
0
430
Operating Operator
shhnjk
1
610
DatabricksにOLTPデータベース『Lakebase』がやってきた!
inoutk
0
130
事例で学ぶ!B2B SaaSにおけるSREの実践例/SRE for B2B SaaS: A Real-World Case Study
bitkey
0
130
AIエージェントが書くのなら直接CloudFormationを書かせればいいじゃないですか何故AWS CDKを使う必要があるのさ
watany
6
1k
React開発にStorybookとCopilotを導入して、爆速でUIを編集・確認する方法
yu_kod
1
300
60以上のプロダクトを持つ組織における開発者体験向上への取り組み - チームAPIとBackstageで構築する組織の可視化基盤 - / sre next 2025 Efforts to Improve Developer Experience in an Organization with Over 60 Products
vtryo
2
450
Delegating the chores of authenticating users to Keycloak
ahus1
0
160
How to Quickly Call American Airlines®️ U.S. Customer Care : Full Guide
flyaahelpguide
0
100
DBのスキルで生き残る技術 - AI時代におけるテーブル設計の勘所
soudai
PRO
54
21k
ネットワーク保護はどう変わるのか?re:Inforce 2025最新アップデート解説
tokushun
0
210
Featured
See All Featured
GitHub's CSS Performance
jonrohan
1031
460k
Build The Right Thing And Hit Your Dates
maggiecrowley
36
2.8k
jQuery: Nuts, Bolts and Bling
dougneiner
63
7.8k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
34
3.1k
Being A Developer After 40
akosma
90
590k
Mobile First: as difficult as doing things right
swwweet
223
9.7k
Agile that works and the tools we love
rasmusluckow
329
21k
Java REST API Framework Comparison - PWX 2021
mraible
31
8.7k
Testing 201, or: Great Expectations
jmmastey
43
7.6k
Bootstrapping a Software Product
garrettdimon
PRO
307
110k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
161
15k
Reflections from 52 weeks, 52 projects
jeffersonlam
351
20k
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