The Most Used CSS Selector!

1. Universal Selector In CSS

It selects all the elements on the pages. Universal selector starts with * (it means Selects all elements).

Example:

  * {
        background-color: #000000;
        color: #fff;
        font-size: 20px;
      }

It will make the background color black, the text color will be White with a font size of 20 pixels.

2. The individual selector in CSS

The individual selector in CSS selects the HTML element by name. like select all

elements or select all

elements.

Example:

p {
        background-color: #fff;
        color: #000000;
        padding: 8px;
        font-size: 20px;
      }

It will make all the p Tag’s background white, the text color will be black, and the font size of 30 pixels with all-side padding of 8 pixels.

3. ID selector in CSS The id selector styles the element with the specified id. It always starts with #IDNAME.

Example:

#my_id {
        background-color: #ffffff;      }

It will make all the background white where id=”my_id”.

4. Class Selector in CSS The Class selector styles the element with the specified class name. It always starts with .CLASSNAME.

Example:

  .my_class{
       background-color: #fff;
     }

It will make all the background white where class=”my_class”.

5. and selector (chained) in CSS It is used to select the specified element with the specified multiple class.

Example:

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

Select and style every

(List Item) element with the class " bg-black " and “text-white” .

6. The combined selector in CSS when we want to style several elements with the same style, separating each element's name with a comma is known as a combined selector. Example:

      span,
      li {
        background-color: #04ff6c;
      }

It will make all the background green of all and

elements of Html.

7. Inside an element Selector in CSS The inside an element selector is used to select elements inside elements. Example:

div ul li {
        background-color: #ee17ad;
      }

Select and style every

element, that is inside

elements.

8. Direct child Selector in CSS The direct child Selector is used to select elements with a specific parent.

      div > li {
        background-color: #c300ff;
      }

The given code snippet will Select and style every

element where the parent is a

element.

9.+ Selector in CSS The + selector selects an element directly after another specific HTML element.

  .sibling + p {
        background-color: #14eedc;
      }

Select and style the first

element associated with the class sibling.

10. sibling ~ Selector in CSS The ~ selector is used to select all element that is directly after another specific HTML element.

  .sibling ~ p {
        background-color: #14eedc;
      }

Select and style the all the

element after match the class sibling.