Building Your Learning Module...
Getting things ready for you!
Find videos you like?
Save to resource drawer for future reference!
:selector:pseudo-class { property: value; }Example: button:hover
When mouse hovers over element
a:hover { color: red; }When element is being clicked
button:active { transform: scale(0.95); }When element has keyboard focus
input:focus { border: 2px solid blue; }Links that have been visited
a:visited { color: purple; }<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
<div class="container">
<h1>🎯 Pseudo-Classes Demo</h1>
<div class="demo-section">
<div class="label">:hover - Hover over me!</div>
<button class="hover-btn">Hover Button</button>
</div>
<div class="demo-section">
<div class="label">:active - Click and hold me!</div>
<button class="active-btn">Click Me</button>
</div>
<div class="demo-section">
<div class="label">:focus - Click or tab into this input</div>
<input type="text" class="focus-input" placeholder="Click to focus...">
</div>
<div class="demo-section">
<div class="label">:visited - Click this link</div>
<a href="#visited" class="link">Click me to see :visited effect</a>
</div>
<div class="note">
Try hovering, clicking, and tabbing through elements!
</div>
</div>
</body>
</html>Loading preview...
First child of parent
li:first-childLast child of parent
li:last-childSpecific child by number
li:nth-child(2)Odd numbered children
tr:nth-child(odd)Even numbered children
tr:nth-child(even)Only child of parent
p:only-child:checkedChecked checkboxes/radios
:disabledDisabled form elements
:enabledEnabled form elements
:validValid form inputs
:invalidInvalid form inputs
:requiredRequired form fields