Introduction

CSS stands for Cascading Style Sheet, which is used to style the HTML elements easily and effectively.

CSS Selectors

CSS Selectors are used to target a HTML element so that we can provide style to that particular element. A CSS Selector can select an element according to it's class, id, attribute etc.

There are some basic types of CSS Selector which are given below:-

Universal Selector
Element Selector
ID Selector
Class Selector
Group Selector
Attribute Selector
Pseudo Selector

1) Universal Selector:- Universal Selector is a selector which can select all the elements in a HTML document., which is denoted by star or astricks symbol (*).

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Universal Selector</title>
</head>
<style>
    *{
        color: red;
    }
</style>
<body>
    <h1>Universal Selector</h1>
    <p>Trying Universal Selector</p>
</body>
</html>

Output universal selector.png 2) Element Selector:- Element Selector is used to select an element based on their element name. For eg. p, h1, span etc.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Universal Selector</title>
</head>
<style>
    h1{
        color: red;
    }
    p{
        color: blue;
    }
</style>
<body>
    <h1>Element Selector</h1>
    <p>Trying Element Selector</p>
</body>
</html>

Output

element selector.png

3) ID Selector:- The ID selector is used to select the ID attribute of an HTML element. An ID is used uniquely in a HTML document.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Universal Selector</title>
</head>
<style>
    #heading{
        color: red;
    }
</style>
<body>
    <h1 id="heading">I am a Heading</h1>
</body>
</html>

Output

id selector.png

4) Class Selector:- The class selector selects a class attributes of an HTML element. We can use class for multiple elements for providing the same styling to all of them.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Universal Selector</title>
</head>
<style>
    .center{
        text-align: center;
    }
</style>
<body>
    <h1 class="center">I am heading</h1>
    <p class="center">I am paragraph</p>
</body>
</html>

Output

class selector.png

5) Group Selector:- Group selector is used to provide styling to the different attributes with same style by separating them with comma.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Universal Selector</title>
</head>
<style>
    #heading, .para, button{
        background-color: cyan;
        color: red;
    }
</style>
<body>
    <h1 id="heading">I am a heading</h1>
    <p class="para">I am a paragraph</p>
    <button>Login</button>
</body>
</html>

Output

grouping selector.png

7) Attribute Selector:- It is used to select an element with specified attribute or specified attribute value using the square brackets.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Universal Selector</title>
</head>
<style>
    input[name = "username"]{
        border: 2px solid blue;
    }
    input[name = "password"]{
        border: 2px solid red;
    }
</style>
<body>
    <input type="text" name="username" placeholder="Enter Your Username"> <br> <br>
    <input type="password" name="password" placeholder="Enter the Password">
</body>
</html>

Output

attribute selector.png

8) Pseudo Selector:- These are used to provide some special effect and state to an element like when we hover an element how it should behave or when we click over a div and many more. Some of the popular pseudo selectors are:-

hover
nth child
visited
after
before
first child
last child etc

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Universal Selector</title>
</head>
<style>
    /* targeting the second element within the list */
    .container li:nth-child(2){
        color: red;
    }
    /* targeting the first element */
    .container li:first-child{
        color: blue;
    }
    /* targeting the last element */
    .container li:last-child{
        color: green;
    }
</style>
<body>
    <ul class="container">
        <li>Apple</li>
        <li>Banana</li>
        <li>Orange</li>
    </ul>
</body>
</html>

Output

pseudo selector.png

A brief description about CSS Selector

Introduction

CSS Selectors