How to Use CSS Pseudo-Classes

► 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: github.com/craigabourne/css-p...
CodePen Start: codepen.io/craigabourne/pen/Z...
CodePen End: codepen.io/craigabourne/pen/V...
Code Pen Even/Odd: codepen.io/craigabourne/pen/x...
CodePen :not(): codepen.io/craigabourne/pen/x...
Nth-child table row: codepen.io/craigabourne/pen/x...
► Links used in the video:
MDN Selectors: developer.mozilla.org/en-US/d...
MDN Pseudo Classes: developer.mozilla.org/en-US/d...
Privacy and the :visited selector: developer.mozilla.org/en-US/d...
CSS Specificity: css-tricks.com/specifics-on-c...
► Other types of CSS Selectors:
Element, Class, & ID Selectors: • CSS Selector Basics - ...
Child & Descendant Selectors: • CSS Child and Descenda...
Sibling Selectors: • Adjacent and General S...
Universal & Attribute Selectors: • Universal and Attribut...
Pseudo-elements: • How to Manipulate Cont...
► This video is part of the CSS for Absolute Beginners playlist: • CSS for Absolute Begin...
► Social Media:
/ craigabourne
/ craigabourne
► Code & Projects:
github.com/craigabourne
codepen.io/craigabourne

[@craigabourne]

Learn CSS: kzbin.info/aero/PL4cTxE4s2XIYwGURywyDlkfmhmRC5FaUR

[@shilohdalby8447]

I lay my mark here, the best pseudo class tutorial on youtube

[@craigabourne]

Thank you 🙏

[@georgeepohcuaw2545]

Totally new perspective on pseudo classes. Thx a ton.

[@craigabourne]

You're welcome!

[@marinstrup]

Thank you so much! Your video is exactly what I need as I just started with CSS. You have the best videos. Keep it up!

[@craigabourne]

Thanks, will do!

[@besjanaelezi]

Thanks Craig, I would like to make 100 likes but not possible 😍 You have build a trust over your videos. I would always search in your channel better than Google. Even if i use google, I type your name to check your contents which are better than others. Keep up amazing work 👍

[@craigabourne]

Wow, thank you! Love it. Means a lot ❤️

[@somnarchaudhary]

Ah man. This is sooo good. You are genuinely one of the best actual teachers in the code space. Wishing big things for you. Every video is fire

[@craigabourne]

Wow, thank you! Really appreciate it.

[@balaeinstein8710]

This css content is phenomenal . Thanks a lot sir. Please continue this series

[@craigabourne]

Thanks, I really appreciate it! There will be around 40 CSS vids in total eventually 👍

[@balaeinstein8710]

@@craigabourne eagerly waiting sir😊

[@kajabrooks]

Amazing again! Keep going 👍

[@craigabourne]

Thank you! Will do!

[@gambo2003]

Thank u for the amazing content

[@craigabourne]

My pleasure!

[@sophiawokoma3711]

I was wondering if you could help, I downloaded the file into vs code , but for some reasons any changes that I make in the start code for the pseudo.css, does not display in the browser , what reasons could there be for this ?

[@craigabourne]

Hi Sophie! That is strange. I have just tried it myself and it is working fine for me. The only thing I can think of is that you are not refreshing the browser after making a change. You can get a great extension in VS Code called Live Server that does this automatically for you (marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer or just search 'live server' in the extension tab in VS Code). To make it work, add the extension, then right-click your index.html file and select 'Open with Live Server'. It will open in your default browser. Then any change you make will be automatically shown. Hope that helps! If not let me know.

[@ovidiu2394]

:hi