CSS Tutorial : Introduction of the CSS Pseudo-classes :first-child, :last-child, :nth-child(), :nth-of-type()

CSS Tutorial : Introduction of the CSS Pseudo-classes :first-child, :last-child, :nth-child(), :nth-of-type()

byRAYS CODING -
0
In this CSS tutorial, We will see the "Pseudo selectors". These selectors are called also "Pseudo-classes" and "Pseudo elements". These selectors allow you to change the style of the HTML elements without changing the HTML structure.

CSS TUTORIAL

List  of  the Pseudo-classes

The CSS 32 Pseudo classes are available and some are mostly used. In this article, we will see only four classes, and the other in the next five articles.

CSS TUTORIAL

1. :first-child

The ":first-child" CSS pseudo-class targets the first child of an element. If the parent element contains multiple child elements, the first-child element ":first-child" pseudo-class is used.

SYNTAX

<style>
    element:first-child {
        /* styles */
    }
</style>

Example

Assume that you want to change the color of the first item on the unordered list. So you can do this by the ":first-child" Pseudo class.

<!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-classes</title>
    <style>
        body {
            background: #1b1b1b;
        }
        ul li {
            color: #fff;
        }
        ul li:first-child {
            color: royalblue;
            font-family: sans-serif;
            font-weight: bold;
            font-size: 30px;
        }
    </style>
</head>
<body>
    <ul>
        <li>Home</li>
        <li>About</li>
        <li>Services</li>
        <li>Team</li>
    </ul>
</body>
</html>

CSS TUTORIAL

2. :last-child

The ":last-child" CSS pseudo-class is used to target the last child element within its parent. It applies styles to the last element in a group of sibling elements.

SYNTAX

<style>
    element:last-child {
        /* styles */
    }
</style>

Example

Assume that you want to change the color of the last item on the unordered list. So you can do this by the ":last-child" Pseudo class.

<!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-classes</title>
    <style>
        body {
            background: #1b1b1b;
        }
        ul li {
            color: #fff;
        }
        ul li:last-child {
            color: tomato;
            font-family: sans-serif;
            font-weight: bold;
            font-size: 30px;
            text-shadow: 0 0  15px tomato;
            letter-spacing: 15px;
        }
    </style>
</head>
<body>
    <ul>
        <li>Home</li>
        <li>About</li>
        <li>Services</li>
        <li>Team</li>
    </ul>
</body>
</html>

CSS Tutorial

3. :nth-child(n)

The :nth-child(n) CSS pseudo-class is a selector that applies styles to an element based on the number of its positions. This means that you can apply styles to a certain number of elements inside a parent, counting their positions.

SYNTAX

<style>
    element:nth-child(n) {
        /* style yahan apply hoti hai */
    }
</style>

Example

Suppose you want to change the color of the first, and third items in an unordered list. You can do this by using the ":nth-child()" pseudo-class.

<!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-classes</title>
    <style>
        body {
            background: #1b1b1b;
        }
        ul li {
            color: #fff;
        }
        ul li:nth-child(1),ul li:nth-child(3) {
            color: tomato;
            font-family: sans-serif;
            font-weight: bold;
            font-size: 30px;
            text-shadow: 0 0  15px tomato;
            letter-spacing: 15px;
        }
    </style>
</head>
<body>
    <ul>
        <li>Home</li>
        <li>About</li>
        <li>Services</li>
        <li>Team</li>
    </ul>
</body>
</html>

css tutorial

4. :nth-last-child(n)

The ":nth-last-child()" is a CSS pseudo-class that targets the element that is nth position from the last of its parent. This means that we use ":nth-last-child()" when we want to implement CSS targeting an element from the last.

SYNTAX

<style>
    element:nth-last-child(n) {
        /* styles */
    }
</style>

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-classes</title>
    <style>
        body {
            background: #1b1b1b;
            color: white;
        }
        ul li:nth-last-child(2) {
            color: red;
            font-weight: bold;
        }
        ul li:nth-last-child(4) {
            color: #fff;
            letter-spacing: 4px;
            font-family: sans-serif;
            text-shadow: 0  0  10px #fff;
            font-weight: bold;
        }
        a:nth-last-child(1) {
            color: #00ffff;
        }
    </style>
</head>
<body>
    <ul>
        <li>Home</li>
        <li>About</li>
        <li>Services</li>
        <li>Team</li>
    </ul>
    <p>
        Welcome to the RAYS Coding website! We offer a wide range of tutorials and resources to help you learn coding easily.
        Our goal is to provide step-by-step guidance to beginners as well as advanced learners.
    </p>
    <p>
        If you're interested in learning more, check out our
        <a href="#">latest blog posts</a> or
        <a href="#">coding challenges</a> to test your skills.
    </p>
</body>
</html>

CSS Tutorial

In CSS code, the second-last item in the list ("Services") is red and black, and the fourth-last item ("Home") is white with black, line spaces path, text shadow effect The last element of the anchor link is styled by Sion, all through a pseudo-square that focuses on elements by their location.


Conclusion

In this tutorial, we learned about CSS pseudo-selectors, which help create HTML elements without actually changing the HTML. We discussed four important pseudo-classes: :first child, :last child, :nth(nth) child, and :nth(nth) child. These selectors allow you to apply specific methods to elements based on their location in the parent element. Understanding and using these pseudo selectors can enhance your web design and improve the user experience. Apply to become more proficient in CSS!
Tags

You may like these posts

Post a Comment

Previous Post Next Post

Recent in Technology

Responsive Advertisement