CSS Pseudo-classes and Pseudo-elements

CSS pseudo-classes and pseudo-elements are special types of selectors that can be used to target elements in specific states or to insert content into the document.

Pseudo-classes

Pseudo-classes are used to target elements in specific states, such as when the element is focused, hovered over, or selected.

:focus: This pseudo-class is used to target elements that are focused.
:hover: This pseudo-class is used to target elements that are hovered over.
:active: This pseudo-class is used to target elements that are clicked.
:checked: This pseudo-class is used to target elements that are checked.
:disabled: This pseudo-class is used to target elements that are disabled.

Pseudo-elements

Pseudo-elements are used to insert content into the document, such as the first letter of an element, the first line of an element, or the before and after content of an element.

::first-letter: This pseudo-element is used to insert the first letter of an element.
::first-line: This pseudo-element is used to insert the first line of an element.
::before: This pseudo-element is used to insert content before an element.
::after: This pseudo-element is used to insert content after an element.

Example

<!DOCTYPE html>
<html>
<head>
<title>CSS Pseudo-classes and Pseudo-elements Demo</title>
<style>
a:hover {
  color: red;
}

.element::before {
  content: "This is before the element content.";
}

.element::after {
  content: "This is after the element content.";
}
</style>
</head>
<body>
<a href="#">This is a link.</a>
<p class="element">This is the element content.</p>
</body>
</html>

Task

Make the button Submit change the background color to #007BFF and the color to #fff. Insert empty content, with display block, height of 3px, and background color #007BFF after section h2. Run the code and experiment with the code to get used to it.

<!DOCTYPE html>
<html>
<head>
    <title>My Portfolio</title>
    <style>
        body {
            line-height: 1.6;
            background-image: url(https://learnwith.tumkurlab.com/wp-content/uploads/2023/10/19449741-scaled.jpg);
            background-size: cover;
        }
        header { 
            color: #fff;
            background-color: #333;
            font-family: 'Arial', sans-serif;
            padding: 20px;
        }
        ul { 
            color: #007BFF;
            font-family: 'Roboto', sans-serif;
            font-weight: bold;
            margin: 10px;
         }
        ul li {
            margin: 5px 0;
        }
        ol {
            border: 2px solid #ccc;
            padding-left: 20px;
        }
         ol li {
            font-style: italic;
         }
         header h1 { 
            font-size: 36px;
            line-height: 1.2;
        }
         h1, footer {
           text-align: center;
        }
        form {
            background-color: #f2f2f2; /* Light gray */
            border-radius: 10px;
            width: 80%;
            margin: 0 auto;
            padding: 10px;
            box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2);
        }
        /* Add the code below */
         
         /* Add the code above */
         @media screen and (max-width: 600px) {
            header img {
                float: none; /* Remove float */
                margin-right: 0;
            }
        
            header h1 {
                font-size: 24px;
            }
        }
     </style>
</head>
<body data-rsssl=1>
    <header>
        <h1>Welcome to <i>My Portfolio<i/></h1>
        <img decoding="async" src="https://learnwith.tumkurlab.com/wp-content/uploads/2023/09/pexels-cong-h-1404819.jpg" alt="Cat the Dev." />
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed purr-sollicitudin, ipsum ac varius catnip, tortor purr-tincidunt tortor, in scelerisque massa metus sit amet lectus. Phasellus auctor, tortor non varius suscipit, lorem miow bibendum ipsum, vel sodales felis arcu ac leo. Fusce id nibh purr-lacinia felis cursus suscipit. Nullam eget miow-cat amet neque volutpat condimentum. Proin in tempus metus. Nulla facilisi. Nulla miow felis, dignissim id justo vel, dictum venenatis justo.

Aenean ut ligula miow ipsum dolor sit amet meow consectetur adipiscing elit. Integer ac est ut metus bibendum fringilla. Curabitur blandit, turpis eget purr-eleifend consectetur, felis felis blandit ipsum, nec gravida tortor nisi eget ligula. Fusce metus velit, bibendum eget scelerisque a, purr-cursus quis nunc. Nulla meow felis, lacinia vitae sapien quis, venenatis cursus ipsum. Maecenas miow eu odio non purr-convallis. Meow eget nulla id nulla ultricies ultricies. Nullam non purr-sapien, ac venenatis miow. Integer eu sapien vel urna miow vestibulum. Fusce non purr-risus, eu vulputate metus.

Purr velit libero, scelerisque ut neque sed, viverra tristique justo. Maecenas metus felis, miow nec iaculis ut, dignissim ac purr-est. Aliquam erat volutpat. Aenean miow, arcu nec vestibulum venenatis, leo urna convallis purr-scelerisque. Suspendisse potenti. Suspendisse miow libero, pellentesque a purr-suscipit eget, pharetra id est. Meow eget metus quis quam tincidunt laoreet. Maecenas nec ipsum meow ipsum euismod malesuada. Sed vel ipsum sed urna gravida eleifend. Nulla eget felis eu nibh dictum imperdiet. Nulla nec semper lacus, quis vulputate purr-miow in fermentum. Ut quis purr-tortor et nunc scelerisque ultricies. Maecenas sed miow non miow volutpat elementum.
</p>
    </header>
    <section>
    <h2>Skills</h2>
    <ul>
        <li>HTML</li>
        <li>CSS</li>
        <li>JavaScript</li>
    </ul>
</section>
<section>
    <h2>Projects</h2>
    <ol>
        <li>Portfolio Website</li>
        <li>E-commerce App</li>
        <li>Blog Website</li>
    </ol>
</section>
<section>
    <h2>Education</h2>
    <table border="1" cellpadding="10" cellspacing="5">
    <tr>
        <th>Position</th>
        <th>Company</th>
        <th>Duration</th>
    </tr>
    <tr>
        <td>Web Developer</td>
        <td>TumkurLab</td>
        <td>2020-2022</td>
    </tr>
</table>
</section>
<section>
    <h2>Contact Me</h2>
    <form action="">
  <label for="name">Name:</label>
  <input type="text" id="name" name="name">
  <br>
  <label for="email">Email:</label>
  <input type="email" id="email" name="email">
  <br>
  <input type="submit" value="Submit">
</form>
</section>
    <footer>
        © 2023 My Portfolio. Created by <a href="https://example.com">Your Name</a>
    </footer>
</body>

Conclusion

CSS pseudo-classes and pseudo-elements are a powerful tool for targeting elements in specific states and for inserting content into the document. By understanding how pseudo-classes and pseudo-elements work, you can create web pages that are more dynamic and interactive.

Here are some tips for using pseudo-classes and pseudo-elements:

Use pseudo-classes to target elements in specific states, such as when the element is focused, hovered over, or selected.
Use pseudo-elements to insert content into the document, such as the first letter of an element, the first line of an element, or the before and after content of an element.
Use pseudo-classes and pseudo-elements together to create more complex and dynamic effects.

CSS Pseudo-classes and Pseudo-elements

Add LearnWebstack.com to your Homescreen!