CSS Selectors

CSS provides us with a look at the website so in the journey of web development, it is necessary to learn CSS. CSS is all about selecting the element and also targeting the element so let's create an index.html file on your code editors

so, we are going to learn about selectors

• Types of selectors

Universal selectors

universal selectors select all elements in Html and change the whole web page. for example

*{
            background-color: rgb(103, 141, 141);
            color: white;
  }

Individual selectors

it selects similar types of tags on Html, it styling elementwise. for example

p{
            background-color: blue;
        }

Class selectors

Gives a class name for the desired element and all elements that have the same class will change their style. for example

.warning{
            background-color: aqua;
            color: black;

        }

ID selectors

Gives an id name for the desired element and all elements that have the same id will change their style. when we want uniquely identify the element then we use class. for example

 #list{
        background-color: aqua;
            color: black;

       }

Chained selectors

we select two class names for example

li.bg-black.text-white {
        background-color: black;
       }

Combined selectors

we can add the same properties to multiple tags using combined selectors. for example

 span,li{
        color: yellow;
       }

inside an element

Styling child or grandchild or both using inside an element. for example

div ul li{
        color: burlywood;

    }

it means inside div there is ul, and inside ul, there is li so it changes color on the li element

Direct child

in a direct child element names are separated by ">"

div>li{
background-color: blue-violet;
}

li is the direct child of the div element

Sibling + or Adjacent sibling Combinator

In the adjacent sibling combinator the styling is applicable on the second element here which is p - paragraph, so wherever there will be a para after ul (unordered) basically on element2 styling will be applied. It should be in that sequence only as selected and it's the next immediate one.

 /* Sibling + or Adjacent Sibiling Combinator */
        ul + p {
            background-color: #35BDD0;
        }

Now let's learn about Pseudo Classes

::before

it is used to add content before any element

.imp-label:hover::before {
            content: '';
            display: block;
            width: 20px;
            height: 20px;
            border-radius: 10px;
            background-color: orange;
        }

::after

After the element style properties will be added.

.imp-label:hover::after {
            content: '';
            display: block;
            width: 20px;
            height: 20px;
            border-radius: 10px;
            background-color: orange;
        }

Code file

<!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>Document</title>
    <style>
        /*UNIVERSAL SELECTORS*/
        *{
            background-color: rgb(103, 141, 141);
            color: white;
        }

        p{
            background-color: blue;
        }

        .warning{
            background-color: aqua;
            color: black;

        }
       #list{
        background-color: aqua;
            color: black;

       }
       li.bg-black.text-white {
        background-color: black;
       }

       span,li{
        color: yellow;
       }

    /* inside an element */
    div ul li{
        color: burlywood;

    }
div>li{
background-color: blueviolet;
}



    </style>
</head>
<body>



<body>
    <div>Welcome to live class</div>
    <span>Span is just a span, nothing more</span>
    <p>We all know paragraph</p>
    <ul>
        <li class="bg-black text-white">item1</li>
        <li class="bg-black">item2</li>
        <li id="list">item3</li>
        <li >item4</li>
        <li>item5</li>
    </ul>

    <div>
        <p>lorem</p>
        <li>awesome</li>
        <ul>
            <li>highlight me <a href="#">test</a></li>
            <li>highlight me</li>
        </ul>
    </div>

    <section>
        <p class="sibling">Test 1</p>
        <p>Test 2</p>
        <p>Test 3</p>
        <p>Test 4</p>
        <p>Test 5</p>
    </section>
</body>

</html>

<!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>Document</title>
    <style>
        body {
            background-color: #414141;
            color: #fff;
        }

        /* before */
        .imp-label:hover::before {
            content: '';
            display: block;
            width: 20px;
            height: 20px;
            border-radius: 10px;
            background-color: orange;
        }


        /* after :: part of label */
    </style>
</head>

<body>
    <div>
        <form action="">

            <label class="imp-label" for="name">name</label>
            <input type="text" name="name" />

            <label for="email">email</label>
            <input type="text" name="email" />

            <button data-tooltip="Tooltip" type="submit">Submit</button>
        </form>


    </div>
</body>

</html>

Thanks