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
OSS構成管理ツールCMDBuildを使ったAWSリソース管理の自動化
satorufunai
0
640
Perlの生きのこり - エンジニアがこの先生きのこるためのカンファレンス2025
kfly8
2
270
JavaにおけるNull非許容性
skrb
2
2.6k
クラウド関連のインシデントケースを収集して見えてきたもの
lhazy
2
290
PHPカンファレンス名古屋-テックリードの経験から学んだ設計の教訓
hayatokudou
2
540
設計を積み重ねてシステムを刷新する
sansantech
PRO
0
160
LINEギフトにおけるバックエンド開発
lycorptech_jp
PRO
0
270
役員・マネージャー・著者・エンジニアそれぞれの立場から見たAWS認定資格
nrinetcom
PRO
3
5.8k
急成長する企業で作った、エンジニアが輝ける制度/ 20250227 Rinto Ikenoue
shift_evolve
0
130
データベースの負荷を紐解く/untangle-the-database-load
emiki
2
500
【5分でわかる】セーフィー エンジニア向け会社紹介
safie_recruit
0
18k
AIエージェント元年
shukob
0
160
Featured
See All Featured
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
356
29k
Visualization
eitanlees
146
15k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
29
2.4k
Six Lessons from altMBA
skipperchong
27
3.6k
Faster Mobile Websites
deanohume
306
31k
Building Better People: How to give real-time feedback that sticks.
wjessup
367
19k
Raft: Consensus for Rubyists
vanstee
137
6.8k
Build The Right Thing And Hit Your Dates
maggiecrowley
34
2.5k
The Language of Interfaces
destraynor
156
24k
Being A Developer After 40
akosma
89
590k
What’s in a name? Adding method to the madness
productmarketing
PRO
22
3.3k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
33
2.8k
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="
[email protected]
" /> 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