In this CSS tutorial, we will discuss the four more Pesudo-classes ":active, :target, :focus, :checked".
1. :active class
In CSS :active is a pseudo-class that is applied when an element is in the "active" state, i.e. when the user is clicking or interacting with the element.
When you press (click or touch a mouse) a link, button, or other clickable element, that element temporarily goes into the :active state. Can you style our element, such as changing its color or background?
Example :-
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>RAYS Coding: Pseudo-class Example</title>
<style>
body {
background: #1b1b1b;
color: #ffffff;
font-family: Arial, sans-serif;
text-align: center;
padding: 50px;
}
button {
background: #4CAF50;
color: white;
border: none;
padding: 10px 20px;
font-size: 16px;
cursor: pointer;
transition: background 0.3s, transform 0.1s, box-shadow 0.1s;
}
button:active {
background: red; /* Darker green when the button is clicked */
transform: scale(0.95); /* Slightly shrink the button when clicked */
box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2); /* Add a shadow effect */
}
</style>
</head>
<body>
<h1>Welcome to RAYS Coding</h1>
<p>Click the button below to see the :active pseudo-class in action!</p>
<button>Click Me</button>
<h1 style="margin-top: 2em;text-align: center;margin-bottom: 1em;font-size: 5em;">CSS Tutorial</h1>
</body>
</html>
2. :target class
Example :-
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>RAYS Coding: :target Pseudo-class Example</title>
<style>
body {
background: #1b1b1b;
color: #ffffff;
font-family: Arial, sans-serif;
padding: 20px;
}
h1 {
text-align: center;
margin-top: 2em;
margin-bottom: 1em;
font-size: 5em;
}
/* Basic style for the content */
.section {
margin: 20px;
padding: 20px;
background-color: #333;
border-radius: 8px;
transition: background-color 0.3s ease;
}
/* Style when a section is targeted */
.section:target {
background-color: #444;
border: 2px solid #ff6347; /* Adding a red border when targeted */
}
/* Links to navigate between sections */
.links {
text-align: center;
}
.links a {
color: #ff6347;
text-decoration: none;
font-size: 1.2em;
margin: 0 15px;
}
</style>
</head>
<body>
<div class="links">
<a href="#section1">Section 1</a>
<a href="#section2">Section 2</a>
<a href="#section3">Section 3</a>
</div>
<div id="section1" class="section">
<h2>Section 1</h2>
<p>This is the first section of the page.</p>
</div>
<div id="section2" class="section">
<h2>Section 2</h2>
<p>This is the second section of the page.</p>
</div>
<div id="section3" class="section">
<h2>Section 3</h2>
<p>This is the third section of the page.</p>
</div>
<h1 style="margin-top: 2em;text-align: center;margin-bottom: 1em;font-size: 5em;">CSS Tutorial</h1>
</body>
</html>
3. :focus class
Example :-
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>RAYS Coding: Pseudo-class Example</title>
<style>
body {
background: #1b1b1b;
color: #ffffff;
font-family: Arial, sans-serif;
padding: 20px;
}
h1 {
margin-top: 2em;
text-align: center;
margin-bottom: 1em;
font-size: 5em;
}
/* Apply focus effect to input fields */
input:focus {
outline: none; /* Remove default outline */
border: 2px solid #00bcd4; /* Add a custom border on focus */
background-color: #333333; /* Darken background on focus */
color: #ffffff;
padding: 10px;
transition: border-color 0.3s ease, background-color 0.3s ease;
}
/* Style for input fields */
input {
background-color: #555555;
color: #ffffff;
padding: 10px;
border: 1px solid #333;
border-radius: 5px;
font-size: 1em;
width: 300px;
transition: all 0.3s ease;
}
</style>
</head>
<body>
<form>
<label for="username">Username:</label><br>
<input type="text" id="username" name="username" placeholder="Enter your username"><br><br>
<label for="password">Password:</label><br>
<input type="password" id="password" name="password" placeholder="Enter your password"><br><br>
</form>
<h1 style="margin-top: 2em;text-align: center;margin-bottom: 1em;font-size: 5em;">CSS Tutorial</h1>
</body>
</html>
3. :checked class
Example :-
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>RAYS Coding: Pseudo-class Example</title>
<style>
body {
background: #1b1b1b;
color: #ffffff;
font-family: Arial, sans-serif;
padding: 20px;
}
h1 {
margin-top: 2em;
text-align: center;
margin-bottom: 1em;
font-size: 5em;
}
/* Style for checkbox and radio buttons */
input[type="checkbox"],
input[type="radio"] {
margin-right: 10px;
accent-color: #00bcd4; /* Custom accent color for checkboxes and radio buttons */
}
/* Style when the checkbox is checked */
input[type="checkbox"]:checked {
background-color: #00bcd4; /* Change background color when checked */
border-color: #00bcd4; /* Match border color to accent */
}
/* Style when the radio button is checked */
input[type="radio"]:checked {
background-color: #00bcd4; /* Change background color when checked */
}
/* Optional: Style the label for a more interactive feel */
label {
display: inline-block;
margin-right: 20px;
font-size: 1.2em;
cursor: pointer;
}
</style>
</head>
<body>
<form>
<label for="check1">Accept Terms & Conditions</label>
<input type="checkbox" id="check1" name="check1"><br><br>
<label for="check2">Receive Newsletter</label>
<input type="checkbox" id="check2" name="check2"><br><br>
<label for="radio1">Option 1</label>
<input type="radio" id="radio1" name="options" value="option1"><br><br>
<label for="radio2">Option 2</label>
<input type="radio" id="radio2" name="options" value="option2"><br><br>
</form>
<h1 style="margin-top: 2em;text-align: center;margin-bottom: 1em;font-size: 5em;">CSS Tutorial</h1>
</body>
</html>