Everything About Selectors in CSS

Selector are used to select the HTML element that we want to style. Css selector select the HTML element according to it's Id, Class, type, attribute.

There are many different types of selectors.

Universal Selectors (*).
Individual Selectors.
Class and ID Selectors (. #).
And Selectors (chained)
Combined Selectors (,).
Inside an Element Selectors.
Direct Child Selectors (>).
Siblings Selectors (~ +).

HTML Code: Consider the sample code to understand the selectors.

<!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>

    </style>
  </head>
<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 >item2</li>
        <li class="warning">item3</li>
        <li id="danger">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>

1. Universal Selectors (*):

The Universal selector (*) is used to select the all the html element in a document.

 * {
      color: white;
      background-color: black;
    }

If we write that above code inside style tag, then the background color of whole page will changed with white color.

2. Individual Selectors:

The Individual selector is used to select element by tag.

p {
        background-color: #d1ea76;
    }

Above code will change the background color of all the p elements.

3. Class and ID Selectors (. #):

The Class selector uses the class attribute and ID selector uses the Id attribute of an Html element to select the specific elements.

.warning {
               background-color: #ef9323;
                color: #FFFFFF;
         }
#danger {
          background-color: #e93916;
          color: #FFFFFF;     
  }

This style will change the color of li element which contain Item3 and Item4 text, look into the sample codee

4. And Selectors (chained):

And selector select an specific element using attribute, we use dot(.) operator to select an element.

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

The above code select the li element which contain (bg-black.text-white) class.

5. Combined Selectors (,):

Combined Selector used to select all the specified elements separated by comma.

span, li, p{
        background-color: burlywood;
      }

this will select all span, li and p elements and change their background color.

6. Inside an Element (descendant) Selectors:

This selector matches all elements that are descendants of a specified element.

div ul li {
        color: green;
        background-color: red;
      }

this will select all the li element which is inside the ul and that ul inside the div.

7. Direct Child Selectors (>):

The child selector select all the selector that is direct children of specified element.

div > li > p {
        background-color: #7667e4;
      }

this will select only the p element which is direct children of li and that li is direct children of div

8. Siblings Selectors(~ +):

Adjacent Sibling Selector (+): The adjacent sibling selector is used to select an element that is direct placed after the specified element.

.sibling + p {
        background-color: pink;
      }

General Sibling Selector (~): The general sibling selector is used to select all the elements that are next siblings of a specified elements.

.sibling ~ p {
        background-color: pink;
      }

Psuedo-Selectors:

Pseudo selectors are used to style specified part of an element.

1. ::before : This pseudo selector is used to insert some content before the content of an element. Example:

<h1> This is h1 element </h1>
<p> Hello Css </p>

So I want to add some content before the p element.

p::before{
              content : "hello"
              }

then hello will be added just before the p element. output looks like helloHello Css

2. ::after : This pseudo selector is used to insert some content after the content of an element. same as before element.

3. ::hover: This selector is add a special style to an element when we move the curser over it.

p:hover::before{
              content : "hello"
              }

then hello will be added just before the p element when we over the mouse on p element. output looks like helloHello Css.

Prithviraj singh Thakur's blog