Submit Search
Upload
Mastering CSS3 Selectors
•
11 likes
•
2,000 views
Rachel Andrew
Follow
Presentation for Think Vitamin Online CSS3 Conference.
Read less
Read more
Technology
Report
Share
Report
Share
1 of 99
Download Now
Download to read offline
Recommended
Refactoring
Refactoring
Caike Souza
Managing technical communicators in an XML environment
Managing technical communicators in an XML environment
Scriptorium Publishing
Empa Edtec Talk April 2010
Empa Edtec Talk April 2010
andersand
开放式类库的构建
开放式类库的构建
lifesinger
让开发也懂前端
让开发也懂前端
lifesinger
CrossMark Sneak Peek 2010 CrossRef Workshops
CrossMark Sneak Peek 2010 CrossRef Workshops
Crossref
Continuous Integration Testing for Plone Using Hudson
Continuous Integration Testing for Plone Using Hudson
Eric Steele
Pl Parrot
Pl Parrot
Command Prompt., Inc
More Related Content
Viewers also liked
HTML5 Semantics
HTML5 Semantics
Shay Howe
Smacking Git Around Advanced Git Tricks
Smacking Git Around Advanced Git Tricks
railsconf
Quality Development with HTML5
Quality Development with HTML5
Shay Howe
Git in a nutshell
Git in a nutshell
Pranesh Vittal
The git
The git
Leonardo YongUk Kim
Quality Development with CSS3
Quality Development with CSS3
Shay Howe
CSS: selectors and the box model
CSS: selectors and the box model
Idan Gazit
Yes, Designer, You CAN Be a Product Leader
Yes, Designer, You CAN Be a Product Leader
Shay Howe
An Intro to HTML & CSS
An Intro to HTML & CSS
Shay Howe
CSS Selectors
CSS Selectors
Rachel Andrew
Git in a nutshell
Git in a nutshell
Nelson Tai
Intro To Git
Intro To Git
kyleburton
Git and GitHub
Git and GitHub
James Gray
Fundamental CSS3
Fundamental CSS3
Achmad Solichin
Advanced Git
Advanced Git
segv
Git Tutorial 教學
Git Tutorial 教學
Wen-Tien Chang
Getting Git Right
Getting Git Right
Sven Peters
Intro to CSS3
Intro to CSS3
Denise Jacobs
Introduction to Git/Github - A beginner's guide
Introduction to Git/Github - A beginner's guide
Rohit Arora
Getting Git
Getting Git
Scott Chacon
Viewers also liked
(20)
HTML5 Semantics
HTML5 Semantics
Smacking Git Around Advanced Git Tricks
Smacking Git Around Advanced Git Tricks
Quality Development with HTML5
Quality Development with HTML5
Git in a nutshell
Git in a nutshell
The git
The git
Quality Development with CSS3
Quality Development with CSS3
CSS: selectors and the box model
CSS: selectors and the box model
Yes, Designer, You CAN Be a Product Leader
Yes, Designer, You CAN Be a Product Leader
An Intro to HTML & CSS
An Intro to HTML & CSS
CSS Selectors
CSS Selectors
Git in a nutshell
Git in a nutshell
Intro To Git
Intro To Git
Git and GitHub
Git and GitHub
Fundamental CSS3
Fundamental CSS3
Advanced Git
Advanced Git
Git Tutorial 教學
Git Tutorial 教學
Getting Git Right
Getting Git Right
Intro to CSS3
Intro to CSS3
Introduction to Git/Github - A beginner's guide
Introduction to Git/Github - A beginner's guide
Getting Git
Getting Git
Similar to Mastering CSS3 Selectors
IE9 для разработчиков
IE9 для разработчиков
Yuriy Artyukh
Cutting Edge CSS3 @ WebExpo Tour 2010
Cutting Edge CSS3 @ WebExpo Tour 2010
Zi Bin Cheah
The Limited Red Society
The Limited Red Society
Naresh Jain
Hardcore Extending Rails 3 - From RailsConf '10
Hardcore Extending Rails 3 - From RailsConf '10
Rick Martínez
Poisoning Rubinius: The _why and How
Poisoning Rubinius: The _why and How
Brian Ford
使用 PandaForm.com 製作及管理網上表格
使用 PandaForm.com 製作及管理網上表格
Daniel Cheng
Object garphs swapping
Object garphs swapping
Mariano Martínez Peck
Snowflake in music
Snowflake in music
Erik Duval
Similar to Mastering CSS3 Selectors
(8)
IE9 для разработчиков
IE9 для разработчиков
Cutting Edge CSS3 @ WebExpo Tour 2010
Cutting Edge CSS3 @ WebExpo Tour 2010
The Limited Red Society
The Limited Red Society
Hardcore Extending Rails 3 - From RailsConf '10
Hardcore Extending Rails 3 - From RailsConf '10
Poisoning Rubinius: The _why and How
Poisoning Rubinius: The _why and How
使用 PandaForm.com 製作及管理網上表格
使用 PandaForm.com 製作及管理網上表格
Object garphs swapping
Object garphs swapping
Snowflake in music
Snowflake in music
More from Rachel Andrew
All Day Hey! Unlocking The Power of CSS Grid Layout
All Day Hey! Unlocking The Power of CSS Grid Layout
Rachel Andrew
SmashingConf SF: Unlocking the Power of CSS Grid Layout
SmashingConf SF: Unlocking the Power of CSS Grid Layout
Rachel Andrew
Unlocking the Power of CSS Grid Layout
Unlocking the Power of CSS Grid Layout
Rachel Andrew
The Creative New World of CSS
The Creative New World of CSS
Rachel Andrew
Into the Weeds of CSS Layout
Into the Weeds of CSS Layout
Rachel Andrew
Solving Layout Problems with CSS Grid & Friends - DevFest17
Solving Layout Problems with CSS Grid & Friends - DevFest17
Rachel Andrew
Graduating to Grid
Graduating to Grid
Rachel Andrew
View Source London: Solving Layout Problems with CSS Grid & Friends
View Source London: Solving Layout Problems with CSS Grid & Friends
Rachel Andrew
DevFest Nantes - Start Using CSS Grid Layout today
DevFest Nantes - Start Using CSS Grid Layout today
Rachel Andrew
Start Using CSS Grid Layout Today - RuhrJS
Start Using CSS Grid Layout Today - RuhrJS
Rachel Andrew
404.ie: Solving Layout Problems with CSS Grid & Friends
404.ie: Solving Layout Problems with CSS Grid & Friends
Rachel Andrew
Solving Layout Problems with CSS Grid & Friends - WEBU17
Solving Layout Problems with CSS Grid & Friends - WEBU17
Rachel Andrew
Laying out the future with grid & flexbox - Smashing Conf Freiburg
Laying out the future with grid & flexbox - Smashing Conf Freiburg
Rachel Andrew
Solving Layout Problems with CSS Grid & Friends - NordicJS
Solving Layout Problems with CSS Grid & Friends - NordicJS
Rachel Andrew
Google Developers Experts Summit 2017 - CSS Layout
Google Developers Experts Summit 2017 - CSS Layout
Rachel Andrew
Web Summer Camp Keynote
Web Summer Camp Keynote
Rachel Andrew
New CSS Layout Meets the Real World
New CSS Layout Meets the Real World
Rachel Andrew
An Event Apart DC - New CSS Layout meets the Real World
An Event Apart DC - New CSS Layout meets the Real World
Rachel Andrew
Perch, Patterns and Old Browsers
Perch, Patterns and Old Browsers
Rachel Andrew
Evergreen websites for Evergreen browsers
Evergreen websites for Evergreen browsers
Rachel Andrew
More from Rachel Andrew
(20)
All Day Hey! Unlocking The Power of CSS Grid Layout
All Day Hey! Unlocking The Power of CSS Grid Layout
SmashingConf SF: Unlocking the Power of CSS Grid Layout
SmashingConf SF: Unlocking the Power of CSS Grid Layout
Unlocking the Power of CSS Grid Layout
Unlocking the Power of CSS Grid Layout
The Creative New World of CSS
The Creative New World of CSS
Into the Weeds of CSS Layout
Into the Weeds of CSS Layout
Solving Layout Problems with CSS Grid & Friends - DevFest17
Solving Layout Problems with CSS Grid & Friends - DevFest17
Graduating to Grid
Graduating to Grid
View Source London: Solving Layout Problems with CSS Grid & Friends
View Source London: Solving Layout Problems with CSS Grid & Friends
DevFest Nantes - Start Using CSS Grid Layout today
DevFest Nantes - Start Using CSS Grid Layout today
Start Using CSS Grid Layout Today - RuhrJS
Start Using CSS Grid Layout Today - RuhrJS
404.ie: Solving Layout Problems with CSS Grid & Friends
404.ie: Solving Layout Problems with CSS Grid & Friends
Solving Layout Problems with CSS Grid & Friends - WEBU17
Solving Layout Problems with CSS Grid & Friends - WEBU17
Laying out the future with grid & flexbox - Smashing Conf Freiburg
Laying out the future with grid & flexbox - Smashing Conf Freiburg
Solving Layout Problems with CSS Grid & Friends - NordicJS
Solving Layout Problems with CSS Grid & Friends - NordicJS
Google Developers Experts Summit 2017 - CSS Layout
Google Developers Experts Summit 2017 - CSS Layout
Web Summer Camp Keynote
Web Summer Camp Keynote
New CSS Layout Meets the Real World
New CSS Layout Meets the Real World
An Event Apart DC - New CSS Layout meets the Real World
An Event Apart DC - New CSS Layout meets the Real World
Perch, Patterns and Old Browsers
Perch, Patterns and Old Browsers
Evergreen websites for Evergreen browsers
Evergreen websites for Evergreen browsers
Recently uploaded
Salesforce Miami User Group Event - 1st Quarter 2024
Salesforce Miami User Group Event - 1st Quarter 2024
SkyPlanner
Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...
Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...
DianaGray10
Computer 10: Lesson 10 - Online Crimes and Hazards
Computer 10: Lesson 10 - Online Crimes and Hazards
Seth Reyes
Machine Learning Model Validation (Aijun Zhang 2024).pdf
Machine Learning Model Validation (Aijun Zhang 2024).pdf
Aijun Zhang
UiPath Community: AI for UiPath Automation Developers
UiPath Community: AI for UiPath Automation Developers
UiPathCommunity
Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...
Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...
Will Schroeder
20150722 - AGV
20150722 - AGV
Jamie (Taka) Wang
Introduction to Matsuo Laboratory (ENG).pptx
Introduction to Matsuo Laboratory (ENG).pptx
Matsuo Lab
Bird eye's view on Camunda open source ecosystem
Bird eye's view on Camunda open source ecosystem
Asko Soukka
Artificial Intelligence & SEO Trends for 2024
Artificial Intelligence & SEO Trends for 2024
D Cloud Solutions
20230104 - machine vision
20230104 - machine vision
Jamie (Taka) Wang
UiPath Platform: The Backend Engine Powering Your Automation - Session 1
UiPath Platform: The Backend Engine Powering Your Automation - Session 1
DianaGray10
Secure your environment with UiPath and CyberArk technologies - Session 1
Secure your environment with UiPath and CyberArk technologies - Session 1
DianaGray10
Crea il tuo assistente AI con lo Stregatto (open source python framework)
Crea il tuo assistente AI con lo Stregatto (open source python framework)
Commit University
KubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCost
KubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCost
Matt Ray
How Accurate are Carbon Emissions Projections?
How Accurate are Carbon Emissions Projections?
IES VE
UiPath Studio Web workshop series - Day 8
UiPath Studio Web workshop series - Day 8
DianaGray10
UiPath Studio Web workshop series - Day 6
UiPath Studio Web workshop series - Day 6
DianaGray10
Anypoint Code Builder , Google Pub sub connector and MuleSoft RPA
Anypoint Code Builder , Google Pub sub connector and MuleSoft RPA
shyamraj55
Comparing Sidecar-less Service Mesh from Cilium and Istio
Comparing Sidecar-less Service Mesh from Cilium and Istio
Christian Posta
Recently uploaded
(20)
Salesforce Miami User Group Event - 1st Quarter 2024
Salesforce Miami User Group Event - 1st Quarter 2024
Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...
Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...
Computer 10: Lesson 10 - Online Crimes and Hazards
Computer 10: Lesson 10 - Online Crimes and Hazards
Machine Learning Model Validation (Aijun Zhang 2024).pdf
Machine Learning Model Validation (Aijun Zhang 2024).pdf
UiPath Community: AI for UiPath Automation Developers
UiPath Community: AI for UiPath Automation Developers
Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...
Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...
20150722 - AGV
20150722 - AGV
Introduction to Matsuo Laboratory (ENG).pptx
Introduction to Matsuo Laboratory (ENG).pptx
Bird eye's view on Camunda open source ecosystem
Bird eye's view on Camunda open source ecosystem
Artificial Intelligence & SEO Trends for 2024
Artificial Intelligence & SEO Trends for 2024
20230104 - machine vision
20230104 - machine vision
UiPath Platform: The Backend Engine Powering Your Automation - Session 1
UiPath Platform: The Backend Engine Powering Your Automation - Session 1
Secure your environment with UiPath and CyberArk technologies - Session 1
Secure your environment with UiPath and CyberArk technologies - Session 1
Crea il tuo assistente AI con lo Stregatto (open source python framework)
Crea il tuo assistente AI con lo Stregatto (open source python framework)
KubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCost
KubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCost
How Accurate are Carbon Emissions Projections?
How Accurate are Carbon Emissions Projections?
UiPath Studio Web workshop series - Day 8
UiPath Studio Web workshop series - Day 8
UiPath Studio Web workshop series - Day 6
UiPath Studio Web workshop series - Day 6
Anypoint Code Builder , Google Pub sub connector and MuleSoft RPA
Anypoint Code Builder , Google Pub sub connector and MuleSoft RPA
Comparing Sidecar-less Service Mesh from Cilium and Istio
Comparing Sidecar-less Service Mesh from Cilium and Istio
Mastering CSS3 Selectors
1.
hello. Friday, 15 October
2010
2.
Rachel Andrew
@rachelandrew rachelandrew.co.uk edgeofmyseat.com grabaperch.com Friday, 15 October 2010
3.
Mastering
CSS3 Selectors Friday, 15 October 2010
4.
CSS3 is the
next version of CSS Friday, 15 October 2010
5.
CSS3 is Modular Friday,
15 October 2010
6.
Some CSS3 modules
are more complete than others Friday, 15 October 2010
7.
W3C Maturity Levels
Working Draft Candidate Recommendation Proposed Recommendation W3C Recommendation http://www.w3.org/2005/10/Process-20051014/tr#maturity-levels Friday, 15 October 2010
8.
CSS3 is supported
by browsers Some browsers and some (parts of) modules. Friday, 15 October 2010
9.
Using CSS3 Friday, 15
October 2010
10.
Selectors module
W3C Proposed Recommendation http://www.w3.org/TR/css3-selectors/ Friday, 15 October 2010
11.
Basic Selectors
h1 {} p {} .thing {} #uniquething {} .thing p Friday, 15 October 2010
12.
The problem with
CSS2 selectors Friday, 15 October 2010
13.
Adding classes
<h1>My heading</h1> <p class=”first”> ... </p> <p> ... </p> Friday, 15 October 2010
14.
CSS3 Selectors
“Common sense” new selectors target elements more precisely without adding classes Friday, 15 October 2010
15.
Structural pseudo-
class selectors Friday, 15 October 2010
16.
a:link {}
a:visited {} a:hover {} a:active {} Friday, 15 October 2010
17.
:first-child
target an element when it is the first child of a parent element Friday, 15 October 2010
18.
:first-child Friday, 15 October
2010
19.
:first-child
div#wrapper p { ! ! font-size: 1.5em; } Friday, 15 October 2010
20.
:first-child
div#wrapper p:first-child { ! ! font-size: 1.5em; } Friday, 15 October 2010
21.
:first-child Friday, 15 October
2010
22.
:last-child
target an element when it is the last child of a parent element Friday, 15 October 2010
23.
:last-child Friday, 15 October
2010
24.
:last-child
ul#navigation li:last-child { ! ! border-bottom: none; } Friday, 15 October 2010
25.
:last-child Friday, 15 October
2010
26.
:nth-child
select multiple elements according to their position in the document tree Friday, 15 October 2010
27.
:nth-child Friday, 15 October
2010
28.
:nth-child
tr:nth-child(odd) td { ! ! background-color: #f0e9c5; } Friday, 15 October 2010
29.
:nth-child Friday, 15 October
2010
30.
:nth-child
tr:nth-child(3) td { ! ! background-color: #f0e9c5; } Friday, 15 October 2010
31.
:nth-child Friday, 15 October
2010
32.
:nth-child
tr:nth-child(2n+1) td { ! ! background-color: #f0e9c5; } http://reference.sitepoint.com/css/understandingnthchildexpressions Friday, 15 October 2010
33.
: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. Friday, 15 October 2010
34.
:nth-of-type
p:nth-of-type(odd) { ! ! background-color: #f0e9c5; } Friday, 15 October 2010
35.
:nth-of-type Friday, 15 October
2010
36.
:only-child
matches an element if it is the only child element of it’s parent. Friday, 15 October 2010
37.
:only-child
li { ! list-style-type: disc; } ! li:only-child { ! list-style-type: none; } Friday, 15 October 2010
38.
:only-child Friday, 15 October
2010
39.
:empty
matches an element if it is empty Friday, 15 October 2010
40.
:empty
p { ! padding: 0 0 1em 0; ! margin: 0; } ! p:empty { ! padding: 0; } Friday, 15 October 2010
41.
For input elements
Structural pseudo-classes for use with forms. Friday, 15 October 2010
42.
:checked
the checked state of a checkbox or radio button Friday, 15 October 2010
43.
:checked
#agreeterms:checked { border:2px solid blue; } Friday, 15 October 2010
44.
enabled and disabled
detecting input element states Friday, 15 October 2010
45.
:enabled
input:enabled { color: #000; } Friday, 15 October 2010
46.
:disabled
input:disabled { color: #999; } Friday, 15 October 2010
47.
the Negation
pseudo-class :not(selector) Friday, 15 October 2010
48.
:not
<p> ... </p> <p class=”box”> ... </p> <p> ... </p> Friday, 15 October 2010
49.
:not
p:not(.box) { ! padding: 0 0 3em 0; ! margin: 0; } ! p.box { ! border:1px solid #000; ! margin: 0 0 2em 0; } Friday, 15 October 2010
50.
:not Friday, 15 October
2010
51.
Pseudo-elements Friday, 15 October
2010
52.
:first-letter
the first character of the first line of text Friday, 15 October 2010
53.
:first-letter
div#wrapper:first-letter { ! font-size: 200%; ! font-weight: bold; ! color: red; } Friday, 15 October 2010
54.
:first-letter Friday, 15 October
2010
55.
:first-line
the first formatted line of text Friday, 15 October 2010
56.
:first-line
div#wrapper:first-line { ! font-size: 200%; ! font-weight: bold; ! color: red; } Friday, 15 October 2010
57.
:first-line Friday, 15 October
2010
58.
:before
Render content before the element when using generated content Friday, 15 October 2010
59.
:before
<div id=”content”> ... </div> Friday, 15 October 2010
60.
:before
#content:before { content: "Start here:"; } Friday, 15 October 2010
61.
:before Friday, 15 October
2010
62.
:after
Render content after the element when using generated content Friday, 15 October 2010
63.
:after
#content:after { content: "End here:"; } Friday, 15 October 2010
64.
::selection
Content selected in browser by the user Friday, 15 October 2010
65.
::selection
div#wrapper p::selection {! background-color: red; } Friday, 15 October 2010
66.
::selection Friday, 15 October
2010
67.
Combinators
Combining selectors to target elements Friday, 15 October 2010
68.
Descendant Selector
Select all elements that are descendants of a specified parent Friday, 15 October 2010
69.
Descendant Selector
div#wrapper p { ! font-size: 1.5em; } Friday, 15 October 2010
70.
Child Selector
Select all elements that are immediate children of a specified parent Friday, 15 October 2010
71.
Child Selector
<ul> <li>Item 1 <ol> <li>Sub list item 1</li> <li>Sub list item 2</li> </ol> </li> <li>Item 2</li> </ul> Friday, 15 October 2010
72.
Child Selector
li { ! color: #000; } ! ul > li { ! color: red; } Friday, 15 October 2010
73.
Child Selector Friday, 15
October 2010
74.
Adjacent Sibling
Select elements that are the adjacent siblings of an element Friday, 15 October 2010
75.
Adjacent Sibling
div#wrapper h1 + p { ! font-size: 1.5em; } Friday, 15 October 2010
76.
Adjacent Sibling Friday, 15
October 2010
77.
General Sibling
Select elements that are the siblings of an element Friday, 15 October 2010
78.
General Sibling
div#wrapper h2~p { ! color: red; } Friday, 15 October 2010
79.
General Sibling Friday, 15
October 2010
80.
Attribute Selectors
Select elements based on attributes Friday, 15 October 2010
81.
Attribute Selectors
form input[type="text"] { } ! form input[type="submit"] { } Friday, 15 October 2010
82.
Attribute Selectors Friday, 15
October 2010
83.
Attribute Selectors
label[for="fContact"] { ! float: none; ! width: auto; } a[href ^="mailto:"] { ! ! padding-right: 20px; ! ! background-image:url(email.png); ! ! background-repeat: no-repeat; ! ! background-position: right center; } Friday, 15 October 2010
84.
Browser
Support Friday, 15 October 2010
85.
Browser Support Friday, 15
October 2010
86.
Does it
matter? Friday, 15 October 2010
87.
Friday, 15 October
2010
88.
Friday, 15 October
2010
89.
Yes, it
matters. Friday, 15 October 2010
90.
Vendor-specific
extensions Implementing early stage CSS3 Friday, 15 October 2010
91.
border-radius Friday, 15 October
2010
92.
border-radius
.box { -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px; } Friday, 15 October 2010
93.
In defence of
vendor- specific extensions Friday, 15 October 2010
94.
JavaScript
Plug the holes in browser support using JavaScript. Friday, 15 October 2010
95.
jQuery: first-child
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> Friday, 15 October 2010
96.
jQuery: last-child
ul#navigation li:last-child, ul#navigation li.last { ! ! border-bottom: none; } <script src="http://code.jquery.com/jquery-latest.js"></ script> <script> $(document).ready(function(){ ! $("ul#navigation li:last-child").addClass("last"); }); </script> Friday, 15 October 2010
97.
jQuery: nth-child
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> Friday, 15 October 2010
98.
Scripts that “fix
IE” http://www.keithclark.co.uk/labs/ie-css3/ http://ecsstender.org Friday, 15 October 2010
99.
Thank you. Friday, 15
October 2010
Download Now