Css Selectors

In CSS the most important thing to select any tag or element in web page to apply CSS. Here comes some selector. The commonly used selcetors are Universal, Individual, Class and Id, And,Combind,Inside an element,Direct, Sibling selectors in web development.

1.Universal Selector:

It select all elements in web page.

sysntax: *{}

code:

<!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>CSS SELECTORS</title>
        <style>
            /* universal selectors */
            *{
                background-color: #E6425E;
            }
        </style>
</head>
<body>
    <div>Practice the css</div>
    <h1>css</h1>
    <span>it so interesting to write article</span>
    <div>
        <li>one</li>
        <li>two</li>
        <li>three</li>
    </div>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Iure, itaque.</p>

</body>
</html>

Result:

Individual selectors:

It is target the elements which one select in webpage.

sysntax: elementname{}

code:

   /* individual selector */
            li{
                background-color: #12B0E8;
            }

Result:

Class and Id Selectors:

For Class attribute we use dot(.) to select the element.

Sysntax: .calssname{}

code:

    /* class and id selectors */
            .string{
            background-color: yellow;
            }

Result:

For Id attribute we use hash(#) to select the element.

Sysntax: #Idname{}

code:


            #var{
                background-color: pink;
            }

`

Result:

And selector: It is used to target any spcefic element with class name.

Sysntax: elementname.classname{}

code:

    /* and selector (chained)*/
            li.bg-black.text-white{
                background-color: #120E43;
                color: white;
            }

Result:

Combined Selector:

Combined two more elements with comma separator.

Sysntax: elementname,elementname{}

code:

/* combined selector */
div,li,ul,p,h1{
    background-color: white;
}

Result:

Inside element selector:

It is target to one element which is present under another element.

Sysntax: elementname elementname{}

code:

/* inside element selector */
div ul li p{
    background-color: green;
}

Result:

Child Selector:

It is select the direct child to parent element.

Sysntax: elementname>elementname{}

Code:

/* Direct Child */
div >ul> p{
    background-color: #dd4ca6;
}

Result:

Sibling Selector:

Here (+) used to select only next same element present in the page. If (~) used to select all sibling of same element .

Sysntax: calssname +/~ elementname{}

code:

/* Sibling ~ and + */
.sibling + p{
background-color: #0d81a5;
}

Result for (+):

Result for (~):

Pseudo selector: The ": :" Pseduo selector is used to add some spcific action on an element. In example we use ':before' and ':after' for add data on the elements.

Sysntax: elementname/calssname:actionname{}

code:

 <style>
        .dot:before{
            content: 'gh';
            display: inline;
            background-color: #fff000;
        }
        .dott:hover:after{
            content: 'ff';
            display: inline;
            background-color: rgb(25, 11, 63);
        }
        button:hover:before{
            content: 'kolkata';
            display: inline;
        background-color: aqua;
      }
    </style>
</head>
<body>
    <form >

<label for="value" class="dot">name</label><input type="text" id="value"/>

    <label for="radio" class="dott">email</label><input type="text" id="value">
    <button>submit</button>

    </form>


</body>

Result: