CSS Tutorial : Introduction of the CSS Pseudo-classes :first-of-type, :last-of-type, :empty, :not()

CSS Tutorial : Introduction of the CSS Pseudo-classes :first-of-type, :last-of-type, :empty, :not()

byRAYS CODING -
0
In this CSS tutorial, we will discuss the four more Pesudo-classes ":first-of-type, :last-of-type, :empty, :not()".

CSS Tutorial

1. :first-of-type

:first-of-type is a CSS pseudo-class that targets the first of any element, which is the first element of our type, in its parent. This selector is useful because it allows you to apply specific styling, without additional classes or IDs. Using it, you can improve the layout and layout of the web page, such as displaying the first element of a section in a different color or font size.
If you have a list or need to apply special styling to the first element of a new container, :first-of-type can detect that easily.

SYNTAX

<style>
    element:first-of-type {
        /* 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;
        }
        p:first-of-type {
            color: red;
            font-weight: bold;
        }
    </style>
</head>
<body>
    <h1>Welcome to RAYS Coding</h1>
    <div class="paragraphs">
        <p>This is the first paragraph.</p>
        <p>This is the second paragraph.</p>
        <p>This is the third paragraph.</p>
    </div>
</body>
</html>

CSS Tutorial


2. :last-of-type

The :last-of-type class selector is a CSS pseudo-class used to target the last instance of an element. It selects the element that is the last element of its type, such as if you have a list, it will select the last <li> element in that list.

SYNTAX

<style>
    element:last-of-type {
        /* 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;
        }
        p:last-of-type {
            color: royalblue;
            font-weight: bold;
            font-family: sans-serif;
            font-size: 50px;
        }
    </style>
</head>
<body>
    <h1>Welcome to RAYS Coding</h1>
    <div class="paragraphs">
        <p>This is the first paragraph.</p>
        <p>This is the second paragraph.</p>
        <p>This is the third paragraph.</p>
    </div>
</body>
</html>

CSS Tutorial

3. :empty

An :empty selector means that you are selecting an element that is completely empty, meaning that it has no text and no child elements. If you select an empty <div> or <p> tag, using :empty allows you to target only those elements.

SYNTAX

<style>
    element:empty {
        /* 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-class :empty</title>
    <style>
        body {
            background: #1b1b1b;
            color: white;
        }
        div:empty {
            display: none;
        }
    </style>
</head>
<body>
    <h1>Welcome to RAYS Coding</h1>
    <div class="paragraphs">
        <p>This is the first paragraph.</p>
        <p>This is the second paragraph.</p>
        <p>This is the third paragraph.</p>
    </div>
    <div class="empty"></div>
    <h1>Welcome to RAYS Coding</h1>
</body>
</html>

CSS Tutorial

4. :not()

The :not() CSS selection is used to select objects that do not match a particular selection. This means that if you want to select an element, but want to exclude a particular element, you can use :not().

SYNTAX

<style>
    element:not(selector) {
        /* 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-class Example</title>
    <style>
        body {
            background: #1b1b1b;
            color: white;
        }
        p:not(.highlight) {
            color: green;
            font-size: 40px;
            font-family: sans-serif;
        }        
        .highlight {
            color: red;
        }
    </style>
</head>
<body>
    <h1>Welcome to RAYS Coding</h1>
    <p>This is a normal paragraph.</p>
    <p class="highlight">This paragraph is highlighted!</p>
    <p>This is another normal paragraph.</p>
</body>
</html>

CSS Tutorial


Tags

You may like these posts

Post a Comment

Previous Post Next Post

Recent in Technology

Responsive Advertisement