Submit Search
Upload
CSS Pseudo Classes
•
1 like
•
1,209 views
frontendne
Follow
Elizabeth Gardiner take Frontend NE through CSS pseudo selectors and pseudo classes
Read less
Read more
Technology
Report
Share
Report
Share
1 of 36
Download now
Download to read offline
Recommended
Css pseudo-classes
Css pseudo-classes
Webtech Learning
CSS Day: CSS Grid Layout
CSS Day: CSS Grid Layout
Rachel Andrew
Sightly - Part 2
Sightly - Part 2
Prabhdeep Singh
SASS - CSS with Superpower
SASS - CSS with Superpower
Kanchha kaji Prajapati
Css class-02
Css class-02
Md Ali Hossain
CSS Lists and Tables
CSS Lists and Tables
Gerson Abesamis
Intro to Flexbox - A Magical CSS Property
Intro to Flexbox - A Magical CSS Property
Adam Soucie
Introducing CSS Grid Layout
Introducing CSS Grid Layout
Rachel Andrew
Recommended
Css pseudo-classes
Css pseudo-classes
Webtech Learning
CSS Day: CSS Grid Layout
CSS Day: CSS Grid Layout
Rachel Andrew
Sightly - Part 2
Sightly - Part 2
Prabhdeep Singh
SASS - CSS with Superpower
SASS - CSS with Superpower
Kanchha kaji Prajapati
Css class-02
Css class-02
Md Ali Hossain
CSS Lists and Tables
CSS Lists and Tables
Gerson Abesamis
Intro to Flexbox - A Magical CSS Property
Intro to Flexbox - A Magical CSS Property
Adam Soucie
Introducing CSS Grid Layout
Introducing CSS Grid Layout
Rachel Andrew
CSS Selectors
CSS Selectors
Rachel Andrew
Css Basics
Css Basics
Jay Patel
Media queries A to Z
Media queries A to Z
Shameem Reza
CSS Best practice
CSS Best practice
Russ Weakley
BEM - CSS, Seriously
BEM - CSS, Seriously
Roland Lösslein
JavaScript Basics
JavaScript Basics
Mats Bryntse
Bootstrap PPT by Mukesh
Bootstrap PPT by Mukesh
Mukesh Kumar
Introducing CSS Grid
Introducing CSS Grid
Jason Yingling
How Cascading Style Sheets (CSS) Works
How Cascading Style Sheets (CSS) Works
Amit Tyagi
CSS Positioning and Features of CSS3
CSS Positioning and Features of CSS3
Jaimin Brahmbhatt
Introduction to CSS Borders - Lesson 4
Introduction to CSS Borders - Lesson 4
Naresh Sharma
Bootstrap Framework
Bootstrap Framework
Yaowaluck Promdee
CSS Flexbox (flexible box layout)
CSS Flexbox (flexible box layout)
Woodridge Software
AEM hacker - approaching Adobe Experience Manager webapps in bug bounty programs
AEM hacker - approaching Adobe Experience Manager webapps in bug bounty programs
Mikhail Egorov
CSS Layouting #2 : Dimensi & Overflow
CSS Layouting #2 : Dimensi & Overflow
Sandhika Galih
CSS Dasar #4 : Font Styling
CSS Dasar #4 : Font Styling
Sandhika Galih
Css
Css
Hemant Saini
9- Learn CSS Fundamentals / Pseudo-classes
9- Learn CSS Fundamentals / Pseudo-classes
In a Rocket
Lab#9 graphic and color
Lab#9 graphic and color
Yaowaluck Promdee
Bootstrap 3
Bootstrap 3
McSoftsis
Pseudo CSS Selectors
Pseudo CSS Selectors
Михаил Петров
Css selectors
Css selectors
Михаил Петров
More Related Content
What's hot
CSS Selectors
CSS Selectors
Rachel Andrew
Css Basics
Css Basics
Jay Patel
Media queries A to Z
Media queries A to Z
Shameem Reza
CSS Best practice
CSS Best practice
Russ Weakley
BEM - CSS, Seriously
BEM - CSS, Seriously
Roland Lösslein
JavaScript Basics
JavaScript Basics
Mats Bryntse
Bootstrap PPT by Mukesh
Bootstrap PPT by Mukesh
Mukesh Kumar
Introducing CSS Grid
Introducing CSS Grid
Jason Yingling
How Cascading Style Sheets (CSS) Works
How Cascading Style Sheets (CSS) Works
Amit Tyagi
CSS Positioning and Features of CSS3
CSS Positioning and Features of CSS3
Jaimin Brahmbhatt
Introduction to CSS Borders - Lesson 4
Introduction to CSS Borders - Lesson 4
Naresh Sharma
Bootstrap Framework
Bootstrap Framework
Yaowaluck Promdee
CSS Flexbox (flexible box layout)
CSS Flexbox (flexible box layout)
Woodridge Software
AEM hacker - approaching Adobe Experience Manager webapps in bug bounty programs
AEM hacker - approaching Adobe Experience Manager webapps in bug bounty programs
Mikhail Egorov
CSS Layouting #2 : Dimensi & Overflow
CSS Layouting #2 : Dimensi & Overflow
Sandhika Galih
CSS Dasar #4 : Font Styling
CSS Dasar #4 : Font Styling
Sandhika Galih
Css
Css
Hemant Saini
9- Learn CSS Fundamentals / Pseudo-classes
9- Learn CSS Fundamentals / Pseudo-classes
In a Rocket
Lab#9 graphic and color
Lab#9 graphic and color
Yaowaluck Promdee
Bootstrap 3
Bootstrap 3
McSoftsis
What's hot
(20)
CSS Selectors
CSS Selectors
Css Basics
Css Basics
Media queries A to Z
Media queries A to Z
CSS Best practice
CSS Best practice
BEM - CSS, Seriously
BEM - CSS, Seriously
JavaScript Basics
JavaScript Basics
Bootstrap PPT by Mukesh
Bootstrap PPT by Mukesh
Introducing CSS Grid
Introducing CSS Grid
How Cascading Style Sheets (CSS) Works
How Cascading Style Sheets (CSS) Works
CSS Positioning and Features of CSS3
CSS Positioning and Features of CSS3
Introduction to CSS Borders - Lesson 4
Introduction to CSS Borders - Lesson 4
Bootstrap Framework
Bootstrap Framework
CSS Flexbox (flexible box layout)
CSS Flexbox (flexible box layout)
AEM hacker - approaching Adobe Experience Manager webapps in bug bounty programs
AEM hacker - approaching Adobe Experience Manager webapps in bug bounty programs
CSS Layouting #2 : Dimensi & Overflow
CSS Layouting #2 : Dimensi & Overflow
CSS Dasar #4 : Font Styling
CSS Dasar #4 : Font Styling
Css
Css
9- Learn CSS Fundamentals / Pseudo-classes
9- Learn CSS Fundamentals / Pseudo-classes
Lab#9 graphic and color
Lab#9 graphic and color
Bootstrap 3
Bootstrap 3
Viewers also liked
Pseudo CSS Selectors
Pseudo CSS Selectors
Михаил Петров
Css selectors
Css selectors
Михаил Петров
JDBC
JDBC
Balwinder Kumar
Casc Style Sheets Ii
Casc Style Sheets Ii
Digital Insights - Digital Marketing Agency
Week 12 CSS - Review from last week
Week 12 CSS - Review from last week
Katherine McCurdy-Lapierre, R.G.D.
JDBC – Java Database Connectivity
JDBC – Java Database Connectivity
Information Technology
JDBC Java Database Connectivity
JDBC Java Database Connectivity
Ranjan Kumar
Introduction to CSS
Introduction to CSS
Amit Tyagi
Agile Development | Agile Process Models
Agile Development | Agile Process Models
Ahsan Rahim
Jdbc Ppt
Jdbc Ppt
Centre for Budget and Governance Accountability (CBGA)
Viewers also liked
(10)
Pseudo CSS Selectors
Pseudo CSS Selectors
Css selectors
Css selectors
JDBC
JDBC
Casc Style Sheets Ii
Casc Style Sheets Ii
Week 12 CSS - Review from last week
Week 12 CSS - Review from last week
JDBC – Java Database Connectivity
JDBC – Java Database Connectivity
JDBC Java Database Connectivity
JDBC Java Database Connectivity
Introduction to CSS
Introduction to CSS
Agile Development | Agile Process Models
Agile Development | Agile Process Models
Jdbc Ppt
Jdbc Ppt
More from frontendne
Reacting pragmatically
Reacting pragmatically
frontendne
Improving your workflow with gulp
Improving your workflow with gulp
frontendne
An introduction in to the world of front end automation - frontend ne (02 07-15)
An introduction in to the world of front end automation - frontend ne (02 07-15)
frontendne
CSS Selectors
CSS Selectors
frontendne
Marionette: the Backbone framework
Marionette: the Backbone framework
frontendne
Marionette: Building your first app
Marionette: Building your first app
frontendne
Css to-scss
Css to-scss
frontendne
Speedy, solid, semantic layout with Susy
Speedy, solid, semantic layout with Susy
frontendne
More from frontendne
(8)
Reacting pragmatically
Reacting pragmatically
Improving your workflow with gulp
Improving your workflow with gulp
An introduction in to the world of front end automation - frontend ne (02 07-15)
An introduction in to the world of front end automation - frontend ne (02 07-15)
CSS Selectors
CSS Selectors
Marionette: the Backbone framework
Marionette: the Backbone framework
Marionette: Building your first app
Marionette: Building your first app
Css to-scss
Css to-scss
Speedy, solid, semantic layout with Susy
Speedy, solid, semantic layout with Susy
Recently uploaded
Strategies for Landing an Oracle DBA Job as a Fresher
Strategies for Landing an Oracle DBA Job as a Fresher
Remote DBA Services
Corporate and higher education May webinar.pptx
Corporate and higher education May webinar.pptx
Rustici Software
Apidays New York 2024 - Accelerating FinTech Innovation by Vasa Krishnan, Fin...
Apidays New York 2024 - Accelerating FinTech Innovation by Vasa Krishnan, Fin...
apidays
+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...
+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...
?#DUbAI#??##{{(☎️+971_581248768%)**%*]'#abortion pills for sale in dubai@
"I see eyes in my soup": How Delivery Hero implemented the safety system for ...
"I see eyes in my soup": How Delivery Hero implemented the safety system for ...
Zilliz
Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...
Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...
Miguel Araújo
Powerful Google developer tools for immediate impact! (2023-24 C)
Powerful Google developer tools for immediate impact! (2023-24 C)
wesley chun
Repurposing LNG terminals for Hydrogen Ammonia: Feasibility and Cost Saving
Repurposing LNG terminals for Hydrogen Ammonia: Feasibility and Cost Saving
Edi Saputra
Connector Corner: Accelerate revenue generation using UiPath API-centric busi...
Connector Corner: Accelerate revenue generation using UiPath API-centric busi...
DianaGray10
Exploring the Future Potential of AI-Enabled Smartphone Processors
Exploring the Future Potential of AI-Enabled Smartphone Processors
debabhi2
EMPOWERMENT TECHNOLOGY GRADE 11 QUARTER 2 REVIEWER
EMPOWERMENT TECHNOLOGY GRADE 11 QUARTER 2 REVIEWER
MadyBayot
DBX First Quarter 2024 Investor Presentation
DBX First Quarter 2024 Investor Presentation
Dropbox
How to Troubleshoot Apps for the Modern Connected Worker
How to Troubleshoot Apps for the Modern Connected Worker
ThousandEyes
ICT role in 21st century education and its challenges
ICT role in 21st century education and its challenges
rafiqahmad00786416
Apidays New York 2024 - Scaling API-first by Ian Reasor and Radu Cotescu, Adobe
Apidays New York 2024 - Scaling API-first by Ian Reasor and Radu Cotescu, Adobe
apidays
Manulife - Insurer Transformation Award 2024
Manulife - Insurer Transformation Award 2024
The Digital Insurer
Boost Fertility New Invention Ups Success Rates.pdf
Boost Fertility New Invention Ups Success Rates.pdf
sudhanshuwaghmare1
Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...
Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...
apidays
AXA XL - Insurer Innovation Award Americas 2024
AXA XL - Insurer Innovation Award Americas 2024
The Digital Insurer
Apidays New York 2024 - The Good, the Bad and the Governed by David O'Neill, ...
Apidays New York 2024 - The Good, the Bad and the Governed by David O'Neill, ...
apidays
Recently uploaded
(20)
Strategies for Landing an Oracle DBA Job as a Fresher
Strategies for Landing an Oracle DBA Job as a Fresher
Corporate and higher education May webinar.pptx
Corporate and higher education May webinar.pptx
Apidays New York 2024 - Accelerating FinTech Innovation by Vasa Krishnan, Fin...
Apidays New York 2024 - Accelerating FinTech Innovation by Vasa Krishnan, Fin...
+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...
+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...
"I see eyes in my soup": How Delivery Hero implemented the safety system for ...
"I see eyes in my soup": How Delivery Hero implemented the safety system for ...
Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...
Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...
Powerful Google developer tools for immediate impact! (2023-24 C)
Powerful Google developer tools for immediate impact! (2023-24 C)
Repurposing LNG terminals for Hydrogen Ammonia: Feasibility and Cost Saving
Repurposing LNG terminals for Hydrogen Ammonia: Feasibility and Cost Saving
Connector Corner: Accelerate revenue generation using UiPath API-centric busi...
Connector Corner: Accelerate revenue generation using UiPath API-centric busi...
Exploring the Future Potential of AI-Enabled Smartphone Processors
Exploring the Future Potential of AI-Enabled Smartphone Processors
EMPOWERMENT TECHNOLOGY GRADE 11 QUARTER 2 REVIEWER
EMPOWERMENT TECHNOLOGY GRADE 11 QUARTER 2 REVIEWER
DBX First Quarter 2024 Investor Presentation
DBX First Quarter 2024 Investor Presentation
How to Troubleshoot Apps for the Modern Connected Worker
How to Troubleshoot Apps for the Modern Connected Worker
ICT role in 21st century education and its challenges
ICT role in 21st century education and its challenges
Apidays New York 2024 - Scaling API-first by Ian Reasor and Radu Cotescu, Adobe
Apidays New York 2024 - Scaling API-first by Ian Reasor and Radu Cotescu, Adobe
Manulife - Insurer Transformation Award 2024
Manulife - Insurer Transformation Award 2024
Boost Fertility New Invention Ups Success Rates.pdf
Boost Fertility New Invention Ups Success Rates.pdf
Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...
Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...
AXA XL - Insurer Innovation Award Americas 2024
AXA XL - Insurer Innovation Award Americas 2024
Apidays New York 2024 - The Good, the Bad and the Governed by David O'Neill, ...
Apidays New York 2024 - The Good, the Bad and the Governed by David O'Neill, ...
CSS Pseudo Classes
1.
Pseudo-classes Elizabeth Gardiner {@libwella}
2.
http://www.w3schools.com/css/css_pseudo_classes.asp “A pseudo-class is
used to define a special state of an element.”
3.
http://www.thefreedictionary.com/Psuedo pseu•do (ˈsu doʊ)
adj., n., pl. -dos. adj. 1. false or spurious; sham; pretended. n. 2. a false or pretentious person.
4.
5.
Dynamic Pseudo-classes
6.
:hover
7.
:link :visited :hover :active
8.
https://flic.kr/p/3ruY7o
9.
:link o :visited e :hover :active t e
10.
:link :visited :hover :active
11.
:link :visited :hover :active :focus
12.
:link :visited :hover :active :focus
13.
14.
:link :visited :hover :active :focus
15.
:link :visited :hover :active :focus } :any-link (proposed CSS4)
16.
:link :visited :hover :active :focus :local-link } :any-link (proposed CSS4) (proposed
CSS4)
17.
Structural Pseudo-classes
18.
THE DOM!
19.
https://flic.kr/p/9GVpoG
20.
<ul> <li> <li> <li> <li> <li> <li> https://flic.kr/p/9GVpoG
21.
HTML BODY UL li li li
li li li
22.
:nth-child
23.
:nth-child(n)
24.
:nth-child(3) <ul> <li> <li> <li> <li> <li> <li> https://flic.kr/p/9GVpoG
25.
:first-child :last-child :first-of-type :nth-last-child :nth-of-type :nth-last-of-type :only-child :only-of-type :empty :blank (CSS4 proposed)
26.
:matches(CSS4 proposed) https://css-tricks.com/almanac/selectors/m/matches/
27.
:target
28.
BROWSER SUPPORT
29.
DEMOS http://lea.verou.me/demos/ nth.html https://css-tricks.com/examples/ nth-child-tester/#
30.
THE negation pseudo-class :not
31.
Pseudo Elements
32.
http://www.growingwiththeweb.com/2012/08/pseudo-classes-vs-pseudo- elements.html “A pseudo-element […]
allows us to create items that do not normally exist in the document tree”
33.
::first-line ::first-letter ::before ::after
34.
::first-line ::first-letter ::before ::after
35.
https://css-tricks.com/pseudo- element-roundup/ http:// www.smashingmagazine.com/ 2011/07/13/learning-to-use-the- before-and-after-pseudo- elements-in-css/
36.
Thanks! Elizabeth Gardiner {@libwella}
Download now