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 - ConFoo 2014
Search
Rachel Andrew
February 27, 2014
Technology
4
230
CSS3 Selectors - ConFoo 2014
My talk on CSS3 Selectors - with a bit of bonus info on the Level 4 Selectors Module.
Rachel Andrew
February 27, 2014
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
490
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
600
Other Decks in Technology
See All in Technology
現場の種を事業の芽にする - エンジニア主導のイノベーションを事業戦略に装着する方法 -
kzkmaeda
2
1.8k
5分で紹介する生成AIエージェントとAmazon Bedrock Agents / 5-minutes introduction to generative AI agents and Amazon Bedrock Agents
hideakiaoyagi
0
230
7日間でハッキングをはじめる本をはじめてみませんか?_ITエンジニア本大賞2025
nomizone
2
1.7k
Platform Engineeringは自由のめまい
nwiizo
4
2k
OpenID Connect for Identity Assurance の概要と翻訳版のご紹介 / 20250219-BizDay17-OIDC4IDA-Intro
oidfj
0
160
トラシューアニマルになろう ~開発者だからこそできる、安定したサービス作りの秘訣~
jacopen
2
1.8k
TAMとre:Capセキュリティ編 〜拡張脅威検出デモを添えて〜
fujiihda
1
180
偶然 × 行動で人生の可能性を広げよう / Serendipity × Action: Discover Your Possibilities
ar_tama
1
990
RSNA2024振り返り
nanachi
0
530
急成長する企業で作った、エンジニアが輝ける制度/ 20250214 Rinto Ikenoue
shift_evolve
2
1.1k
自動テストの世界に、この5年間で起きたこと
autifyhq
10
8.1k
スクラムのイテレーションを導入してチームの雰囲気がより良くなった話
eccyun
0
110
Featured
See All Featured
The Cult of Friendly URLs
andyhume
78
6.2k
GitHub's CSS Performance
jonrohan
1030
460k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
330
21k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
248
1.3M
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
99
18k
Mobile First: as difficult as doing things right
swwweet
223
9.3k
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
656
59k
Statistics for Hackers
jakevdp
797
220k
A Philosophy of Restraint
colly
203
16k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
12
960
Git: the NoSQL Database
bkeepers
PRO
427
64k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
29
2.2k
Transcript
Rachel Andrew: ConFoo 2014 CSS3 Selectors Thursday, 27 February 14
what do we mean by CSS3? Thursday, 27 February 14
CSS3 is Modular Thursday, 27 February 14
Some CSS3 modules are more complete than others Thursday, 27
February 14
• Working Draft • Candidate Recommendation • Proposed Recommendation •
W3C Recommendation W3C Maturity Levels Thursday, 27 February 14
Some browsers and some (parts of) modules. CSS3 is supported
by browsers Thursday, 27 February 14
• W3C Recommendation • http://www.w3.org/TR/css3-selectors/ Selectors module Thursday, 27 February
14
h1 {} p {} .thing {} #uniquething {} .thing p
Basic Selectors Thursday, 27 February 14
The problem with CSS2 selectors Thursday, 27 February 14
<h1>My heading</h1> <p class=”first”> ... </p> <p> ... </p> Adding
classes Thursday, 27 February 14
CSS3 Selectors “Common sense” new selectors target elements more precisely
without adding classes Thursday, 27 February 14
Select elements based on attributes Attribute Selectors Thursday, 27 February
14
form input[type="text"] { } form input[type="submit"] { } Attribute Selectors
Thursday, 27 February 14
Attribute Selectors Thursday, 27 February 14
label[for="fContact"] { float: none; width: auto; } Attribute Selectors Thursday,
27 February 14
a[href ^="mailto:"] { padding-right: 20px; background-image:url(email.png); background-repeat: no-repeat; background-position: right
center; } Attribute Selectors Thursday, 27 February 14
Selecting of elements depending on their position Structural pseudo- class
selectors Thursday, 27 February 14
a:link {} a:visited {} Pseudo-Class Selectors Thursday, 27 February 14
a:hover {} a:active {} Dynamic Pseudo- Class Thursday, 27 February
14
target an element when it is the first child of
a parent element :first-child Thursday, 27 February 14
<div class=”wrapper”> <p> ... </p> <p> ... </p> <p> ...
</p> </div> :first-child Thursday, 27 February 14
:first-child Thursday, 27 February 14
.wrapper p { font-size: 1.5em; } :first-child Thursday, 27 February
14
.wrapper p:first-child { font-size: 1.5em; } :first-child Thursday, 27 February
14
:first-child Thursday, 27 February 14
target an element when it is the last child of
a parent element :last-child Thursday, 27 February 14
:last-child Thursday, 27 February 14
.navigation li:last-child { border-bottom: none; } :last-child Thursday, 27 February
14
:last-child Thursday, 27 February 14
select multiple elements according to their position in the document
tree :nth-child Thursday, 27 February 14
:nth-child Thursday, 27 February 14
tr:nth-child(odd) td { background-color: #f0e9c5; } :nth-child Thursday, 27 February
14
:nth-child Thursday, 27 February 14
tr:nth-child(3) td { background-color: #f0e9c5; } :nth-child Thursday, 27 February
14
:nth-child Thursday, 27 February 14
http://css-tricks.com/how-nth-child-works/ tr:nth-child(2n+1) td { background-color: #f0e9c5; } :nth-child Thursday, 27
February 14
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. :nth-of-type Thursday, 27 February 14
p:nth-of-type(odd) { background-color: #f0e9c5; } :nth-of-type Thursday, 27 February 14
:nth-of-type Thursday, 27 February 14
matches an element if it is the only child element
of it’s parent. :only-child Thursday, 27 February 14
li { list-style-type: disc; } li:only-child { list-style-type: none; }
:only-child Thursday, 27 February 14
:only-child Thursday, 27 February 14
matches an element if it is empty :empty Thursday, 27
February 14
p { padding: 0 0 1em 0; margin: 0; }
p:empty { padding: 0; } :empty Thursday, 27 February 14
Structural pseudo-classes for use with forms. For input elements Thursday,
27 February 14
the checked state of a checkbox or radio button :checked
Thursday, 27 February 14
.agreeterms:checked { border:2px solid blue; } :checked Thursday, 27 February
14
detecting input element states enabled and disabled Thursday, 27 February
14
input:enabled { color: #000; } :enabled Thursday, 27 February 14
input:disabled { color: #999; } :disabled Thursday, 27 February 14
http://www.w3.org/TR/css3-ui/ (Working Draft) The CSS3 Basic User Interface Module Thursday,
27 February 14
:default :valid :invalid :in-range :out-of-range :required :optional :read-only :read-write CSS3
User Interface Module Thursday, 27 February 14
<input type="text" name="fName" id="fName" required="required" /> <input type="email" name="fEmail" id="fEmail"
required="required" placeholder="
[email protected]
" /> HTML5 attributes Thursday, 27 February 14
input:focus:required:invalid { background-image: url(error.png); background-position: 98% center; background-repeat: no-repeat; }
Adding an icon to required fields Thursday, 27 February 14
Adding an icon to required fields Thursday, 27 February 14
input:required:valid { background-image: url(accept.png); background-position: 98% center; background-repeat: no-repeat; }
Adding an icon to valid fields Thursday, 27 February 14
Adding an icon to valid fields Thursday, 27 February 14
input[type="email"]:focus:required:invalid { background-image: url(email_error.png); } Show a different icon for
the field type Thursday, 27 February 14
Show a different icon for the field type Thursday, 27
February 14
:not(selector) the Negation pseudo-class Thursday, 27 February 14
<p> ... </p> <p class=”box”> ... </p> <p> ... </p>
:not Thursday, 27 February 14
p:not(.box) { padding: 1em; border:2px solid #000; } :not Thursday,
27 February 14
:not Thursday, 27 February 14
matching virtual elements that don’t explicitly exist in the document
tree Pseudo-elements Thursday, 27 February 14
the first character of the first line of text :first-letter
Thursday, 27 February 14
.wrapper:first-letter { font-size: 200%; font-weight: bold; color: red; } :first-letter
Thursday, 27 February 14
:first-letter Thursday, 27 February 14
the first formatted line of text :first-line Thursday, 27 February
14
.wrapper:first-line { font-size: 200%; font-weight: bold; color: red; } :first-line
Thursday, 27 February 14
:first-line Thursday, 27 February 14
Render content before the element when using generated content :before
Thursday, 27 February 14
<div class=”content”> ... </div> :before Thursday, 27 February 14
.content:before { content: "Start here:"; } :before Thursday, 27 February
14
:before Thursday, 27 February 14
Render content after the element when using generated content :after
Thursday, 27 February 14
.content:after { content: "End here:"; } :after Thursday, 27 February
14
Generated content can be very useful... Thursday, 27 February 14
CSS Arrow Please Thursday, 27 February 14
Adding a bird Thursday, 27 February 14
.clearfix:after { visibility: hidden; display: block; font-size: 0; content: "
"; clear: both; height: 0; } .clearfix { display: inline-block; } /* start commented backslash hack \*/ * html .clearfix { height: 1%; } .clearfix { display: block; } /* close commented backslash hack */ Clear Fix Thursday, 27 February 14
Content selected in browser by the user ::selection Thursday, 27
February 14
.wrapper p::selection { background-color: red; } ::selection Thursday, 27 February
14
::selection Thursday, 27 February 14
Combining selectors to target elements Combinators Thursday, 27 February 14
Select all elements that are descendants of a specified parent
Descendant Selector Thursday, 27 February 14
.wrapper p { font-size: 1.5em; } Descendant Selector Thursday, 27
February 14
Select all elements that are immediate children of a specified
parent Child Selector Thursday, 27 February 14
<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 Thursday, 27 February 14
li { color: #000; } ul > li { color:
red; } Child Selector Thursday, 27 February 14
Child Selector Thursday, 27 February 14
Select elements that are the adjacent siblings of an element
Adjacent Sibling Thursday, 27 February 14
.wrapper h1 + p { font-size: 1.5em; } Adjacent Sibling
Thursday, 27 February 14
Adjacent Sibling Thursday, 27 February 14
Select elements that are the siblings of an element General
Sibling Thursday, 27 February 14
.wrapper h2~p { color: red; } General Sibling Thursday, 27
February 14
General Sibling Thursday, 27 February 14
Browser Support Thursday, 27 February 14
Browser Support Thursday, 27 February 14
or serve a simpler layout to older browsers Do Nothing.
Thursday, 27 February 14
Plug the holes in browser support using JavaScript. JavaScript Thursday,
27 February 14
div#wrapper p:first-child, div#wrapper p.first { font-size: 1.5em; } <script src="http://code.jquery.com/
jquery-latest.js"></script> <script> $(document).ready(function(){ $("div#wrapper p:first- child").addClass("first"); }); </script> jQuery: first-child Thursday, 27 February 14
tr:nth-child(odd) td, td.odd { background-color: #f0e9c5; } <script src="http://code.jquery.com/ jquery-latest.js"></script>
<script> $(document).ready(function(){ $("tr:nth-child(odd) td").addClass("odd"); }); </script> jQuery: nth-child Thursday, 27 February 14
plugging the holes in support CSS “PolyFills” Thursday, 27 February
14
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/ What is a polyfill? Thursday, 27 February 14
http://selectivizr.com/ selectivizr Thursday, 27 February 14
Check your stats. Thursday, 27 February 14
Selectors Level 4 a look to the near future with
“CSS4 Selectors” Thursday, 27 February 14
the Negation Pseudo-class :not gets an upgrade in Level 4
Thursday, 27 February 14
:not Level 4 enables the passing of multiple selectors to
:not p:not(.excerpt, .intro) { font-weight: normal; } Thursday, 27 February 14
The Matches pseudo-class Applying rules to groups of selectors. Thursday,
27 February 14
:matches p:matches(.alert,.error,.warn) { color: red; } Thursday, 27 February 14
The local-link Pseudo-class Allows an author to style links depending
on the visitor’s location in the site. For example to differentiate between local and external links. Thursday, 27 February 14
:local-link target links that are in the same document. a:local-link
{ color: blue; } Thursday, 27 February 14
:local-link(0) Links in the same domain - local links. a:local-link(0)
{ border-bottom: 1px dashed blue; } Thursday, 27 February 14
:local-link Page: http://example.com/blog/foo Link A: http://example.com/blog/foo/a-post Link B: http://example.com/blog/bar/a-post a:local-link(1)
{ color: red; } a:local-link(2) { color: green; } Thursday, 27 February 14
Time Dimensional Pseudo-classes Defines :current :past and :future - useful
to show progress through a document, for example when displaying subtitles. Thursday, 27 February 14
:current :past p:current { color: blue; } p:past { color:
#999; } Thursday, 27 February 14
Tree Structural Pseudo-classes Taking nth-child to the next level with
:nth-match and :nth-last-match Thursday, 27 February 14
:nth-match tr:nth-match(even of .active .new) { background-color: yellow; } Thursday,
27 February 14
Grid Structural Pseudo-classes :column, :nth-column, :nth-last-column Thursday, 27 February 14
Grid Structural Pseudo-Classes :nth-column(even) { background: blue; } Thursday, 27
February 14
The “Parent Selector” Identifying the subject of a selector with
a ! Thursday, 27 February 14
Identifying the subject of the selector <ul> <li><a href=”home”>Home</a></li> <li><a
class=”active”>About</a></ li> </ul> ul li a.active { color: blue; } ul li! a.active { border:1px solid blue; } Thursday, 27 February 14
CSS Level 4 selectors Browsers are beginning to implement these
selectors. See what your browser supports: http://css4-selectors.com/browser-selector-test/ Thursday, 27 February 14
http://www.rachelandrew.co.uk/presentations/css3-selectors @rachelandrew Thank You! Thursday, 27 February 14