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

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

byRAYS CODING -
0
In this CSS tutorial, we will discuss the four more Pesudo-classes ":nth-last-of-type(), :nth-of-type(), only-child, and :only-of-type".

CSS Tutorial

1. :nth-last-of-type()

Using the ":nth-last-of-type()" CSS pseudo-class, we select an element according to its type from the last position within its parent. This is just like ":nth-of-type()" but here counting starts from the last element.

SYNTAX

<style>
    element:nth-last-of-type() {
        /* styles */
    }
</style>

Example: If there are 5 <p> tags in an HTML structure and you want to select the third <p> tag from the last, then you would use ":nth-last-of-type(3)".

<!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;
        }
        P:nth-last-of-type(2) {
            color: blueviolet;
            font-size: 40px;
            font-family: sans-serif;
        }
    </style>
</head>
<body>
    <div>
        <p>First Paragraph</p>
        <p>Second Paragraph</p>
        <p>Third Paragraph</p>
        <p>Fourth Paragraph</p>
        <p>Fifth Paragraph</p>
    </div>
</body>
</html>

CSS Tutorial

2. :nth-of-type()

Using the :nth-of-type() CSS pseudo-class, you can target an element based on its position. This is the position of a specific type of element within its parent. This means that if there are multiple elements of the same type within a parent, you can style any specific number of elements among them.

SYNTAX

<style>
    <style>element:nth-of-type() {
        /* styles */
    }
</style>


Example: Suppose, the web page has 5 paragraphs If you want to apply CSS in the second paragraph, you can do so with ":nth-of-type()".

<!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;
        }
        P:nth-of-type(2) {
            color: blueviolet;
            font-size: 40px;
            font-family: sans-serif;
        }
    </style>
</head>
<body>
    <div>
        <p>First Paragraph</p>
        <p>Second Paragraph</p>
        <p>Third Paragraph</p>
        <p>Fourth Paragraph</p>
        <p>Fifth Paragraph</p>
    </div>
</body>
</html>

CSS Tutorial

3. :only-child()

The 'css:only-child' pseudo-class is used when we want to implement a css on an element that is the only child of its parent.

SYNTAX

<style>
    element:only-child {
        /* styling properties */
    }
</style>

Example: If there is only one p tag within a div, using ":only-child" will apply the style only to that p tag.

<!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;
        }
        p:only-child {
            color: red;
            font-family: sans-serif;
            font-size: 40px;
        }
    </style>
</head>
<body>
    <div>
        <p>This is the only child</p>
    </div>
    <div>
        <p>This is one child</p>
        <p>This is another child</p>
    </div>
</body>
</html>

CSS Tutorial

4. :only-child()

The CSS :only-of-type selector is pretty easy to understand. This pseudo-class targets the element that is the only type of element within its parent. Meaning if there is only one type of element within a parent div (such as a single <p> tag or a single <h1> tag), then :only-of-type will be used.

SYNTAX

<style>
    element:only-of-type {
        /* Styles yaha likhein */
    }
</style>

Example: If there is only one <p> tag within a parent div, then the style will be applied to it:

<!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;
        }
        p:only-of-type {
            color: royalblue;
            font-family: sans-serif;
            font-size: 40px;
        }
    </style>
</head>
<body>
    <div>
        <p>This is the only paragraph.</p>
        <span>This is a span.</span>
    </div>
    <div>
        <p>This is the first paragraph.</p>
        <p>This is the second paragraph.</p>
    </div>
</body>
</html>

CSS Tutorial

Tags

You may like these posts

Post a Comment

Previous Post Next Post

Recent in Technology

Responsive Advertisement