How to Use CSS Pseudo-Classes

Published: 21 June 2021
on channel: Craig A. Bourne

1,950

101

► Pseudo-classes specify a unique state of the element that has been triggered due to user interaction.

A common pseudo-class that we are all familiar with is the :hover.

Our pages will usually be full of links and buttons for users to click, and we would ordinarily set separate styles that only come in to force when the user hovers their cursor over the element. This change in styles informs the user that the element is interactive and can be clicked.

For example - a:hover { }

In this video, we will look at the :hover pseudo-class, plus
:visited
:link
:root
:first-child
:last-child
:first-of-type
:last-of-type
:nth-child() + nth term, and odd & even keywords
:disabled
:checked
:required
:not ( )

In addition to these, we will discuss visited links and privacy, and take a brief look at the CSS concept of specificity.

► Timestamps:
0:00 Start
1:49 - GitHub Repo
2:06 - CodePen
2:55 - :hover
5:49 - :visited & link
7:14 - Privacy and the :visited selector:
8:45 - :root
10:09 - Brief word on specificity
12:35 - :first-child & :last-child
13:40 - :first-of-type & :last-of-type
17:03 - :nth-child()
19:50 - :nth-child() - odd & even keywords
20:36 - Using :nth-child() to style table rows
21:00 - :disabled
22:42 - :checked
23:24 :required
24:00 Negation :not()

► Get the code:
GitHub Repo: https://github.com/craigabourne/css-p...
CodePen Start: https://codepen.io/craigabourne/pen/Z...
CodePen End: https://codepen.io/craigabourne/pen/V...
Code Pen Even/Odd: https://codepen.io/craigabourne/pen/x...
CodePen :not(): https://codepen.io/craigabourne/pen/x...
Nth-child table row: https://codepen.io/craigabourne/pen/x...

► Links used in the video:
MDN Selectors: https://developer.mozilla.org/en-US/d...
MDN Pseudo Classes: https://developer.mozilla.org/en-US/d...
Privacy and the :visited selector: https://developer.mozilla.org/en-US/d...
CSS Specificity: https://css-tricks.com/specifics-on-c...

► Other types of CSS Selectors:
Element, Class, & ID Selectors:    • CSS Selector Basics - Element, Class,...
Child & Descendant Selectors:    • CSS Child and Descendant Selectors
Sibling Selectors:    • Adjacent and General Sibling Selector...
Universal & Attribute Selectors:    • Universal and Attribute Selectors in CSS
Pseudo-elements:    • How to Manipulate Content With CSS Ps...

► This video is part of the CSS for Absolute Beginners playlist:    • CSS for Absolute Beginners

► Social Media:
  / craigabourne
  / craigabourne

► Code & Projects:
https://github.com/craigabourne
https://codepen.io/craigabourne

Watch video How to Use CSS Pseudo-Classes online without registration, duration hours minute second in high quality. This video was added by user Craig A. Bourne 21 June 2021, don't forget to share it with your friends and acquaintances, it has been viewed on our site 1,950 once and liked it 101 people.

106