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.3k
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
440
The New CSS Layout
rachelandrew
4
310
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
460
Other Decks in Technology
See All in Technology
複数の LLM モデルを扱う上で直面した辛みまとめ
kazuyaseki
1
230
依存ライブラリはどこに?
takesection
0
100
バッチ処理のSLOをどう設計するか
rynsuke
7
550
HoneycombとOpenTelemetryでオブザーバビリティに入門してみる
sumiren
2
150
サービスメッシュ環境における OpenTelemetry 活用 / OpenTelemetry in Service Mesh
k6s4i53rx
2
820
Introduction to Jetpack Compose
pohjus
1
110
関数型DDDの理論と実践:「決定を遅らせる」を先につくり、 ビジネスの機動力と価値をあげる
knih
2
470
TCA入門したてなので、自分が馴染みのある実装と比較しながらキャッチアップしてみる
fumiyasac0921
1
370
20240321_生成AI時代のDevOps
kzkmaeda
2
610
Cloud Friendly(?) Jenkins. How we failed to make Jenkins cloud native and what we learned?
onenashev
PRO
0
110
あらゆる商品を扱う商品データベースを再設計した話 / product db re-architecture
rince
8
3.5k
オーティファイ会社紹介資料 / Autify Company Deck
autifyhq
7
100k
Featured
See All Featured
Fashionably flexible responsive web design (full day workshop)
malarkey
397
65k
GitHub's CSS Performance
jonrohan
1023
450k
The Illustrated Children's Guide to Kubernetes
chrisshort
28
46k
Imperfection Machines: The Place of Print at Facebook
scottboms
257
12k
Debugging Ruby Performance
tmm1
68
11k
A Philosophy of Restraint
colly
195
15k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
57
14k
Designing for Performance
lara
601
67k
The Language of Interfaces
destraynor
150
23k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
113
18k
Designing Experiences People Love
moore
135
23k
The MySQL Ecosystem @ GitHub 2015
samlambert
242
12k
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