Pseudo Classes
demo.html
demo.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Pseudo Class Demo</title>
<style>
body {
font-family: Arial, sans-serif;
padding: 20px;
}
.section {
margin-bottom: 30px;
}
/* USER ACTION */
.btn {
padding: 10px 16px;
background: lightblue;
border: 2px solid black;
cursor: pointer;
}
.btn:hover {
background: blue;
color: white;
}
.btn:active {
transform: scale(0.95);
}
input:focus {
border: 2px solid green;
outline: none;
}
/* LINK STATES */
a:link { color: blue; }
a:visited { color: purple; }
/* FORM STATES */
input:disabled {
background: #ccc;
}
input:checked {
accent-color: red;
}
/* STRUCTURAL */
ul li:first-child {
color: red;
}
ul li:last-child {
color: blue;
}
ul li:nth-child(2) {
font-weight: bold;
}
ul li:nth-child(even) {
background: #f2f2f2;
}
/* NOT selector */
p:not(.special) {
color: gray;
}
</style>
</head>
<body>
<h1>Pseudo-Classes Demo</h1>
<div class="section">
<h2>User Interaction</h2>
<button class="btn">Hover & Click Me</button><br><br>
<input type="text" placeholder="Focus me">
</div>
<div class="section">
<h2>Links</h2>
<a href="#">Normal Link</a><br>
<a href="https://example.com">Visited Link</a>
</div>
<div class="section">
<h2>Form States</h2>
<input type="checkbox"> Check me<br>
<input type="text" disabled placeholder="Disabled input">
</div>
<div class="section">
<h2>Structural Pseudo Classes</h2>
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
</ul>
</div>
<div class="section">
<h2>:not()</h2>
<p>Normal paragraph</p>
<p class="special">Special paragraph</p>
</div>
</body>
</html>
demo.html
demo.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Pseudo Class Demo</title>
<style>
body {
font-family: Arial, sans-serif;
padding: 20px;
}
.section {
margin-bottom: 30px;
}
/* USER ACTION */
.btn {
padding: 10px 16px;
background: lightblue;
border: 2px solid black;
cursor: pointer;
}
.btn:hover {
background: blue;
color: white;
}
.btn:active {
transform: scale(0.95);
}
input:focus {
border: 2px solid green;
outline: none;
}
/* LINK STATES */
a:link { color: blue; }
a:visited { color: purple; }
/* FORM STATES */
input:disabled {
background: #ccc;
}
input:checked {
accent-color: red;
}
/* STRUCTURAL */
ul li:first-child {
color: red;
}
ul li:last-child {
color: blue;
}
ul li:nth-child(2) {
font-weight: bold;
}
ul li:nth-child(even) {
background: #f2f2f2;
}
/* NOT selector */
p:not(.special) {
color: gray;
}
</style>
</head>
<body>
<h1>Pseudo-Classes Demo</h1>
<div class="section">
<h2>User Interaction</h2>
<button class="btn">Hover & Click Me</button><br><br>
<input type="text" placeholder="Focus me">
</div>
<div class="section">
<h2>Links</h2>
<a href="#">Normal Link</a><br>
<a href="https://example.com">Visited Link</a>
</div>
<div class="section">
<h2>Form States</h2>
<input type="checkbox"> Check me<br>
<input type="text" disabled placeholder="Disabled input">
</div>
<div class="section">
<h2>Structural Pseudo Classes</h2>
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
</ul>
</div>
<div class="section">
<h2>:not()</h2>
<p>Normal paragraph</p>
<p class="special">Special paragraph</p>
</div>
</body>
</html>