Selectors in CSS

let us discover our most advanced useful selectors one by one.

Before commencing into the selectors, we need to know one thing i.e., The selectors are used to add colors to the text and background colors themselves.

/*universal selector*/

This is a special type selector and it is used for the namespace document.in HTML.

here, we can see the example below

body {

background-color: #0D0D0D;

}

/*Individual selector*/

The individual selectors are used to select unique elements and there I'd.

<div>

The div tag separately displays the block of code and its text is displayed on the page from the left. It is used as a container and it has attributes like class or id

 <div>
                <li>Be-unique</li>
                <ul>
                    <li>highlight my skills</li>
                    <li>highlight my creativity</li>
                </ul>
            </div>

<span>

The span tag is an inline container. this tag is used to mark up a part of the text.

<span style="color: #5A20CB">blue</span>

<p>

The paragraph snippet is used to set background color to the text.

p {

background-color: #CAD5E2;

}

UI and LI

The <li> is a list of elements in separate ways and it is under the <ul> tag which is an unordered list.

example:

<ul>

<li>...</li>

<li>...</li>

</ul>

/*class and Id selector*/

The class and id selectors are used separately.

example:

.warning {

background-color: #ef9323;

color: #ffffff;

}

#danger {

background-color: #E03b8b;

color: #ffffff;

}

/*And selector*/

The and selector is the combination of a couple of elements in the same line.

example: li.bg-black.text white {

bg-color: black;

color: white;

}

/* combined selector*/

This selector is used to combine all the grouping methods of matching nodes.

example:

span, li {

background-color: burlywood;

}

/* Inside an element*/

The inside element selector has two different types of elements.

same kind of elements

different types of elements.

example:

whenever we use div ul and li tags, the div tag can look different compared with ul and li tags

use the following example then you can practically understand the code snippet:

Example:

div ul li {

background-color: blue;

}

/* Direct child*/

The combinator is just an immediate direct child of the first element.

Example:

div > li {

background-color: red;

}

/* Sibling ~ or + */

The sibling is the immediate child of this elder rest element.

.sibling + p {

background-color: # pink;

}

here, we can use class attribute also Ex: class="sibling"

/* Before selector */

This kind of selector is targeting your label attributes. here, the hover attribute should be used before the double semicolon [::]

.imp-label:hover::before{

content: ' ' ;

display: inline-flex;

width: 30px;

height: 20px;

border-radius: 10px;

background-color: orange-red;

}

/* After selector */

It is also the same type of before selector. Here, we use after selector instead before selector.

.imp-label:hover::after{

content: ' ' ;

display: inline-flex;

width: 30px;

height: 20px;

border-radius: 10px;

background-color: orange-red;

}