CSS and its Selectors

What is CSS ?

CSS stands for Cascading Style Sheets.
It is used to style the HTML elements.
It tells how HTML elements are to be displayed on screen.
We can write our whole CSS in a different file and then link that file in our HTML.

CSS Selectors

CSS selectors are used to find or select the HTML elements which we want to style.
There are many types of CSS Selectors, but mainly there are 8 types of selectors.
Universal Selector
The universal selector (*) selects all HTML elements on the page.
This example will make the whole HTML page with the specified background color and align the text of whole page towards center.
```
/* universal selector */
    * {
      background-color: #4d4d4d;
      text-align: center;         
    }
```
Individual or Element Selector
The individual/element selector selects HTML elements based on the element name.
This example will select all the p tags in the HTML page and make their background color as specified.
```
/* individual selector */
    p {
      background-color: #d1ea76;
    }
```
Class Selector
The class selector selects HTML elements with a specific class attribute.
To select elements with a specific class, write a dot (.) character, followed by the class name.
This example will make the elements with the class as "warning" with the specified background color and text color.
```
/* class selector */
.warning {
      background-color: #ef9323;
      color: #FFFFFF;
    }
```
ID Selector
The ID selector selects HTML elements with a specific ID attribute.
To select elements with a specific ID, write a hashtag (#) character, followed by the ID name.
This example will make the elements with the ID as "danger" with the specified background color and text color.
```
/* ID selector */
#danger {
      background-color: #e93916;
      color: #FFFFFF;
    }
```
Chained, AND Selector
The Chained selector selects HTML elements with more than 1 class or ID attribute.
We have to use the element tag then the dot(.) and then the class/ID name and then again a dot (.) and then the class/ID name.
This is helpful when we have more than 1 Class or ID attribute or both for an element.

The first code snippet is how the HTML of element is written, second code snippet shows how the CSS is written and chained selector is used.

/* The HTML of the element*/
<ul>
    <li class="bg-black text-white">item1</li>
    <li >item2</li>
    <li >item3</li>
    <li >item4</li>
    <li>item5</li>
</ul>

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

Combined/Group Selector

The Combined/grouping selector selects all the HTML elements with the same style definitions.
If we are having the same CSS for different tags/elements, then we can write common CSS for the all the elements by separating the tags with comma (,)

In this example we can use same CSS for 'span' and 'li' elements.

/* combined, group selector */
    span, li {
      background-color: burlywood;
    }

Direct child

The Direct child selector is used when we want to style an immediate child or their further child and so on of an element.
It has a high priority.
In this example, we are styling only the 'p' element which is a child of 'li' element which further is a child of 'div' element.
```
/* direct child*/
    div > li > p {
      background-color: #7667e4;
    }
```
Inside an element
This selector works as if there is any other element which is present under an element, then those CSS styling will be applied to that.
For example, in this code snippet, all the 'li' which is present under the 'div' tag, the CSS style properties will be applied to them.
It doesn't matter whether that 'li' is child or grandchild or further of the 'div'. The CSS properties will be applied to all the 'li' present under 'div'.
```
/* inside an element */
    div li {
      background-color: #4b35f1;
    }
```
Sibling Selector
This selector works as it will apply the CSS to the next sibling(s) present of that element.
If we use '+' then it will select just the next sibling of that element.
If we use '~' then it will select all the siblings next from that element.
This selector is not much used.

In 1st code example, the background color: pink will only be applied to the Test 2.

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

/* sibling  '~' or '+'*/
/*'~' selects all siblings which are after, '+' 
selects just the next sibling */
    .example + p {
      background-color: pink;
    }

In 2nd code example, the background color: pink will be applied to all the 'p' elements which is after Test 1.

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

/* sibling  '~' or '+'*/
/*'~' selects all siblings which are after, '+' 
selects just the next sibling */
    .example ~ p {
      background-color: pink;
    }

This is the code snippet for the various CSS selectors discussed so far.

<style>

    /* universal selector */
    * {
      background-color: #4d4d4d; 
      text-align: center;      
    }

    /* individual selector */
    p {
      background-color: #d1ea76;
    }
    /* class and id selector */
    .warning {
      background-color: #ef9323;
      color: #FFFFFF;
    }
    #danger {
      background-color: #e93916;
      color: #FFFFFF;
    }
    /* and selector (chained) */
    li.bg-black.text-white{
      background-color: #000;
      color: #ef9323;
    }
    /* combined,group selector */
    span, li {
      background-color: burlywood;
    }

    /* inside an element */
    div ul li {
      background-color: #4b35f1;
    }
    /* direct child...has a high priority*/
    div > li > p {
      background-color: #7667e4;
    }  
    /* sibling  ~ or +....~ selects all siblings which are after,
     + selects just the next sibling */
    .sibling + p {
      background-color: pink;
    }
  </style>

This is the output for the above code snippet-
Pseudo Selectors
CSS Pseudo Elements/Selectors are used to style the specified parts of an element.
They are used to style the first letter, or line, of an element or are used to insert content before, or after, the content of an element.
The 'content' attribute is a necessary to be defined inside the styling of that element.

The HTML of the element is:-

<div>
    <form action="">

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

      <label class="imp-label2" for="email">Email</label>
      <input type="text" name="email"/><br><br>

      <button class="button" type="submit">Submit</button>

    </form>     

     </div>

::before

The ::before pseudo-element/selector is used to insert some content before the content of an element.

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

::after

The ::after pseudo-element/selector is used to insert some content after the content of an element.

/* after*/
.imp-label2::after{
      content: 'Plz';
      display: inline;
      width:20px;
      color: black;
      height: 20px;
      border-radius: 10px;
      background-color: cyan;
    }

The Output will be as:-

Thanks for reading. See you soon..

CSS and its Selectors

In this article we will learn about CSS and its various Selectors with code examples.

Table of contents

What is CSS ?

CSS Selectors

Universal Selector

Individual or Element Selector

Class Selector

ID Selector

Chained, AND Selector

Combined/Group Selector

Direct child

Inside an element

Sibling Selector

Pseudo Selectors

::before

::after