WHY do we use selectors?

CSS (Cascading Style Sheet) is a design language intended to simplify the process of making web pages look more beautiful and presentable So, to make those pages look like this we need to know about selectors in CSS. Here we talk about very important selectors in CSS that we used to select HTML attributes, Id, and classes.

Types of Selectors.

There are 6 types of selectors are present in CSS.

1. Universal selector.
2. Id selector.
3. Class selector.
4. Element selector.
5. Attribute selector.
6. Grouping selector.

Universal selector.

Universal as the name implies selects all the elements in the HTML document. If you use a universal selector it automatically includes all elements which are inside under the other elements. To select elements universally use- (*)

* {
color="black";
background-color="white";
}

Id selector

In HTML you want to select a specific element. In CSS we have an Id selector it selects and uses the Id selector attribute of an HTML. Use # to select an element.

#container {
    border: 2px solid green;
             background: orange-red;
}

Class selector

The most important selector in CSS is the class selector. It selects an HTML element with a specific class attribute. you select as many attributes with help of a class selector. It is written with a period character (.), followed by the class name.

.container-class {
   background-color: dark slate grey;
            color: aliceblue;
            text-align: center;
}

Element selector

Element selector in CSS selects the HTML elements according to the element's name or tag names. ex- p, div, h2, span.

   p, a {
            color: crimson;
            background-color: aliceblue;
            border-radius: 10px;
        }

Attribute selector

When it comes to the attribute selector in CSS it always selects a particular type of input.

a {
  color: blue;
}

/* Internal links, beginning with "#" */
a[href^="#"] {
  background-color: gold;
}

/* Links with "example" anywhere in the URL */
a[href*="example"] {
  background-color: silver;
}

/* Links with "insensitive" anywhere in the URL,
   regardless of capitalization */
a[href*="insensitive" i] {
  color: cyan;
}

/* Links with "cAsE" anywhere in the URL,
with matching capitalization */
a[href*="cAsE" s] {
  color: pink;
}

/* Links that end in ".org" */
a[href$=".org"] {
  color: red;
}

/* Links that start with "https" and end in ".org" */
a[href^="https"][href$=".org"] {
  color: green;
}

Grouping selector.

The grouping selector is used to select all the elements with the same style definitions. Grouping selectors are used to minimizing the code. (,) is used for grouping.

h1,h3,p {  
    text-align: center;  
    color: blue;  
}