René's URL Explorer Experiment


Title: Pseudo-classes  |  web.dev

Open Graph Title: Pseudo-classes  |  web.dev

Description: Pseudo-classes let you apply CSS based on state changes. This means that your design can react to user input such as an invalid email address.

Open Graph Description: Pseudo-classes let you apply CSS based on state changes. This means that your design can react to user input such as an invalid email address.

Opengraph URL: https://web.dev/learn/css/pseudo-classes

X: @ChromiumDev

direct link

Domain: web.dev

google-signin-client-id157101835696-ooapojlodmuabs2do2vuhhnf90bccmoi.apps.googleusercontent.com
google-signin-scopeprofile email https://www.googleapis.com/auth/developerprofiles https://www.googleapis.com/auth/developerprofiles.award https://www.googleapis.com/auth/devprofiles.full_control.firstparty
og:site_nameweb.dev
og:typewebsite
theme-color#3740ff
NoneIE=Edge
og:imagehttps://web.dev/static/images/social-wide.jpg
og:image:width1200
og:image:height675
og:localeen
twitter:cardsummary
twitter:imagehttps://web.dev/static/images/social-wide.jpg

Links:

Skip to main content https://web.dev/learn/css/pseudo-classes#main-content
https://web.dev/
Resources https://web.dev/learn
HTML https://web.dev/html
CSS https://web.dev/css
JavaScript https://web.dev/javascript
Performance https://web.dev/performance
Accessibility https://web.dev/accessibility
Identity https://web.dev/identity
Learn HTML https://web.dev/learn/html
Learn CSS https://web.dev/learn/css
Learn JavaScript https://web.dev/learn/javascript
Learn AI https://web.dev/learn/ai
Learn Performance https://web.dev/learn/performance
Learn Accessibility https://web.dev/learn/accessibility
More courses https://web.dev/learn
AI and the web https://web.dev/explore/ai
Explore https://web.dev/explore
PageSpeed Insights https://pagespeed.web.dev/
Podcasts & shows https://web.dev/shows
Developer Newsletter https://web.dev/newsletter
About web.dev https://web.dev/about
Discover https://web.dev/discover
Baseline https://web.dev/baseline
How to use Baseline https://web.dev/how-to-use-baseline
Blog https://web.dev/blog
Case Studies https://web.dev/case-studies
Resources https://web.dev/learn
AI https://web.dev/learn/ai
Privacy https://web.dev/learn/privacy
Accessibility https://web.dev/learn/accessibility
HTML https://web.dev/learn/html
Images https://web.dev/learn/images
Responsive Design https://web.dev/learn/design
Forms https://web.dev/learn/forms
PWA https://web.dev/learn/pwa
CSS https://web.dev/learn/css
Performance https://web.dev/learn/performance
Testing https://web.dev/learn/testing
JavaScript https://web.dev/learn/javascript
https://web.dev/
Resources https://web.dev/learn
AI https://web.dev/learn/ai
Privacy https://web.dev/learn/privacy
Accessibility https://web.dev/learn/accessibility
HTML https://web.dev/learn/html
Images https://web.dev/learn/images
Responsive Design https://web.dev/learn/design
Forms https://web.dev/learn/forms
PWA https://web.dev/learn/pwa
CSS https://web.dev/learn/css
Performance https://web.dev/learn/performance
Testing https://web.dev/learn/testing
JavaScript https://web.dev/learn/javascript
Discover https://web.dev/discover
Baseline https://web.dev/baseline
How to use Baseline https://web.dev/how-to-use-baseline
Blog https://web.dev/blog
Case Studies https://web.dev/case-studies
Welcome to Learn CSS!https://web.dev/learn/css/welcome
Box Modelhttps://web.dev/learn/css/box-model
Selectorshttps://web.dev/learn/css/selectors
Nestinghttps://web.dev/learn/css/nesting
The cascadehttps://web.dev/learn/css/the-cascade
Specificityhttps://web.dev/learn/css/specificity
Inheritancehttps://web.dev/learn/css/inheritance
Colorhttps://web.dev/learn/css/color
Sizing Unitshttps://web.dev/learn/css/sizing
Layouthttps://web.dev/learn/css/layout
Flexboxhttps://web.dev/learn/css/flexbox
Gridhttps://web.dev/learn/css/grid
Logical Propertieshttps://web.dev/learn/css/logical-properties
Custom Propertieshttps://web.dev/learn/css/custom-properties
Spacinghttps://web.dev/learn/css/spacing
Pseudo-elementshttps://web.dev/learn/css/pseudo-elements
Pseudo-classeshttps://web.dev/learn/css/pseudo-classes
Bordershttps://web.dev/learn/css/borders
Shadowshttps://web.dev/learn/css/shadows
Focushttps://web.dev/learn/css/focus
Cursors and pointershttps://web.dev/learn/css/cursors-and-pointers
Z-index and stacking contextshttps://web.dev/learn/css/z-index
Anchor positioninghttps://web.dev/learn/css/anchor-positioning
Popover and dialoghttps://web.dev/learn/css/popover-and-dialog
Functionshttps://web.dev/learn/css/functions
Paths, shapes, clipping, and maskinghttps://web.dev/learn/css/paths-shapes-clipping-masking
Gradientshttps://web.dev/learn/css/gradients
Animationshttps://web.dev/learn/css/animations
Filtershttps://web.dev/learn/css/filters
Blend Modeshttps://web.dev/learn/css/blend-modes
Listshttps://web.dev/learn/css/lists
Countershttps://web.dev/learn/css/counters
Transitionshttps://web.dev/learn/css/transitions
View Transitions for SPAshttps://web.dev/learn/css/view-transitions-spas
Overflowhttps://web.dev/learn/css/overflow
Backgroundshttps://web.dev/learn/css/backgrounds
Text and typographyhttps://web.dev/learn/css/typography
Container querieshttps://web.dev/learn/css/container-queries
Conclusion and next stepshttps://web.dev/learn/css/conclusion
HTML https://web.dev/html
CSS https://web.dev/css
JavaScript https://web.dev/javascript
Performance https://web.dev/performance
Accessibility https://web.dev/accessibility
Identity https://web.dev/identity
Learn HTML https://web.dev/learn/html
Learn CSS https://web.dev/learn/css
Learn JavaScript https://web.dev/learn/javascript
Learn AI https://web.dev/learn/ai
Learn Performance https://web.dev/learn/performance
Learn Accessibility https://web.dev/learn/accessibility
More courses https://web.dev/learn
AI and the web https://web.dev/explore/ai
Explore https://web.dev/explore
PageSpeed Insights https://pagespeed.web.dev/
Podcasts & shows https://web.dev/shows
Developer Newsletter https://web.dev/newsletter
About web.dev https://web.dev/about
Read the announcementhttps://goo.gle/mwg-stable
web.dev https://web.dev/
Resources https://web.dev/learn
CSS https://web.dev/learn/css
The CSS Podcast - 015: Pseudo-classes https://thecsspodcast.libsyn.com/015-pseudo-selectors
selectorshttps://web.dev/learn/css/selectors
previous modulehttps://web.dev/learn/css/pseudo-elements
Sourcehttps://developer.mozilla.org/docs/Web/CSS/Reference/Selectors/:hover
:hoverhttps://developer.mozilla.org/docs/Web/CSS/:hover
Sourcehttps://developer.mozilla.org/docs/Web/CSS/Reference/Selectors/:active
Sourcehttps://developer.mozilla.org/docs/Web/CSS/Reference/Selectors/:focus
:focushttps://developer.mozilla.org/docs/Web/CSS/:focus
:focus-withinhttps://developer.mozilla.org/docs/Web/CSS/:focus-within
:focus-visiblehttps://developer.mozilla.org/docs/Web/CSS/:focus-visible
Sourcehttps://developer.mozilla.org/docs/Web/CSS/Reference/Selectors/:target
:targethttps://developer.mozilla.org/docs/Web/CSS/:target
Sourcehttps://developer.mozilla.org/docs/Web/CSS/Reference/Selectors/:link
:linkhttps://developer.mozilla.org/docs/Web/CSS/:link
:visitedhttps://developer.mozilla.org/docs/Web/CSS/:visited
security reasonshttps://developer.mozilla.org/docs/Web/CSS/Privacy_and_the_:visited_selector
Sourcehttps://developer.mozilla.org/docs/Web/CSS/Reference/Selectors/:disabled
:disabledhttps://developer.mozilla.org/docs/Web/CSS/:disabled
:enabledhttps://developer.mozilla.org/docs/Web/CSS/:enabled
Sourcehttps://developer.mozilla.org/docs/Web/CSS/Reference/Selectors/:checked
:checkedhttps://developer.mozilla.org/docs/Web/CSS/:checked
:indeterminatehttps://developer.mozilla.org/docs/Web/CSS/:indeterminate
Sourcehttps://developer.mozilla.org/docs/Web/CSS/Reference/Selectors/:placeholder-shown
:placeholder-shownhttps://developer.mozilla.org/docs/Web/CSS/:placeholder-shown
Sourcehttps://developer.mozilla.org/docs/Web/CSS/Reference/Selectors/:valid
:validhttps://developer.mozilla.org/docs/Web/CSS/:valid
:invalidhttps://developer.mozilla.org/docs/Web/CSS/:invalid
:in-rangehttps://developer.mozilla.org/docs/Web/CSS/:in-range
:requiredhttps://developer.mozilla.org/docs/Web/CSS/:required
:optionalhttps://developer.mozilla.org/docs/Web/CSS/:optional
Sourcehttps://developer.mozilla.org/docs/Web/CSS/Reference/Selectors/:first-child
:first-childhttps://developer.mozilla.org/docs/Web/CSS/:first-child
:last-childhttps://developer.mozilla.org/docs/Web/CSS/:last-child
Sourcehttps://developer.mozilla.org/docs/Web/CSS/Reference/Selectors/:only-child
:only-childhttps://developer.mozilla.org/docs/Web/CSS/:only-child
Sourcehttps://developer.mozilla.org/docs/Web/CSS/Reference/Selectors/:first-of-type
:first-of-typehttps://developer.mozilla.org/docs/Web/CSS/:first-of-type
:last-of-typehttps://developer.mozilla.org/docs/Web/CSS/:last-of-type
Sourcehttps://developer.mozilla.org/docs/Web/CSS/Reference/Selectors/:nth-child
:nth-child()https://developer.mozilla.org/docs/Web/CSS/:nth-child
:nth-of-type()https://developer.mozilla.org/docs/Web/CSS/:nth-of-type
the An+B microsyntaxhttps://www.w3.org/TR/css-syntax-3/#anb-microsyntax
nth-child testerhttps://css-tricks.com/examples/nth-child-tester/
quantity selector toolhttps://quantityqueries.com
Sourcehttps://developer.mozilla.org/docs/Web/CSS/Reference/Selectors/:only-of-type
:only-of-typehttps://developer.mozilla.org/docs/Web/CSS/:only-of-type
Sourcehttps://developer.mozilla.org/docs/Web/CSS/Reference/Selectors/:empty
:emptyhttps://developer.mozilla.org/docs/Web/CSS/:empty
Sourcehttps://developer.mozilla.org/docs/Web/CSS/Reference/Selectors/:is
:is()https://developer.mozilla.org/docs/Web/CSS/:is
Sourcehttps://developer.mozilla.org/docs/Web/CSS/Reference/Selectors/:not
:not()https://developer.mozilla.org/docs/Web/CSS/:not
Previous arrow_back Pseudo-elements https://web.dev/learn/css/pseudo-elements
Next Borders arrow_forward https://web.dev/learn/css/borders
Creative Commons Attribution 4.0 Licensehttps://creativecommons.org/licenses/by/4.0/
Apache 2.0 Licensehttps://www.apache.org/licenses/LICENSE-2.0
Google Developers Site Policieshttps://developers.google.com/site-policies
File a bug https://issuetracker.google.com/issues/new?component=1400680&template=1857359
See open issues https://issuetracker.google.com/issues?q=status:open%20componentid:1400680&s=created_time:desc
Chrome for Developers https://developer.chrome.com/
Chromium updates https://blog.chromium.org/
Case studies https://web.dev/case-studies
Podcasts & shows https://web.dev/shows
@ChromiumDev on X https://twitter.com/ChromiumDev
YouTube https://www.youtube.com/user/ChromeDevelopers
Chrome for Developers on LinkedIn https://www.linkedin.com/showcase/chrome-for-developers
RSS https://web.dev/static/blog/feed.xml
Terms https://policies.google.com/terms
Privacy https://policies.google.com/privacy
Manage cookies https://web.dev/learn/css/pseudo-classes

Viewport: width=device-width, initial-scale=1

URLs of crawlers that visited me.