CSS Tutorial : Introduction of the CSS Pseudo-classes :active, :target, :focus, :checked

CSS Tutorial : Introduction of the CSS Pseudo-classes :active, :target, :focus, :checked

In this CSS tutorial, we will discuss the four more Pesudo-classes ":active, :target, :focus, :checked".


CSS Tutorial


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>


CSS Tutorial


2. :target class

In CSS :target is a multi-class class that is applied when a specific element is targeted via the URL's hashtext. In simple terms, when you click on a link, whatever element is pointed to by the :target element gets the required styles.

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>

CSS Tutorial

3. :focus class

In CSS :focus is a pseudo-class that is applied when an element has focus, i.e. when the user's cursor hovers over that element or when that element is selected.

When you click on a form input field, button, or link, or tab with the keyboard, that element gets "focus". You can use :focus to give the element special styles, such as changing the color, highlighting the border, or changing the 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;
            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>

CSS Tutorial

3. :checked class

In CSS: checked is a pseudo-class that is applied when an input element's state becomes "checked". It is primarily used for checkboxes and radio buttons.

When the user ticks a checkbox, or selects a radio button, the element with the :tab pseudo-class is styled.

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>

CSS Tutorial

Post a Comment

Previous Post Next Post

Recent in Technology