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:

► Links used in the video:

► Other types of CSS Selectors:

► Social Media:

► Code & Projects:

Рекомендации по теме

Комментарии

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

shilohdalby

Totally new perspective on pseudo classes. Thx a ton.

georgeepohcuaw

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!

marinstrup

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

somnarchaudhary

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

balaeinstein

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 👍

besjanaelezi

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 ?

sophiawokoma

How to Use CSS Pseudo-Classes

Learn CSS pseudo-classes in 7 minutes! ☟

CSS Pseudo-classes: in 100 Seconds

The new CSS pseudo-classes explained - :is() :where() :has()

Learn CSS pseudo classes in 5 minutes 👨‍👧‍👦

CSS pseudo classes (#7) 🦄

CSS Pseudo-elements :: in 100 Seconds

Learn CSS pseudo-elements in 5 minutes! ✔

Learn CSS Pseudo Elements In 8 Minutes

How to use CSS pseudo-classes for styling typographic elements (⏩ Speedrun)

Pseudo Classes CSS , Pseudo Elements, ::before and ::after in CSS | Web Development Course #31

CSS’s :target pseudo-class is surprisingly powerful

CSS Tutorial: Pseudo-Classes | Web Development | by Rahul Chaudhary

How to Use CSS Pseudo-Classes

CSS Pseudo-Classes vs Pseudo-Elements | Pseudo-Selectors Tutorial

HTML & CSS Crash Course Tutorial #9 - Pseudo Classes & Elements

W3Schools CSS Pseudo-classes Tutorial

CSS Tutorial For Beginners | Classes & Pseudo Classes In Bricks

CSS Pseudo Classes Explained - #1 placeholder-shown

#31 CSS Pseudo-Class | Link | Visited | Hover | Active | CSS Tutorial

use of focus pseudo class.#css #html #javascript #webdesign #webdesigner #html5 #shorts

Boost Your CSS Workflow with :where() Pseudo-Class Selector

Unleash the Power of :nth-last-of-type() Pseudo-Class Selector

:not( ) CSS Pseudo-Class #Shorts #Romeo #CSS

Customise Your Dynamic Data With CSS Pseudo Classes