SlideShare une entreprise Scribd logo
1  sur  66
Télécharger pour lire hors ligne
IN A ROCKET
Learn front-end development at rocket speed
CSS CSS FUNDAMENTALS
Pseudo-class
CSS FUNDAMENTALS: Build a strong foundation by solving real cases inarocket.com
PSEUDO-CLASSES
With this code all a elements that have not yet been visited are shown in green.
A pseudo-class selects an element with a special state specified by a keyword.
a:link {color: green}
Syntax selector:pseudo-class {style properties}
CSS FUNDAMENTALS: Build a strong foundation by solving real cases inarocket.com
TARGET &
LANG
UI ELEMENT
STATES
DYNAMIC
NEGATIONSTRUCTURAL
PSEUDO-CLASSES PSEUDO-CLASSES PSEUDO-CLASSES
PSEUDO-CLASSES PSEUDO-CLASSES
CSS FUNDAMENTALS: Build a strong foundation by solving real cases inarocket.com
Dynamic 

pseudo-classes
:link

:visited

:hover

:active

:focus
CSS FUNDAMENTALS: Build a strong foundation by solving real cases inarocket.com
PSEUDO-CLASSES / DYNAMIC / LINK STATES
Contact
a:link 

Represents links that have 

not yet been visited.
Contact
a:visited 

Styles for links that have been visited

(exists in the browser's history).
Contact
a:active 

Triggered when the user clicks the link or 

selects it with the keyboard's tab key.
CLICKED
Contact
a:hover 

Generally triggered when the user hovers over 

an element with the cursor (mouse pointer).
CSS FUNDAMENTALS: Build a strong foundation by solving real cases inarocket.com
Dynamic 

pseudo-classes
:link

:visited

:hover

:active

:focus
How to remember them?
😍 LOVE
😤 HATE
CSS FUNDAMENTALS: Build a strong foundation by solving real cases inarocket.com
PSEUDO-CLASSES / DYNAMIC
With this code all not visited links are shown in green.
Selects all links that have not yet been visited.
a:link {color: green}
Syntax selector:link {style properties}
CSS FUNDAMENTALS: Build a strong foundation by solving real cases inarocket.com
HTML CSS
Browser
PSEUDO-CLASSES / DYNAMIC
<body>
<a href="#">Not visited.</a>
<a href="#">Visited.</a>
<a href="#">Hover.</a>
<a href="#">Active.</a>
<input type="text" name="zip" id="zip">
</body>
a:link { color: blue; }
a:visited { color: purple; }
a:hover { color: green; }
a:active { color: red; }
input:focus { color: orange; }
Web page title
index.html
Not visited.
Pressed
Visited. Hover. Active. Writing here...
READY TO USE CODE
CSS FUNDAMENTALS: Build a strong foundation by solving real cases inarocket.com
TARGET &
LANG
UI ELEMENT
STATES
DYNAMIC
NEGATIONSTRUCTURAL
PSEUDO-CLASSES PSEUDO-CLASSES PSEUDO-CLASSES
PSEUDO-CLASSES PSEUDO-CLASSES
CSS FUNDAMENTALS: Build a strong foundation by solving real cases inarocket.com
PSEUDO-CLASSES / TARGET & LANG
With this code the terms fragment identifier is shown in green.
Selects a fragment identifier that has a location within a resource.
h2:terms {color: green}
Syntax selector:target {style properties}
CSS FUNDAMENTALS: Build a strong foundation by solving real cases inarocket.com
HTML CSS
Browser
PSEUDO-CLASSES / TARGET & LANG
<body>
<a href="#about">About.</a>
<a href="#terms">Terms.</a>
<h2 id="about">About our company</h2>
<h2 id="terms">Terms of use</h2>
</body>
h2:target { color: green; }
Web page title
index.html
- About.
- Terms.
About our company
Terms of use
READY TO USE CODE
CSS FUNDAMENTALS: Build a strong foundation by solving real cases inarocket.com
PSEUDO-CLASSES / TARGET & LANG
With this code the paragraphs in English (en) are shown in green.
Selects elements based on the language they are determined to be in.
p:lang(en) {color: green}
Syntax selector:lang(lg) {style properties}
CSS FUNDAMENTALS: Build a strong foundation by solving real cases inarocket.com
HTML CSS
Browser
PSEUDO-CLASSES / TARGET & LANG
<body>
<p lang="en"><q>To be, or not to be:
that is the question.</q></p>
<p lang="es"><q>En un lugar de la
Mancha, de cuyo nombre no quiero
acordarme...</q></p>
</body>
p:lang(en) > q { quotes: '201C' '201D'; }
p:lang(es) > q { quotes: '«' '»'; }
Web page title
index.html
“To be, or not to be: that is the question.”
«En un lugar de la Mancha, de cuyo nombre no quiero
acordarme...»
READY TO USE CODE
CSS FUNDAMENTALS: Build a strong foundation by solving real cases inarocket.com
TARGET &
LANG
UI ELEMENT
STATES
DYNAMIC
NEGATIONSTRUCTURAL
PSEUDO-CLASSES PSEUDO-CLASSES PSEUDO-CLASSES
PSEUDO-CLASSES PSEUDO-CLASSES
CSS FUNDAMENTALS: Build a strong foundation by solving real cases inarocket.com
PSEUDO-CLASSES / UI ELEMENT STATES
With this code only the enabled inputs are shown in green.
Selects any enabled element (it can be selected, clicked on, typed into, etc.).
input:enabled {color: green}
Syntax selector:enabled {style properties}
CSS FUNDAMENTALS: Build a strong foundation by solving real cases inarocket.com
PSEUDO-CLASSES / UI ELEMENT STATES
With this code only the disabled inputs are shown in green.
Selects any disabled element.
input:disabled {color: green}
Syntax selector:enabled {style properties}
CSS FUNDAMENTALS: Build a strong foundation by solving real cases inarocket.com
HTML CSS
Browser
PSEUDO-CLASSES / UI ELEMENT STATES
<body>
<form>
<label for="name">Name:</label>
<input type="text" id="name">
<label for="city">City:</label>
<input type="text" id="city" value="NYC"
disabled="disabled">
<input type="button" value="Submit">
</form>
</body>
input:enabled { color: green; }
input:disabled { color: gray; }
Web page title
index.html
Name:
City:
John Doe
NYC
READY TO USE CODE
CSS FUNDAMENTALS: Build a strong foundation by solving real cases inarocket.com
PSEUDO-CLASSES / UI ELEMENT STATES
With this code only the checked inputs are shown in green.
Selects any radio, checkbox or option that is checked or toggled to an on state.
input:checked {color: green}
Syntax selector:checked {style properties}
CSS FUNDAMENTALS: Build a strong foundation by solving real cases inarocket.com
HTML CSS
Browser
PSEUDO-CLASSES / UI ELEMENT STATES
<body>
<form>
<input type="radio" name="pay" id="cash">
<label for="cash">Cash</label>
<input type="radio" name="pay" id="card">
<label for="card">Card</label>
<input type="checkbox" name="nwslt" id="nwslt">
<label for="nwslt">Subscribe me!</label>
</form>
</body>
input[type=radio]:checked + label { color:
green; }
input[type=checkbox]:checked + label { color:
blue; }
Web page title
index.html
Cash Card Subscribe me!
READY TO USE CODE
CSS FUNDAMENTALS: Build a strong foundation by solving real cases inarocket.com
TARGET &
LANG
UI ELEMENT
STATES
DYNAMIC
NEGATIONSTRUCTURAL
PSEUDO-CLASSES PSEUDO-CLASSES PSEUDO-CLASSES
PSEUDO-CLASSES PSEUDO-CLASSES
CSS FUNDAMENTALS: Build a strong foundation by solving real cases inarocket.com
Structural 

pseudo-classes
:root
:empty

:first-child

:last-child

:nth-child()

:only-child

:first-of-type

:last-of-type

:nth-of-type()

:only-of-type
CSS FUNDAMENTALS: Build a strong foundation by solving real cases inarocket.com
PSEUDO-CLASSES / STRUCTURAL
Selects an element that is the root of the document (in HTML, this is always the HTML element).
:root {color: green}
Syntax :root {style properties}
CSS FUNDAMENTALS: Build a strong foundation by solving real cases inarocket.com
HTML CSS
Browser
PSEUDO-CLASSES / STRUCTURAL
<body>
<h2>Lorem ipsum dolor</h2>
<p>Nostrum similique veniam commodi sed esse earum
voluptatum corrupti at quam voluptates?</p>
<ul>
<li>Esse</li>
<li>Earum</li>
</ul>
</body>
:root { color: green; }
Web page title
index.html
Lorem ipsum dolor
Nostrum similique veniam commodi sed esse earum voluptatum
corrupti at quam voluptates?
• Esse
• Earum
READY TO USE CODE
CSS FUNDAMENTALS: Build a strong foundation by solving real cases inarocket.com
HTML CSS
Browser
PSEUDO-CLASSES / STRUCTURAL
<body>
<h2>Lorem ipsum dolor</h2>
<p>Nostrum similique veniam commodi sed esse
earum voluptatum corrupti at quam voluptates?
</p>
</body>
:root {
--color-primary: blue;
--color-secondary: gray;
}
p {
background: var(--color-secondary);
color: var(--color-primary);
}
Web page title
index.html
Lorem ipsum dolor
Nostrum similique veniam commodi sed esse earum voluptatum
corrupti at quam voluptates?
READY TO USE CODE
CSS FUNDAMENTALS: Build a strong foundation by solving real cases inarocket.com
Structural 

pseudo-classes
:root

:empty
:first-child

:last-child

:nth-child()

:only-child

:first-of-type

:last-of-type

:nth-of-type()

:only-of-type
CSS FUNDAMENTALS: Build a strong foundation by solving real cases inarocket.com
PSEUDO-CLASSES / STRUCTURAL
With this code only the empty divs are shown in gray.
Selects an element that has no children at all.
div:empty {background: gray}
Syntax element:empty {style properties}
CSS FUNDAMENTALS: Build a strong foundation by solving real cases inarocket.com
HTML CSS
Browser
PSEUDO-CLASSES / STRUCTURAL
<body>
<article>
<h2>Item 1</h2>
<p>Item description.</p>
</article>
<article><!-- No item here --></article>
</body>
article {
background: green;
width: 100px;
height: 100px;
}
article:empty {
background: gray;
}
Web page title
index.html
Item 1
Item description.
READY TO USE CODE
CSS FUNDAMENTALS: Build a strong foundation by solving real cases inarocket.com
Structural 

pseudo-classes
:root

:empty

:first-child
:last-child

:nth-child()

:only-child

:first-of-type

:last-of-type

:nth-of-type()

:only-of-type
CSS FUNDAMENTALS: Build a strong foundation by solving real cases inarocket.com
PSEUDO-CLASSES / STRUCTURAL
With this code only the first li of a list is shown in green.
Selects an element that is first in a list of siblings.
li:first-child {color: green}
Syntax element:first-child {style properties}
CSS FUNDAMENTALS: Build a strong foundation by solving real cases inarocket.com
HTML CSS
Browser
PSEUDO-CLASSES / STRUCTURAL
<body>
<ol>
<li>Usain Bolt - Gold</li>
<li>Yohan Blake - Silver</li>
<li>Justin Gatlin - Bronze</li>
</ol>
</body>
li:first-child { color: green; }
Web page title
index.html
1. Usain Bolt - Gold
2. Yohan Blake - Silver
3. Justin Gatlin - Bronze
READY TO USE CODE
CSS FUNDAMENTALS: Build a strong foundation by solving real cases inarocket.com
Structural 

pseudo-classes
:root

:empty

:first-child

:last-child
:nth-child()

:only-child

:first-of-type

:last-of-type

:nth-of-type()

:only-of-type
CSS FUNDAMENTALS: Build a strong foundation by solving real cases inarocket.com
PSEUDO-CLASSES / STRUCTURAL
With this code only the last li of a list is shown in green.
Selects an element that is last in a list of siblings.
li:last-child {color: green}
Syntax element:last-child {style properties}
CSS FUNDAMENTALS: Build a strong foundation by solving real cases inarocket.com
HTML CSS
Browser
PSEUDO-CLASSES / STRUCTURAL
<body>
<ol>
<li>Usain Bolt - Gold</li>
<li>Yohan Blake - Silver</li>
<li>Justin Gatlin - Bronze</li>
<li>Miguel Sánchez - Retired ;)</li>
</ol>
</body>
li:last-child { color: green; }
Web page title
index.html
1. Usain Bolt - Gold
2. Yohan Blake - Silver
3. Justin Gatlin - Bronze
4. Miguel Sánchez - Retired ;)
READY TO USE CODE
CSS FUNDAMENTALS: Build a strong foundation by solving real cases inarocket.com
Structural 

pseudo-classes
:root

:empty

:first-child

:last-child

:nth-child()
:only-child

:first-of-type

:last-of-type

:nth-of-type()

:only-of-type
CSS FUNDAMENTALS: Build a strong foundation by solving real cases inarocket.com
PSEUDO-CLASSES / STRUCTURAL
With this code every odd li of a list is shown in green.
Selects an element that has an+b-1 siblings before it in the document tree and has a parent element.
li:nth-child(2n+1) {color: green}
Syntax element:nth-child(an + b) {style properties}
CSS FUNDAMENTALS: Build a strong foundation by solving real cases inarocket.com
PSEUDO-CLASSES / STRUCTURAL
li:nth-child(4) { color: green; }
• Item 1

• Item 2

• Item 3

• Item 4

• Item 5

• Item 6

• Item 7

• Item 8
CSS FUNDAMENTALS: Build a strong foundation by solving real cases inarocket.com
PSEUDO-CLASSES / STRUCTURAL
li:nth-child(2n+1) { color: green; }
• Item 1

• Item 2

• Item 3

• Item 4

• Item 5

• Item 6

• Item 7

• Item 8
First term
Difference
CSS FUNDAMENTALS: Build a strong foundation by solving real cases inarocket.com
PSEUDO-CLASSES / STRUCTURAL
li:nth-child(2n+2) { color: green; }
• Item 1

• Item 2

• Item 3

• Item 4

• Item 5

• Item 6

• Item 7

• Item 8
First term
Difference
CSS FUNDAMENTALS: Build a strong foundation by solving real cases inarocket.com
PSEUDO-CLASSES / STRUCTURAL
li:nth-child(odd) { color: green; }
• Item 1

• Item 2

• Item 3

• Item 4

• Item 5

• Item 6

• Item 7

• Item 8
CSS FUNDAMENTALS: Build a strong foundation by solving real cases inarocket.com
PSEUDO-CLASSES / STRUCTURAL
li:nth-child(even) { color: green; }
• Item 1

• Item 2

• Item 3

• Item 4

• Item 5

• Item 6

• Item 7

• Item 8
CSS FUNDAMENTALS: Build a strong foundation by solving real cases inarocket.com
PSEUDO-CLASSES / STRUCTURAL
li:nth-child(1n+3) { color: green; }
• Item 1

• Item 2

• Item 3

• Item 4

• Item 5

• Item 6

• Item 7

• Item 8
First term
Difference
CSS FUNDAMENTALS: Build a strong foundation by solving real cases inarocket.com
PSEUDO-CLASSES / STRUCTURAL
li:nth-child(3n+3) { color: green; }
• Item 1

• Item 2

• Item 3

• Item 4

• Item 5

• Item 6

• Item 7

• Item 8
First term
Difference
CSS FUNDAMENTALS: Build a strong foundation by solving real cases inarocket.com
Structural 

pseudo-classes
:root

:empty

:first-child

:last-child

:nth-child()

:only-child
:first-of-type

:last-of-type

:nth-of-type()

:only-of-type
CSS FUNDAMENTALS: Build a strong foundation by solving real cases inarocket.com
PSEUDO-CLASSES / STRUCTURAL
With this code only an li without siblings is shown in green.
Selects an element that has no siblings.
li:only-child {color: green}
Syntax element:only-child {style properties}
CSS FUNDAMENTALS: Build a strong foundation by solving real cases inarocket.com
HTML CSS
Browser
PSEUDO-CLASSES / STRUCTURAL
<body>
<h2>Search results: devices</h2>
<ul>
<li>Laptops</li>
<li>Smartphones</li>
</ul>
<h2>Search results: accessories</h2>
<ul>
<li>No results found</li>
</ul>
</body>
li:only-child { color: green; }
Web page title
index.html
Search results: devices
• Laptops
• Smartphones
Search results: accessories
• No results found
READY TO USE CODE
CSS FUNDAMENTALS: Build a strong foundation by solving real cases inarocket.com
Structural 

pseudo-classes
:root

:empty

:first-child

:last-child

:nth-child()

:only-child

:first-of-type
:last-of-type

:nth-of-type()

:only-of-type
CSS FUNDAMENTALS: Build a strong foundation by solving real cases inarocket.com
PSEUDO-CLASSES / STRUCTURAL
With this code only the first p in a group of children paragraphs is shown in green.
Selects an element that is the first sibling of its type.
p:first-of-type {color: green}
Syntax element:first-of-type {style properties}
CSS FUNDAMENTALS: Build a strong foundation by solving real cases inarocket.com
HTML CSS
Browser
PSEUDO-CLASSES / STRUCTURAL
<body>
<main>
<h2>Featured product</h2>
<p>Product description.</p>
<h2>Second product</h2>
<p>Product description.</p>
</main>
</body>
p:first-of-type { color: green; }
Web page title
index.html
Featured product
Product description.
Second product
Product description.
READY TO USE CODE
CSS FUNDAMENTALS: Build a strong foundation by solving real cases inarocket.com
Structural 

pseudo-classes
:root

:empty

:first-child

:last-child

:nth-child()

:only-child

:first-of-type

:last-of-type
:nth-of-type()

:only-of-type
CSS FUNDAMENTALS: Build a strong foundation by solving real cases inarocket.com
PSEUDO-CLASSES / STRUCTURAL
With this code only the last p in a group of children paragraphs is shown in green.
Selects an element that is the last sibling of its type.
p:last-of-type {color: green}
Syntax element:first-of-type {style properties}
CSS FUNDAMENTALS: Build a strong foundation by solving real cases inarocket.com
HTML CSS
Browser
PSEUDO-CLASSES / STRUCTURAL
<body>
<main>
<h2>First product</h2>
<p>Product description.</p>
<h2>Expiring product</h2>
<p>Last units available.</p>
</main>
</body>
p:last-of-type { color: green; }
Web page title
index.html
First product
Product description.
Expiring product
Last units available.
READY TO USE CODE
CSS FUNDAMENTALS: Build a strong foundation by solving real cases inarocket.com
Structural 

pseudo-classes
:root

:empty

:first-child

:last-child

:nth-child()

:only-child

:first-of-type

:last-of-type

:nth-of-type()
:only-of-type
CSS FUNDAMENTALS: Build a strong foundation by solving real cases inarocket.com
PSEUDO-CLASSES / STRUCTURAL
With this code only the odd paragraphs in a group of children paragraphs are shown in green.
Selects elements of a given type, based on their position among a group of siblings.
p:nth-of-type(odd) {color: green}
Syntax element:nth-of-type() {style properties}
CSS FUNDAMENTALS: Build a strong foundation by solving real cases inarocket.com
HTML CSS
Browser
PSEUDO-CLASSES / STRUCTURAL
<body>
<main>
<h2>Product 1</h2>
<p>Product description.</p>
<h2>Product 2</h2>
<p>Product description.</p>
<h2>Product 3</h2>
<p>Product description.</p>
<h2>Product 4</h2>
<p>Product description.</p>
</main>
</body>
p:nth-of-type(odd) { color: green; }
Web page title
index.html
Product 1
Product description.
Product 2
Product description.
Product 3
Product description.
Product 4
Product description.
READY TO USE CODE
CSS FUNDAMENTALS: Build a strong foundation by solving real cases inarocket.com
Structural 

pseudo-classes
:root

:empty

:first-child

:last-child

:nth-child()

:only-child

:first-of-type

:last-of-type

:nth-of-type()

:only-of-type
CSS FUNDAMENTALS: Build a strong foundation by solving real cases inarocket.com
PSEUDO-CLASSES / STRUCTURAL
With this code only the paragraph with no other siblign paragraphs is shown in green.
Selects an element that has no siblings with the same expanded element name.
p:only-of-type {color: green}
Syntax element:only-of-type() {style properties}
CSS FUNDAMENTALS: Build a strong foundation by solving real cases inarocket.com
HTML CSS
Browser
PSEUDO-CLASSES / STRUCTURAL
<body>
<article>
<h2>Product 1</h2>
<p>Product description.</p>
<p>Description continues here.</p>
</article>
<article>
<h2>Product 2</h2>
<p>Out of stock.</p>
</article>
</body>
p:only-of-type { color: green; }
Web page title
index.html
Product 1
Product description.
Description continues here.
Product 2
Out of stock.
READY TO USE CODE
CSS FUNDAMENTALS: Build a strong foundation by solving real cases inarocket.com
TARGET &
LANG
UI ELEMENT
STATES
DYNAMIC
NEGATIONSTRUCTURAL
PSEUDO-CLASSES PSEUDO-CLASSES PSEUDO-CLASSES
PSEUDO-CLASSES PSEUDO-CLASSES
CSS FUNDAMENTALS: Build a strong foundation by solving real cases inarocket.com
PSEUDO-CLASSES / NEGATION
With this code all the elements of a header are shown in green, excluding all h1 headers.
Selects elements that do not match a list of selectors.
header :not(h1) {color: green}
Syntax element:not(X) {style properties}
CSS FUNDAMENTALS: Build a strong foundation by solving real cases inarocket.com
HTML CSS
Browser
PSEUDO-CLASSES / NEGATION
<body>
<header>
<h1>Company name</h1>
<h1>Tagline</h1>
<nav>Navigation goes here.</nav>
<div>User not logged in.</div>
</header>
</body>
header :not(h1) { color: green; }
Web page title
index.html
Company name
Tagline
Product description.
User not logged in.
READY TO USE CODE
CSS FUNDAMENTALS: Build a strong foundation by solving real cases inarocket.com
HTML CSS
Browser
PSEUDO-CLASSES / NEGATION
<body>
<p class="mini">Paragraph goes here.</p>
<p>Paragraph goes here.</p>
<p class="mini">Paragraph goes here.</p>
</body>
.mini { color: black; }
p:not(.mini) { color: green; }
Web page title
index.html
Paragraph goes here.
Paragraph goes here.
Paragraph goes here.
READY TO USE CODE
CSS FUNDAMENTALS: Build a strong foundation by solving real cases inarocket.com
TARGET &
LANG
UI ELEMENT
STATES
DYNAMIC
NEGATIONSTRUCTURAL
PSEUDO-CLASSES PSEUDO-CLASSES PSEUDO-CLASSES
PSEUDO-CLASSES PSEUDO-CLASSES
CSS FUNDAMENTALS: Build a strong foundation by solving real cases inarocket.com
REFERENCE: W3C
SOURCE: Selectors Level 3 by W3C.
Learn front-end development at rocket speed
inarocket.com
by miguelsanchez.com
YOU CAN CONTINUE THIS COURSE FOR FREE ON
+ READY TO USE CODE
+ QUIZZES
+ FREE UPDATES
We respect your time

No more blah blah videos. Just straight to
the point slides with relevant information.
Ready to use code

Real code you can just copy and paste into
your real projects.
Step by step guides

Clear and concise steps to build real use
solutions. No missed points.
Learn front-end development at rocket speed
inarocket.com
IN A ROCKET
Learn front-end development at rocket speed
CSS CSS FUNDAMENTALS
Pseudo-class

Contenu connexe

Tendances

Tendances (20)

How Cascading Style Sheets (CSS) Works
How Cascading Style Sheets (CSS) WorksHow Cascading Style Sheets (CSS) Works
How Cascading Style Sheets (CSS) Works
 
Beginners css tutorial for web designers
Beginners css tutorial for web designersBeginners css tutorial for web designers
Beginners css tutorial for web designers
 
Css Ppt
Css PptCss Ppt
Css Ppt
 
CSS For Backend Developers
CSS For Backend DevelopersCSS For Backend Developers
CSS For Backend Developers
 
Style and Selector
Style and SelectorStyle and Selector
Style and Selector
 
Basic-CSS-tutorial
Basic-CSS-tutorialBasic-CSS-tutorial
Basic-CSS-tutorial
 
Css font properties
Css font propertiesCss font properties
Css font properties
 
CSS3 2D/3D transform
CSS3 2D/3D transformCSS3 2D/3D transform
CSS3 2D/3D transform
 
Introduction to css
Introduction to cssIntroduction to css
Introduction to css
 
Html / CSS Presentation
Html / CSS PresentationHtml / CSS Presentation
Html / CSS Presentation
 
Html forms
Html formsHtml forms
Html forms
 
CSS Basics
CSS BasicsCSS Basics
CSS Basics
 
CSS Introduction
CSS IntroductionCSS Introduction
CSS Introduction
 
Introduction to Javascript By Satyen
Introduction to Javascript By  SatyenIntroduction to Javascript By  Satyen
Introduction to Javascript By Satyen
 
CSS3 Media Queries
CSS3 Media QueriesCSS3 Media Queries
CSS3 Media Queries
 
Introduction to CSS3
Introduction to CSS3Introduction to CSS3
Introduction to CSS3
 
CSS Font & Text style
CSS Font & Text style CSS Font & Text style
CSS Font & Text style
 
HTML/CSS Crash Course (april 4 2017)
HTML/CSS Crash Course (april 4 2017)HTML/CSS Crash Course (april 4 2017)
HTML/CSS Crash Course (april 4 2017)
 
Css Display Property
Css Display PropertyCss Display Property
Css Display Property
 
Lab#9 graphic and color
Lab#9 graphic and colorLab#9 graphic and color
Lab#9 graphic and color
 

Similaire à 9- Learn CSS Fundamentals / Pseudo-classes

11- Learn CSS Fundamentals / Combinators
11- Learn CSS Fundamentals / Combinators11- Learn CSS Fundamentals / Combinators
11- Learn CSS Fundamentals / CombinatorsIn a Rocket
 
CSS Methodology
CSS MethodologyCSS Methodology
CSS MethodologyZohar Arad
 
How to use CSS3 in WordPress - Sacramento
How to use CSS3 in WordPress - SacramentoHow to use CSS3 in WordPress - Sacramento
How to use CSS3 in WordPress - SacramentoSuzette Franck
 
10- Learn CSS Fundamentals / Pseudo-elements
10- Learn CSS Fundamentals / Pseudo-elements10- Learn CSS Fundamentals / Pseudo-elements
10- Learn CSS Fundamentals / Pseudo-elementsIn a Rocket
 
CSS in React - The Good, The Bad, and The Ugly
CSS in React - The Good, The Bad, and The UglyCSS in React - The Good, The Bad, and The Ugly
CSS in React - The Good, The Bad, and The UglyJoe Seifi
 
LIS3353 SP12 Week 13
LIS3353 SP12 Week 13LIS3353 SP12 Week 13
LIS3353 SP12 Week 13Amanda Case
 
Front-End Methodologies
Front-End MethodologiesFront-End Methodologies
Front-End MethodologiesArash Manteghi
 
Styling components with JavaScript
Styling components with JavaScriptStyling components with JavaScript
Styling components with JavaScriptbensmithett
 
14- Learn CSS Fundamentals / Inheritance
14- Learn CSS Fundamentals / Inheritance14- Learn CSS Fundamentals / Inheritance
14- Learn CSS Fundamentals / InheritanceIn a Rocket
 
CSS: selectors and the box model
CSS: selectors and the box modelCSS: selectors and the box model
CSS: selectors and the box modelIdan Gazit
 
The New UI - Staying Strong with Flexbox, SASS, and {{Mustache.js}}
The New UI - Staying Strong with Flexbox, SASS, and {{Mustache.js}}The New UI - Staying Strong with Flexbox, SASS, and {{Mustache.js}}
The New UI - Staying Strong with Flexbox, SASS, and {{Mustache.js}}Eric Carlisle
 
Build a better UI component library with Styled System
Build a better UI component library with Styled SystemBuild a better UI component library with Styled System
Build a better UI component library with Styled SystemHsin-Hao Tang
 
Front End Best Practices
Front End Best PracticesFront End Best Practices
Front End Best PracticesHolger Bartel
 

Similaire à 9- Learn CSS Fundamentals / Pseudo-classes (20)

11- Learn CSS Fundamentals / Combinators
11- Learn CSS Fundamentals / Combinators11- Learn CSS Fundamentals / Combinators
11- Learn CSS Fundamentals / Combinators
 
CSS Methodology
CSS MethodologyCSS Methodology
CSS Methodology
 
How to use CSS3 in WordPress - Sacramento
How to use CSS3 in WordPress - SacramentoHow to use CSS3 in WordPress - Sacramento
How to use CSS3 in WordPress - Sacramento
 
10- Learn CSS Fundamentals / Pseudo-elements
10- Learn CSS Fundamentals / Pseudo-elements10- Learn CSS Fundamentals / Pseudo-elements
10- Learn CSS Fundamentals / Pseudo-elements
 
CSS in React - The Good, The Bad, and The Ugly
CSS in React - The Good, The Bad, and The UglyCSS in React - The Good, The Bad, and The Ugly
CSS in React - The Good, The Bad, and The Ugly
 
LIS3353 SP12 Week 13
LIS3353 SP12 Week 13LIS3353 SP12 Week 13
LIS3353 SP12 Week 13
 
An Introduction to CSS
An Introduction to CSSAn Introduction to CSS
An Introduction to CSS
 
Front-End Methodologies
Front-End MethodologiesFront-End Methodologies
Front-End Methodologies
 
Pfnp slides
Pfnp slidesPfnp slides
Pfnp slides
 
Styling components with JavaScript
Styling components with JavaScriptStyling components with JavaScript
Styling components with JavaScript
 
14- Learn CSS Fundamentals / Inheritance
14- Learn CSS Fundamentals / Inheritance14- Learn CSS Fundamentals / Inheritance
14- Learn CSS Fundamentals / Inheritance
 
CSS: selectors and the box model
CSS: selectors and the box modelCSS: selectors and the box model
CSS: selectors and the box model
 
Css
CssCss
Css
 
The New UI - Staying Strong with Flexbox, SASS, and {{Mustache.js}}
The New UI - Staying Strong with Flexbox, SASS, and {{Mustache.js}}The New UI - Staying Strong with Flexbox, SASS, and {{Mustache.js}}
The New UI - Staying Strong with Flexbox, SASS, and {{Mustache.js}}
 
Build a better UI component library with Styled System
Build a better UI component library with Styled SystemBuild a better UI component library with Styled System
Build a better UI component library with Styled System
 
Front End Best Practices
Front End Best PracticesFront End Best Practices
Front End Best Practices
 
css.ppt
css.pptcss.ppt
css.ppt
 
css.ppt
css.pptcss.ppt
css.ppt
 
presentation
presentationpresentation
presentation
 
Rational HATS and CSS
Rational HATS and CSSRational HATS and CSS
Rational HATS and CSS
 

Plus de In a Rocket

3- Learn Flexbox & CSS Grid / Container & items
3- Learn Flexbox & CSS Grid / Container & items3- Learn Flexbox & CSS Grid / Container & items
3- Learn Flexbox & CSS Grid / Container & itemsIn a Rocket
 
2- Learn Flexbox & CSS Grid / Context
2- Learn Flexbox & CSS Grid / Context2- Learn Flexbox & CSS Grid / Context
2- Learn Flexbox & CSS Grid / ContextIn a Rocket
 
1- Learn Flexbox & CSS Grid / Environment setup
1- Learn Flexbox & CSS Grid / Environment setup1- Learn Flexbox & CSS Grid / Environment setup
1- Learn Flexbox & CSS Grid / Environment setupIn a Rocket
 
17- Learn CSS Fundamentals / Units
17- Learn CSS Fundamentals / Units17- Learn CSS Fundamentals / Units
17- Learn CSS Fundamentals / UnitsIn a Rocket
 
16- Learn CSS Fundamentals / Background
16- Learn CSS Fundamentals / Background16- Learn CSS Fundamentals / Background
16- Learn CSS Fundamentals / BackgroundIn a Rocket
 
15- Learn CSS Fundamentals / Color
15- Learn CSS Fundamentals / Color15- Learn CSS Fundamentals / Color
15- Learn CSS Fundamentals / ColorIn a Rocket
 
13- Learn CSS Fundamentals / Specificity
13- Learn CSS Fundamentals / Specificity13- Learn CSS Fundamentals / Specificity
13- Learn CSS Fundamentals / SpecificityIn a Rocket
 
12- Learn CSS Fundamentals / Mix & group
12- Learn CSS Fundamentals / Mix & group12- Learn CSS Fundamentals / Mix & group
12- Learn CSS Fundamentals / Mix & groupIn a Rocket
 
8- Learn CSS Fundamentals / Attribute selectors
8- Learn CSS Fundamentals / Attribute selectors8- Learn CSS Fundamentals / Attribute selectors
8- Learn CSS Fundamentals / Attribute selectorsIn a Rocket
 
2- Learn HTML Fundamentals / Text Formatting
2- Learn HTML Fundamentals / Text Formatting2- Learn HTML Fundamentals / Text Formatting
2- Learn HTML Fundamentals / Text FormattingIn a Rocket
 
1- Learn HTML Fundamentals / Start in 5 Minutes
1- Learn HTML Fundamentals / Start in 5 Minutes1- Learn HTML Fundamentals / Start in 5 Minutes
1- Learn HTML Fundamentals / Start in 5 MinutesIn a Rocket
 
Learn SUIT: CSS Naming Convention
Learn SUIT: CSS Naming ConventionLearn SUIT: CSS Naming Convention
Learn SUIT: CSS Naming ConventionIn a Rocket
 
Learn BEM: CSS Naming Convention
Learn BEM: CSS Naming ConventionLearn BEM: CSS Naming Convention
Learn BEM: CSS Naming ConventionIn a Rocket
 

Plus de In a Rocket (13)

3- Learn Flexbox & CSS Grid / Container & items
3- Learn Flexbox & CSS Grid / Container & items3- Learn Flexbox & CSS Grid / Container & items
3- Learn Flexbox & CSS Grid / Container & items
 
2- Learn Flexbox & CSS Grid / Context
2- Learn Flexbox & CSS Grid / Context2- Learn Flexbox & CSS Grid / Context
2- Learn Flexbox & CSS Grid / Context
 
1- Learn Flexbox & CSS Grid / Environment setup
1- Learn Flexbox & CSS Grid / Environment setup1- Learn Flexbox & CSS Grid / Environment setup
1- Learn Flexbox & CSS Grid / Environment setup
 
17- Learn CSS Fundamentals / Units
17- Learn CSS Fundamentals / Units17- Learn CSS Fundamentals / Units
17- Learn CSS Fundamentals / Units
 
16- Learn CSS Fundamentals / Background
16- Learn CSS Fundamentals / Background16- Learn CSS Fundamentals / Background
16- Learn CSS Fundamentals / Background
 
15- Learn CSS Fundamentals / Color
15- Learn CSS Fundamentals / Color15- Learn CSS Fundamentals / Color
15- Learn CSS Fundamentals / Color
 
13- Learn CSS Fundamentals / Specificity
13- Learn CSS Fundamentals / Specificity13- Learn CSS Fundamentals / Specificity
13- Learn CSS Fundamentals / Specificity
 
12- Learn CSS Fundamentals / Mix & group
12- Learn CSS Fundamentals / Mix & group12- Learn CSS Fundamentals / Mix & group
12- Learn CSS Fundamentals / Mix & group
 
8- Learn CSS Fundamentals / Attribute selectors
8- Learn CSS Fundamentals / Attribute selectors8- Learn CSS Fundamentals / Attribute selectors
8- Learn CSS Fundamentals / Attribute selectors
 
2- Learn HTML Fundamentals / Text Formatting
2- Learn HTML Fundamentals / Text Formatting2- Learn HTML Fundamentals / Text Formatting
2- Learn HTML Fundamentals / Text Formatting
 
1- Learn HTML Fundamentals / Start in 5 Minutes
1- Learn HTML Fundamentals / Start in 5 Minutes1- Learn HTML Fundamentals / Start in 5 Minutes
1- Learn HTML Fundamentals / Start in 5 Minutes
 
Learn SUIT: CSS Naming Convention
Learn SUIT: CSS Naming ConventionLearn SUIT: CSS Naming Convention
Learn SUIT: CSS Naming Convention
 
Learn BEM: CSS Naming Convention
Learn BEM: CSS Naming ConventionLearn BEM: CSS Naming Convention
Learn BEM: CSS Naming Convention
 

Dernier

Zero-day Vulnerabilities
Zero-day VulnerabilitiesZero-day Vulnerabilities
Zero-day Vulnerabilitiesalihassaah1994
 
A_Z-1_0_4T_00A-EN_U-Po_w_erPoint_06.pptx
A_Z-1_0_4T_00A-EN_U-Po_w_erPoint_06.pptxA_Z-1_0_4T_00A-EN_U-Po_w_erPoint_06.pptx
A_Z-1_0_4T_00A-EN_U-Po_w_erPoint_06.pptxjayshuklatrainer
 
Check out the Free Landing Page Hosting in 2024
Check out the Free Landing Page Hosting in 2024Check out the Free Landing Page Hosting in 2024
Check out the Free Landing Page Hosting in 2024Shubham Pant
 
LESSON 10/ GROUP 10/ ST. THOMAS AQUINASS
LESSON 10/ GROUP 10/ ST. THOMAS AQUINASSLESSON 10/ GROUP 10/ ST. THOMAS AQUINASS
LESSON 10/ GROUP 10/ ST. THOMAS AQUINASSlesteraporado16
 
Bio Medical Waste Management Guideliness 2023 ppt.pptx
Bio Medical Waste Management Guideliness 2023 ppt.pptxBio Medical Waste Management Guideliness 2023 ppt.pptx
Bio Medical Waste Management Guideliness 2023 ppt.pptxnaveenithkrishnan
 
WordPress by the numbers - Jan Loeffler, CTO WebPros, CloudFest 2024
WordPress by the numbers - Jan Loeffler, CTO WebPros, CloudFest 2024WordPress by the numbers - Jan Loeffler, CTO WebPros, CloudFest 2024
WordPress by the numbers - Jan Loeffler, CTO WebPros, CloudFest 2024Jan Löffler
 
Computer 10 Lesson 8: Building a Website
Computer 10 Lesson 8: Building a WebsiteComputer 10 Lesson 8: Building a Website
Computer 10 Lesson 8: Building a WebsiteMavein
 
Vision Forward: Tracing Image Search SEO From Its Roots To AI-Enhanced Horizons
Vision Forward: Tracing Image Search SEO From Its Roots To AI-Enhanced HorizonsVision Forward: Tracing Image Search SEO From Its Roots To AI-Enhanced Horizons
Vision Forward: Tracing Image Search SEO From Its Roots To AI-Enhanced HorizonsRoxana Stingu
 
LESSON 5 GROUP 10 ST. THOMAS AQUINAS.pdf
LESSON 5 GROUP 10 ST. THOMAS AQUINAS.pdfLESSON 5 GROUP 10 ST. THOMAS AQUINAS.pdf
LESSON 5 GROUP 10 ST. THOMAS AQUINAS.pdfmchristianalwyn
 
TYPES AND DEFINITION OF ONLINE CRIMES AND HAZARDS
TYPES AND DEFINITION OF ONLINE CRIMES AND HAZARDSTYPES AND DEFINITION OF ONLINE CRIMES AND HAZARDS
TYPES AND DEFINITION OF ONLINE CRIMES AND HAZARDSedrianrheine
 
Niche Domination Prodigy Review Plus Bonus
Niche Domination Prodigy Review Plus BonusNiche Domination Prodigy Review Plus Bonus
Niche Domination Prodigy Review Plus BonusSkylark Nobin
 
Benefits of doing Internet peering and running an Internet Exchange (IX) pres...
Benefits of doing Internet peering and running an Internet Exchange (IX) pres...Benefits of doing Internet peering and running an Internet Exchange (IX) pres...
Benefits of doing Internet peering and running an Internet Exchange (IX) pres...APNIC
 
Introduction to ICANN and Fellowship program by Shreedeep Rayamajhi.pdf
Introduction to ICANN and Fellowship program  by Shreedeep Rayamajhi.pdfIntroduction to ICANN and Fellowship program  by Shreedeep Rayamajhi.pdf
Introduction to ICANN and Fellowship program by Shreedeep Rayamajhi.pdfShreedeep Rayamajhi
 
world Tuberculosis day ppt 25-3-2024.pptx
world Tuberculosis day ppt 25-3-2024.pptxworld Tuberculosis day ppt 25-3-2024.pptx
world Tuberculosis day ppt 25-3-2024.pptxnaveenithkrishnan
 
Presentation2.pptx - JoyPress Wordpress
Presentation2.pptx -  JoyPress WordpressPresentation2.pptx -  JoyPress Wordpress
Presentation2.pptx - JoyPress Wordpressssuser166378
 

Dernier (15)

Zero-day Vulnerabilities
Zero-day VulnerabilitiesZero-day Vulnerabilities
Zero-day Vulnerabilities
 
A_Z-1_0_4T_00A-EN_U-Po_w_erPoint_06.pptx
A_Z-1_0_4T_00A-EN_U-Po_w_erPoint_06.pptxA_Z-1_0_4T_00A-EN_U-Po_w_erPoint_06.pptx
A_Z-1_0_4T_00A-EN_U-Po_w_erPoint_06.pptx
 
Check out the Free Landing Page Hosting in 2024
Check out the Free Landing Page Hosting in 2024Check out the Free Landing Page Hosting in 2024
Check out the Free Landing Page Hosting in 2024
 
LESSON 10/ GROUP 10/ ST. THOMAS AQUINASS
LESSON 10/ GROUP 10/ ST. THOMAS AQUINASSLESSON 10/ GROUP 10/ ST. THOMAS AQUINASS
LESSON 10/ GROUP 10/ ST. THOMAS AQUINASS
 
Bio Medical Waste Management Guideliness 2023 ppt.pptx
Bio Medical Waste Management Guideliness 2023 ppt.pptxBio Medical Waste Management Guideliness 2023 ppt.pptx
Bio Medical Waste Management Guideliness 2023 ppt.pptx
 
WordPress by the numbers - Jan Loeffler, CTO WebPros, CloudFest 2024
WordPress by the numbers - Jan Loeffler, CTO WebPros, CloudFest 2024WordPress by the numbers - Jan Loeffler, CTO WebPros, CloudFest 2024
WordPress by the numbers - Jan Loeffler, CTO WebPros, CloudFest 2024
 
Computer 10 Lesson 8: Building a Website
Computer 10 Lesson 8: Building a WebsiteComputer 10 Lesson 8: Building a Website
Computer 10 Lesson 8: Building a Website
 
Vision Forward: Tracing Image Search SEO From Its Roots To AI-Enhanced Horizons
Vision Forward: Tracing Image Search SEO From Its Roots To AI-Enhanced HorizonsVision Forward: Tracing Image Search SEO From Its Roots To AI-Enhanced Horizons
Vision Forward: Tracing Image Search SEO From Its Roots To AI-Enhanced Horizons
 
LESSON 5 GROUP 10 ST. THOMAS AQUINAS.pdf
LESSON 5 GROUP 10 ST. THOMAS AQUINAS.pdfLESSON 5 GROUP 10 ST. THOMAS AQUINAS.pdf
LESSON 5 GROUP 10 ST. THOMAS AQUINAS.pdf
 
TYPES AND DEFINITION OF ONLINE CRIMES AND HAZARDS
TYPES AND DEFINITION OF ONLINE CRIMES AND HAZARDSTYPES AND DEFINITION OF ONLINE CRIMES AND HAZARDS
TYPES AND DEFINITION OF ONLINE CRIMES AND HAZARDS
 
Niche Domination Prodigy Review Plus Bonus
Niche Domination Prodigy Review Plus BonusNiche Domination Prodigy Review Plus Bonus
Niche Domination Prodigy Review Plus Bonus
 
Benefits of doing Internet peering and running an Internet Exchange (IX) pres...
Benefits of doing Internet peering and running an Internet Exchange (IX) pres...Benefits of doing Internet peering and running an Internet Exchange (IX) pres...
Benefits of doing Internet peering and running an Internet Exchange (IX) pres...
 
Introduction to ICANN and Fellowship program by Shreedeep Rayamajhi.pdf
Introduction to ICANN and Fellowship program  by Shreedeep Rayamajhi.pdfIntroduction to ICANN and Fellowship program  by Shreedeep Rayamajhi.pdf
Introduction to ICANN and Fellowship program by Shreedeep Rayamajhi.pdf
 
world Tuberculosis day ppt 25-3-2024.pptx
world Tuberculosis day ppt 25-3-2024.pptxworld Tuberculosis day ppt 25-3-2024.pptx
world Tuberculosis day ppt 25-3-2024.pptx
 
Presentation2.pptx - JoyPress Wordpress
Presentation2.pptx -  JoyPress WordpressPresentation2.pptx -  JoyPress Wordpress
Presentation2.pptx - JoyPress Wordpress
 

9- Learn CSS Fundamentals / Pseudo-classes

  • 1. IN A ROCKET Learn front-end development at rocket speed CSS CSS FUNDAMENTALS Pseudo-class
  • 2. CSS FUNDAMENTALS: Build a strong foundation by solving real cases inarocket.com PSEUDO-CLASSES With this code all a elements that have not yet been visited are shown in green. A pseudo-class selects an element with a special state specified by a keyword. a:link {color: green} Syntax selector:pseudo-class {style properties}
  • 3. CSS FUNDAMENTALS: Build a strong foundation by solving real cases inarocket.com TARGET & LANG UI ELEMENT STATES DYNAMIC NEGATIONSTRUCTURAL PSEUDO-CLASSES PSEUDO-CLASSES PSEUDO-CLASSES PSEUDO-CLASSES PSEUDO-CLASSES
  • 4. CSS FUNDAMENTALS: Build a strong foundation by solving real cases inarocket.com Dynamic 
 pseudo-classes :link :visited :hover :active :focus
  • 5. CSS FUNDAMENTALS: Build a strong foundation by solving real cases inarocket.com PSEUDO-CLASSES / DYNAMIC / LINK STATES Contact a:link 
 Represents links that have 
 not yet been visited. Contact a:visited 
 Styles for links that have been visited
 (exists in the browser's history). Contact a:active 
 Triggered when the user clicks the link or 
 selects it with the keyboard's tab key. CLICKED Contact a:hover 
 Generally triggered when the user hovers over 
 an element with the cursor (mouse pointer).
  • 6. CSS FUNDAMENTALS: Build a strong foundation by solving real cases inarocket.com Dynamic 
 pseudo-classes :link :visited :hover :active :focus How to remember them? 😍 LOVE 😤 HATE
  • 7. CSS FUNDAMENTALS: Build a strong foundation by solving real cases inarocket.com PSEUDO-CLASSES / DYNAMIC With this code all not visited links are shown in green. Selects all links that have not yet been visited. a:link {color: green} Syntax selector:link {style properties}
  • 8. CSS FUNDAMENTALS: Build a strong foundation by solving real cases inarocket.com HTML CSS Browser PSEUDO-CLASSES / DYNAMIC <body> <a href="#">Not visited.</a> <a href="#">Visited.</a> <a href="#">Hover.</a> <a href="#">Active.</a> <input type="text" name="zip" id="zip"> </body> a:link { color: blue; } a:visited { color: purple; } a:hover { color: green; } a:active { color: red; } input:focus { color: orange; } Web page title index.html Not visited. Pressed Visited. Hover. Active. Writing here... READY TO USE CODE
  • 9. CSS FUNDAMENTALS: Build a strong foundation by solving real cases inarocket.com TARGET & LANG UI ELEMENT STATES DYNAMIC NEGATIONSTRUCTURAL PSEUDO-CLASSES PSEUDO-CLASSES PSEUDO-CLASSES PSEUDO-CLASSES PSEUDO-CLASSES
  • 10. CSS FUNDAMENTALS: Build a strong foundation by solving real cases inarocket.com PSEUDO-CLASSES / TARGET & LANG With this code the terms fragment identifier is shown in green. Selects a fragment identifier that has a location within a resource. h2:terms {color: green} Syntax selector:target {style properties}
  • 11. CSS FUNDAMENTALS: Build a strong foundation by solving real cases inarocket.com HTML CSS Browser PSEUDO-CLASSES / TARGET & LANG <body> <a href="#about">About.</a> <a href="#terms">Terms.</a> <h2 id="about">About our company</h2> <h2 id="terms">Terms of use</h2> </body> h2:target { color: green; } Web page title index.html - About. - Terms. About our company Terms of use READY TO USE CODE
  • 12. CSS FUNDAMENTALS: Build a strong foundation by solving real cases inarocket.com PSEUDO-CLASSES / TARGET & LANG With this code the paragraphs in English (en) are shown in green. Selects elements based on the language they are determined to be in. p:lang(en) {color: green} Syntax selector:lang(lg) {style properties}
  • 13. CSS FUNDAMENTALS: Build a strong foundation by solving real cases inarocket.com HTML CSS Browser PSEUDO-CLASSES / TARGET & LANG <body> <p lang="en"><q>To be, or not to be: that is the question.</q></p> <p lang="es"><q>En un lugar de la Mancha, de cuyo nombre no quiero acordarme...</q></p> </body> p:lang(en) > q { quotes: '201C' '201D'; } p:lang(es) > q { quotes: '«' '»'; } Web page title index.html “To be, or not to be: that is the question.” «En un lugar de la Mancha, de cuyo nombre no quiero acordarme...» READY TO USE CODE
  • 14. CSS FUNDAMENTALS: Build a strong foundation by solving real cases inarocket.com TARGET & LANG UI ELEMENT STATES DYNAMIC NEGATIONSTRUCTURAL PSEUDO-CLASSES PSEUDO-CLASSES PSEUDO-CLASSES PSEUDO-CLASSES PSEUDO-CLASSES
  • 15. CSS FUNDAMENTALS: Build a strong foundation by solving real cases inarocket.com PSEUDO-CLASSES / UI ELEMENT STATES With this code only the enabled inputs are shown in green. Selects any enabled element (it can be selected, clicked on, typed into, etc.). input:enabled {color: green} Syntax selector:enabled {style properties}
  • 16. CSS FUNDAMENTALS: Build a strong foundation by solving real cases inarocket.com PSEUDO-CLASSES / UI ELEMENT STATES With this code only the disabled inputs are shown in green. Selects any disabled element. input:disabled {color: green} Syntax selector:enabled {style properties}
  • 17. CSS FUNDAMENTALS: Build a strong foundation by solving real cases inarocket.com HTML CSS Browser PSEUDO-CLASSES / UI ELEMENT STATES <body> <form> <label for="name">Name:</label> <input type="text" id="name"> <label for="city">City:</label> <input type="text" id="city" value="NYC" disabled="disabled"> <input type="button" value="Submit"> </form> </body> input:enabled { color: green; } input:disabled { color: gray; } Web page title index.html Name: City: John Doe NYC READY TO USE CODE
  • 18. CSS FUNDAMENTALS: Build a strong foundation by solving real cases inarocket.com PSEUDO-CLASSES / UI ELEMENT STATES With this code only the checked inputs are shown in green. Selects any radio, checkbox or option that is checked or toggled to an on state. input:checked {color: green} Syntax selector:checked {style properties}
  • 19. CSS FUNDAMENTALS: Build a strong foundation by solving real cases inarocket.com HTML CSS Browser PSEUDO-CLASSES / UI ELEMENT STATES <body> <form> <input type="radio" name="pay" id="cash"> <label for="cash">Cash</label> <input type="radio" name="pay" id="card"> <label for="card">Card</label> <input type="checkbox" name="nwslt" id="nwslt"> <label for="nwslt">Subscribe me!</label> </form> </body> input[type=radio]:checked + label { color: green; } input[type=checkbox]:checked + label { color: blue; } Web page title index.html Cash Card Subscribe me! READY TO USE CODE
  • 20. CSS FUNDAMENTALS: Build a strong foundation by solving real cases inarocket.com TARGET & LANG UI ELEMENT STATES DYNAMIC NEGATIONSTRUCTURAL PSEUDO-CLASSES PSEUDO-CLASSES PSEUDO-CLASSES PSEUDO-CLASSES PSEUDO-CLASSES
  • 21. CSS FUNDAMENTALS: Build a strong foundation by solving real cases inarocket.com Structural 
 pseudo-classes :root :empty :first-child :last-child :nth-child() :only-child :first-of-type :last-of-type :nth-of-type() :only-of-type
  • 22. CSS FUNDAMENTALS: Build a strong foundation by solving real cases inarocket.com PSEUDO-CLASSES / STRUCTURAL Selects an element that is the root of the document (in HTML, this is always the HTML element). :root {color: green} Syntax :root {style properties}
  • 23. CSS FUNDAMENTALS: Build a strong foundation by solving real cases inarocket.com HTML CSS Browser PSEUDO-CLASSES / STRUCTURAL <body> <h2>Lorem ipsum dolor</h2> <p>Nostrum similique veniam commodi sed esse earum voluptatum corrupti at quam voluptates?</p> <ul> <li>Esse</li> <li>Earum</li> </ul> </body> :root { color: green; } Web page title index.html Lorem ipsum dolor Nostrum similique veniam commodi sed esse earum voluptatum corrupti at quam voluptates? • Esse • Earum READY TO USE CODE
  • 24. CSS FUNDAMENTALS: Build a strong foundation by solving real cases inarocket.com HTML CSS Browser PSEUDO-CLASSES / STRUCTURAL <body> <h2>Lorem ipsum dolor</h2> <p>Nostrum similique veniam commodi sed esse earum voluptatum corrupti at quam voluptates? </p> </body> :root { --color-primary: blue; --color-secondary: gray; } p { background: var(--color-secondary); color: var(--color-primary); } Web page title index.html Lorem ipsum dolor Nostrum similique veniam commodi sed esse earum voluptatum corrupti at quam voluptates? READY TO USE CODE
  • 25. CSS FUNDAMENTALS: Build a strong foundation by solving real cases inarocket.com Structural 
 pseudo-classes :root :empty :first-child :last-child :nth-child() :only-child :first-of-type :last-of-type :nth-of-type() :only-of-type
  • 26. CSS FUNDAMENTALS: Build a strong foundation by solving real cases inarocket.com PSEUDO-CLASSES / STRUCTURAL With this code only the empty divs are shown in gray. Selects an element that has no children at all. div:empty {background: gray} Syntax element:empty {style properties}
  • 27. CSS FUNDAMENTALS: Build a strong foundation by solving real cases inarocket.com HTML CSS Browser PSEUDO-CLASSES / STRUCTURAL <body> <article> <h2>Item 1</h2> <p>Item description.</p> </article> <article><!-- No item here --></article> </body> article { background: green; width: 100px; height: 100px; } article:empty { background: gray; } Web page title index.html Item 1 Item description. READY TO USE CODE
  • 28. CSS FUNDAMENTALS: Build a strong foundation by solving real cases inarocket.com Structural 
 pseudo-classes :root :empty :first-child :last-child :nth-child() :only-child :first-of-type :last-of-type :nth-of-type() :only-of-type
  • 29. CSS FUNDAMENTALS: Build a strong foundation by solving real cases inarocket.com PSEUDO-CLASSES / STRUCTURAL With this code only the first li of a list is shown in green. Selects an element that is first in a list of siblings. li:first-child {color: green} Syntax element:first-child {style properties}
  • 30. CSS FUNDAMENTALS: Build a strong foundation by solving real cases inarocket.com HTML CSS Browser PSEUDO-CLASSES / STRUCTURAL <body> <ol> <li>Usain Bolt - Gold</li> <li>Yohan Blake - Silver</li> <li>Justin Gatlin - Bronze</li> </ol> </body> li:first-child { color: green; } Web page title index.html 1. Usain Bolt - Gold 2. Yohan Blake - Silver 3. Justin Gatlin - Bronze READY TO USE CODE
  • 31. CSS FUNDAMENTALS: Build a strong foundation by solving real cases inarocket.com Structural 
 pseudo-classes :root :empty :first-child :last-child :nth-child() :only-child :first-of-type :last-of-type :nth-of-type() :only-of-type
  • 32. CSS FUNDAMENTALS: Build a strong foundation by solving real cases inarocket.com PSEUDO-CLASSES / STRUCTURAL With this code only the last li of a list is shown in green. Selects an element that is last in a list of siblings. li:last-child {color: green} Syntax element:last-child {style properties}
  • 33. CSS FUNDAMENTALS: Build a strong foundation by solving real cases inarocket.com HTML CSS Browser PSEUDO-CLASSES / STRUCTURAL <body> <ol> <li>Usain Bolt - Gold</li> <li>Yohan Blake - Silver</li> <li>Justin Gatlin - Bronze</li> <li>Miguel Sánchez - Retired ;)</li> </ol> </body> li:last-child { color: green; } Web page title index.html 1. Usain Bolt - Gold 2. Yohan Blake - Silver 3. Justin Gatlin - Bronze 4. Miguel Sánchez - Retired ;) READY TO USE CODE
  • 34. CSS FUNDAMENTALS: Build a strong foundation by solving real cases inarocket.com Structural 
 pseudo-classes :root :empty :first-child :last-child :nth-child() :only-child :first-of-type :last-of-type :nth-of-type() :only-of-type
  • 35. CSS FUNDAMENTALS: Build a strong foundation by solving real cases inarocket.com PSEUDO-CLASSES / STRUCTURAL With this code every odd li of a list is shown in green. Selects an element that has an+b-1 siblings before it in the document tree and has a parent element. li:nth-child(2n+1) {color: green} Syntax element:nth-child(an + b) {style properties}
  • 36. CSS FUNDAMENTALS: Build a strong foundation by solving real cases inarocket.com PSEUDO-CLASSES / STRUCTURAL li:nth-child(4) { color: green; } • Item 1 • Item 2 • Item 3 • Item 4 • Item 5 • Item 6 • Item 7 • Item 8
  • 37. CSS FUNDAMENTALS: Build a strong foundation by solving real cases inarocket.com PSEUDO-CLASSES / STRUCTURAL li:nth-child(2n+1) { color: green; } • Item 1 • Item 2 • Item 3 • Item 4 • Item 5 • Item 6 • Item 7 • Item 8 First term Difference
  • 38. CSS FUNDAMENTALS: Build a strong foundation by solving real cases inarocket.com PSEUDO-CLASSES / STRUCTURAL li:nth-child(2n+2) { color: green; } • Item 1 • Item 2 • Item 3 • Item 4 • Item 5 • Item 6 • Item 7 • Item 8 First term Difference
  • 39. CSS FUNDAMENTALS: Build a strong foundation by solving real cases inarocket.com PSEUDO-CLASSES / STRUCTURAL li:nth-child(odd) { color: green; } • Item 1 • Item 2 • Item 3 • Item 4 • Item 5 • Item 6 • Item 7 • Item 8
  • 40. CSS FUNDAMENTALS: Build a strong foundation by solving real cases inarocket.com PSEUDO-CLASSES / STRUCTURAL li:nth-child(even) { color: green; } • Item 1 • Item 2 • Item 3 • Item 4 • Item 5 • Item 6 • Item 7 • Item 8
  • 41. CSS FUNDAMENTALS: Build a strong foundation by solving real cases inarocket.com PSEUDO-CLASSES / STRUCTURAL li:nth-child(1n+3) { color: green; } • Item 1 • Item 2 • Item 3 • Item 4 • Item 5 • Item 6 • Item 7 • Item 8 First term Difference
  • 42. CSS FUNDAMENTALS: Build a strong foundation by solving real cases inarocket.com PSEUDO-CLASSES / STRUCTURAL li:nth-child(3n+3) { color: green; } • Item 1 • Item 2 • Item 3 • Item 4 • Item 5 • Item 6 • Item 7 • Item 8 First term Difference
  • 43. CSS FUNDAMENTALS: Build a strong foundation by solving real cases inarocket.com Structural 
 pseudo-classes :root :empty :first-child :last-child :nth-child() :only-child :first-of-type :last-of-type :nth-of-type() :only-of-type
  • 44. CSS FUNDAMENTALS: Build a strong foundation by solving real cases inarocket.com PSEUDO-CLASSES / STRUCTURAL With this code only an li without siblings is shown in green. Selects an element that has no siblings. li:only-child {color: green} Syntax element:only-child {style properties}
  • 45. CSS FUNDAMENTALS: Build a strong foundation by solving real cases inarocket.com HTML CSS Browser PSEUDO-CLASSES / STRUCTURAL <body> <h2>Search results: devices</h2> <ul> <li>Laptops</li> <li>Smartphones</li> </ul> <h2>Search results: accessories</h2> <ul> <li>No results found</li> </ul> </body> li:only-child { color: green; } Web page title index.html Search results: devices • Laptops • Smartphones Search results: accessories • No results found READY TO USE CODE
  • 46. CSS FUNDAMENTALS: Build a strong foundation by solving real cases inarocket.com Structural 
 pseudo-classes :root :empty :first-child :last-child :nth-child() :only-child :first-of-type :last-of-type :nth-of-type() :only-of-type
  • 47. CSS FUNDAMENTALS: Build a strong foundation by solving real cases inarocket.com PSEUDO-CLASSES / STRUCTURAL With this code only the first p in a group of children paragraphs is shown in green. Selects an element that is the first sibling of its type. p:first-of-type {color: green} Syntax element:first-of-type {style properties}
  • 48. CSS FUNDAMENTALS: Build a strong foundation by solving real cases inarocket.com HTML CSS Browser PSEUDO-CLASSES / STRUCTURAL <body> <main> <h2>Featured product</h2> <p>Product description.</p> <h2>Second product</h2> <p>Product description.</p> </main> </body> p:first-of-type { color: green; } Web page title index.html Featured product Product description. Second product Product description. READY TO USE CODE
  • 49. CSS FUNDAMENTALS: Build a strong foundation by solving real cases inarocket.com Structural 
 pseudo-classes :root :empty :first-child :last-child :nth-child() :only-child :first-of-type :last-of-type :nth-of-type() :only-of-type
  • 50. CSS FUNDAMENTALS: Build a strong foundation by solving real cases inarocket.com PSEUDO-CLASSES / STRUCTURAL With this code only the last p in a group of children paragraphs is shown in green. Selects an element that is the last sibling of its type. p:last-of-type {color: green} Syntax element:first-of-type {style properties}
  • 51. CSS FUNDAMENTALS: Build a strong foundation by solving real cases inarocket.com HTML CSS Browser PSEUDO-CLASSES / STRUCTURAL <body> <main> <h2>First product</h2> <p>Product description.</p> <h2>Expiring product</h2> <p>Last units available.</p> </main> </body> p:last-of-type { color: green; } Web page title index.html First product Product description. Expiring product Last units available. READY TO USE CODE
  • 52. CSS FUNDAMENTALS: Build a strong foundation by solving real cases inarocket.com Structural 
 pseudo-classes :root :empty :first-child :last-child :nth-child() :only-child :first-of-type :last-of-type :nth-of-type() :only-of-type
  • 53. CSS FUNDAMENTALS: Build a strong foundation by solving real cases inarocket.com PSEUDO-CLASSES / STRUCTURAL With this code only the odd paragraphs in a group of children paragraphs are shown in green. Selects elements of a given type, based on their position among a group of siblings. p:nth-of-type(odd) {color: green} Syntax element:nth-of-type() {style properties}
  • 54. CSS FUNDAMENTALS: Build a strong foundation by solving real cases inarocket.com HTML CSS Browser PSEUDO-CLASSES / STRUCTURAL <body> <main> <h2>Product 1</h2> <p>Product description.</p> <h2>Product 2</h2> <p>Product description.</p> <h2>Product 3</h2> <p>Product description.</p> <h2>Product 4</h2> <p>Product description.</p> </main> </body> p:nth-of-type(odd) { color: green; } Web page title index.html Product 1 Product description. Product 2 Product description. Product 3 Product description. Product 4 Product description. READY TO USE CODE
  • 55. CSS FUNDAMENTALS: Build a strong foundation by solving real cases inarocket.com Structural 
 pseudo-classes :root :empty :first-child :last-child :nth-child() :only-child :first-of-type :last-of-type :nth-of-type() :only-of-type
  • 56. CSS FUNDAMENTALS: Build a strong foundation by solving real cases inarocket.com PSEUDO-CLASSES / STRUCTURAL With this code only the paragraph with no other siblign paragraphs is shown in green. Selects an element that has no siblings with the same expanded element name. p:only-of-type {color: green} Syntax element:only-of-type() {style properties}
  • 57. CSS FUNDAMENTALS: Build a strong foundation by solving real cases inarocket.com HTML CSS Browser PSEUDO-CLASSES / STRUCTURAL <body> <article> <h2>Product 1</h2> <p>Product description.</p> <p>Description continues here.</p> </article> <article> <h2>Product 2</h2> <p>Out of stock.</p> </article> </body> p:only-of-type { color: green; } Web page title index.html Product 1 Product description. Description continues here. Product 2 Out of stock. READY TO USE CODE
  • 58. CSS FUNDAMENTALS: Build a strong foundation by solving real cases inarocket.com TARGET & LANG UI ELEMENT STATES DYNAMIC NEGATIONSTRUCTURAL PSEUDO-CLASSES PSEUDO-CLASSES PSEUDO-CLASSES PSEUDO-CLASSES PSEUDO-CLASSES
  • 59. CSS FUNDAMENTALS: Build a strong foundation by solving real cases inarocket.com PSEUDO-CLASSES / NEGATION With this code all the elements of a header are shown in green, excluding all h1 headers. Selects elements that do not match a list of selectors. header :not(h1) {color: green} Syntax element:not(X) {style properties}
  • 60. CSS FUNDAMENTALS: Build a strong foundation by solving real cases inarocket.com HTML CSS Browser PSEUDO-CLASSES / NEGATION <body> <header> <h1>Company name</h1> <h1>Tagline</h1> <nav>Navigation goes here.</nav> <div>User not logged in.</div> </header> </body> header :not(h1) { color: green; } Web page title index.html Company name Tagline Product description. User not logged in. READY TO USE CODE
  • 61. CSS FUNDAMENTALS: Build a strong foundation by solving real cases inarocket.com HTML CSS Browser PSEUDO-CLASSES / NEGATION <body> <p class="mini">Paragraph goes here.</p> <p>Paragraph goes here.</p> <p class="mini">Paragraph goes here.</p> </body> .mini { color: black; } p:not(.mini) { color: green; } Web page title index.html Paragraph goes here. Paragraph goes here. Paragraph goes here. READY TO USE CODE
  • 62. CSS FUNDAMENTALS: Build a strong foundation by solving real cases inarocket.com TARGET & LANG UI ELEMENT STATES DYNAMIC NEGATIONSTRUCTURAL PSEUDO-CLASSES PSEUDO-CLASSES PSEUDO-CLASSES PSEUDO-CLASSES PSEUDO-CLASSES
  • 63. CSS FUNDAMENTALS: Build a strong foundation by solving real cases inarocket.com REFERENCE: W3C SOURCE: Selectors Level 3 by W3C.
  • 64. Learn front-end development at rocket speed inarocket.com by miguelsanchez.com YOU CAN CONTINUE THIS COURSE FOR FREE ON + READY TO USE CODE + QUIZZES + FREE UPDATES
  • 65. We respect your time
 No more blah blah videos. Just straight to the point slides with relevant information. Ready to use code
 Real code you can just copy and paste into your real projects. Step by step guides
 Clear and concise steps to build real use solutions. No missed points. Learn front-end development at rocket speed inarocket.com
  • 66. IN A ROCKET Learn front-end development at rocket speed CSS CSS FUNDAMENTALS Pseudo-class