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
270
Start using CSS Grid Layout
rachelandrew
2
450
The New CSS Layout
rachelandrew
4
320
Your Speakers
rachelandrew
1
970
Flexible Boxes and Grids
rachelandrew
1
140
Configuration Management with Puppet for Developers
rachelandrew
1
110
Food hacking
rachelandrew
2
240
CSS Grid Layout for Paris Web
rachelandrew
0
1k
The business of front-end development
rachelandrew
1
470
Other Decks in Technology
See All in Technology
MySQL の SQL クエリチューニングの要所を掴む勉強会
andpad
3
6.3k
生成AIの変革の時代に、直近1年で直面した課題とその解決策
ktc_wada
0
200
プラットフォームってつくることより計測することが重要なんじゃないかという話 / Platform Engineering Meetup #8
taishin
1
360
require(ESM)とECMAScript仕様
uhyo
3
670
[新卒向け研修資料] テスト文字列に「うんこ」と入れるな(2024年版)
infiniteloop_inc
4
15k
いつか使うかも貯金してたらめちゃめちゃ機能が増えてた話
riyaamemiya
0
140
データベース02: データベースの概念
trycycle
0
160
ChatworkのSRE部って実は 半分くらいPlatform Engineering部かもしれない
saramune
0
160
アクセス制御にまつわる改善 / Improving access control
itkq
0
540
Gitlab本から学んだこと - そーだいなるプレイバック / gitlab-book
soudai
4
420
プロトタイピングによる不確実性の低減 / Reducing Uncertainty through Prototyping
ohbarye
5
380
家族アルバム みてねにおけるGrafana活用術 / Grafana Meetup Japan Vol.1 LT
isaoshimizu
1
740
Featured
See All Featured
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
2
3.4k
Designing Experiences People Love
moore
136
23k
What's new in Ruby 2.0
geeforr
337
31k
Unsuck your backbone
ammeep
663
57k
Art, The Web, and Tiny UX
lynnandtonic
289
19k
Designing on Purpose - Digital PM Summit 2013
jponch
110
6.5k
It's Worth the Effort
3n
180
27k
How to Ace a Technical Interview
jacobian
272
22k
Agile that works and the tools we love
rasmusluckow
325
20k
Intergalactic Javascript Robots from Outer Space
tanoku
266
26k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
14
1.6k
Stop Working from a Prison Cell
hatefulcrawdad
266
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="
[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