9- Learn CSS Fundamentals / Pseudo-classes

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 speciﬁed by a keyword.
a:link {color: green}
Syntax selector:pseudo-class {style properties}

TARGET &
LANG
UI ELEMENT
STATES
DYNAMIC
NEGATIONSTRUCTURAL
PSEUDO-CLASSES PSEUDO-CLASSES PSEUDO-CLASSES
PSEUDO-CLASSES PSEUDO-CLASSES

Dynamic  
pseudo-classes
:link

:visited

:hover

:active

:focus

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).

Dynamic  
pseudo-classes
:link

:visited

:hover

:active

:focus
How to remember them?
😍 LOVE
😤 HATE

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}

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

PSEUDO-CLASSES / TARGET & LANG
With this code the terms fragment identiﬁer is shown in green.
Selects a fragment identiﬁer that has a location within a resource.
h2:terms {color: green}
Syntax selector:target {style properties}

HTML CSS
Browser
<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

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}

HTML CSS
Browser
<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

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}

With this code only the disabled inputs are shown in green.
Selects any disabled element.
input:disabled {color: green}
Syntax selector:enabled {style properties}

HTML CSS
Browser
<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

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}

HTML CSS
Browser
<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

Structural  
pseudo-classes
:root
:empty

:ﬁrst-child

:last-child

:nth-child()

:only-child

:ﬁrst-of-type

:last-of-type

:nth-of-type()

:only-of-type

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}

HTML CSS
Browser
<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

HTML CSS
Browser
<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

Structural  
pseudo-classes
:root

:empty
:ﬁrst-child

:last-child

:nth-child()

:only-child

:ﬁrst-of-type

:last-of-type

:nth-of-type()

:only-of-type

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}

HTML CSS
Browser
<body>
<article>
<h2>Item 1</h2>
<p>Item description.</p>
</article>
<article></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

Structural  
pseudo-classes
:root

:empty

:ﬁrst-child
:last-child

:nth-child()

:only-child

:ﬁrst-of-type

:last-of-type

:nth-of-type()

:only-of-type

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}

HTML CSS
Browser
<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

Structural  
pseudo-classes
:root

:empty

:ﬁrst-child

:last-child
:nth-child()

:only-child

:ﬁrst-of-type

:last-of-type

:nth-of-type()

:only-of-type

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}

HTML CSS
Browser
<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

Structural  
pseudo-classes
:root

:empty

:ﬁrst-child

:last-child

:nth-child()
:only-child

:ﬁrst-of-type

:last-of-type

:nth-of-type()

:only-of-type

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}

li:nth-child(4) { color: green; }
• Item 1

• Item 2

• Item 3

• Item 4

• Item 5

• Item 6

• Item 7

• Item 8

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
Diﬀerence

• Item 1

• Item 2

• Item 3

• Item 4

• Item 5

• Item 6

• Item 7

• Item 8
First term
Diﬀerence

li:nth-child(odd) { color: green; }
• Item 1

• Item 2

• Item 3

• Item 4

• Item 5

• Item 6

• Item 7

• Item 8

li:nth-child(even) { color: green; }
• Item 1

• Item 2

• Item 3

• Item 4

• Item 5

• Item 6

• Item 7

• Item 8

• Item 1

• Item 2

• Item 3

• Item 4

• Item 5

• Item 6

• Item 7

• Item 8
First term
Diﬀerence

Structural  
pseudo-classes
:root

:empty

:ﬁrst-child

:last-child

:nth-child()

:only-child
:ﬁrst-of-type

:last-of-type

:nth-of-type()

:only-of-type

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}

HTML CSS
Browser
<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

Structural  
pseudo-classes
:root

:empty

:ﬁrst-child

:last-child

:nth-child()

:only-child

:ﬁrst-of-type
:last-of-type

:nth-of-type()

:only-of-type

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}

HTML CSS
Browser
<body>
<main>
<h2>Featured product</h2>
<p>Product description.</p>
<h2>Second product</h2>
</main>
</body>
p:first-of-type { color: green; }
Web page title
index.html
Featured product
Product description.
Second product
READY TO USE CODE

Structural  
pseudo-classes
:root

:empty

:ﬁrst-child

:last-child

:nth-child()

:only-child

:ﬁrst-of-type

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

:only-of-type

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}

HTML CSS
Browser
<body>
<main>
<h2>First product</h2>
<h2>Expiring product</h2>
<p>Last units available.</p>
</main>
</body>
p:last-of-type { color: green; }
Web page title
index.html
First product
Expiring product
Last units available.
READY TO USE CODE

Structural  
pseudo-classes
:root

:empty

:ﬁrst-child

:last-child

:nth-child()

:only-child

:ﬁrst-of-type

:last-of-type

:nth-of-type()
:only-of-type

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}

HTML CSS
Browser
<body>
<main>
<h2>Product 1</h2>
<h2>Product 2</h2>
<h2>Product 3</h2>
<h2>Product 4</h2>
</main>
</body>
p:nth-of-type(odd) { color: green; }
Web page title
index.html
Product 1
Product 2
Product 3
Product 4
READY TO USE CODE

Structural  
pseudo-classes
:root

:empty

:ﬁrst-child

:last-child

:nth-child()

:only-child

:ﬁrst-of-type

:last-of-type

:nth-of-type()

:only-of-type

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}

HTML CSS
Browser
<body>
<article>
<h2>Product 1</h2>
<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
Description continues here.
Product 2
Out of stock.
READY TO USE CODE

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}

HTML CSS
Browser
<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
User not logged in.
READY TO USE CODE

HTML CSS
Browser
<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.
READY TO USE CODE

REFERENCE: W3C
SOURCE: Selectors Level 3 by W3C.

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.
inarocket.com

9- Learn CSS Fundamentals / Pseudo-classes

Recommended

More Related Content

What's hot (20)

Similar to 9- Learn CSS Fundamentals / Pseudo-classes (20)

More from In a Rocket (11)

Recently uploaded (15)

9- Learn CSS Fundamentals / Pseudo-classes