Selectors in CSS


What are CSS Selectors?

  • CSS selectors are used to select the HTML elements for styling.

  • There are multiple types of selectors in CSS: element selector, group selector, id selector, class selector, etc.

  • Today we will see only some basic selectors in CSS and other selectors we will learn in upcoming tutorials.


Element Selector

Element selectors are used to targeting the HTML element by tag name and style them in our style sheet.

p {
    color: red;
}


Group Selector

As the name suggests group selectors are used to selecting multiple elements and applying the same style to them.

h3, p{
    color: red;
}


Id Selector

Id selectors are used to target particular HTML element with the help of id. Hash (#) is used to target the particular element from the HTML document.

#heading {
    color: blue;
}


Class Selector

Class selectors are used to target multiple HTML elements with their classes. Dot (.) is used to target the multiple elements with the class from the HTML document.

.para {
    color: purple;
}


Attribute Selector

Attribute selector is used to target the HTML elements with their attribute.

input[type="text"] {
    background-color: red;
    color: white;
}


Code Described in the video

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title> Selectors in CSS </title>
    <style>
        /* Element Selector */
        h1 {
            color: red;
        }

        li {
            color: purple;
        }

        /* Group Selector */
        h1,
        h3,
        p {
            color: red;
        }

        /* Id Selector */
        #heading {
            color: red;
        }

        #secondaryHeading {
            color: purple;
        }

        /* Class Selector */
        .para,
        .list {
            color: blue;
        }

        /* Universal Selector */
        * {
            background-color: red;
            color: white;
        }

        /* Attribute Selector */
        input[type="text"],
        input[type="number"] {
            background-color: red;
            color: white;
        }
    </style>
</head>

<body>
    <h1 id="heading"> This is a heading </h1>
    <h3 id="secondaryHeading"> This is a heading </h3>
    <p class="para"> This is a paragraph</p>
    <p class="para"> Lorem ipsum dolor sit amet consectetur adipisicing elit. At, mollitia perferendis dignissimos
        exercitationem facere culpa accusamus est. Omnis fuga dolorem autem dicta totam ullam ad, doloribus, corporis
        illum vitae nam asperiores, natus reprehenderit ipsam sapiente. Odit ratione placeat in quam?</p>
    <ul>
        <li class="list"> This is a list </li>
        <li class="list"> This is another list </li>
        <li class="list"> This is also another list </li>
    </ul>

    <input type="text" name="text">
    <input type="number" name="text">
    <input type="button" name="text" value="Submit">
</body>

</html>



Post a Comment

0 Comments
* Please Don't Spam Here. All the Comments are Reviewed by Admin.

Top Post Ad

Below Post Ad