What Is Selectors ?

CSS selectors are used to define the elements you want to style with CSS. There are different types of CSS selectors, each with their own unique syntax. These tell the browser which elements to apply CSS property values.

Types Of Selectors

1. Universal Selector.
2. Class and ID Selector.
3. Attribute Selector.
4. Grouping Selector.
5. Inside Selector.
6. Child Selector.
7. Sibling Selector.
8. Adjacent Sibling Selector.

Let's Get Started With Details About Types Of Selectors.

Universal Selector.

It Selects all elements. Optionally, it may be restricted to a specific namespace or to all namespaces.

• " * " will match all the elements of the document.

Input:  * { color : red; }

Output:  The text in all the elements become red

Class and ID Selector.

Class Selector Selects all elements that have the given class attribute.

• To Select class attribute. use . (dot)

ID selector Selects an element based on the value of its id attribute.

• To select id use # character.

Class Selector

 <!-- class selector -->
    <style>
    .heading {
        color: red;
        text-align: center;
        font-size: 40px;
        font-weight: bold;
    }
    </style>

ID selector

<!-- ID selector -->
    <style>
    #heading {
        color: red;
        text-align: center;
        font-size: 40px;
        font-weight: bold;
    }
    </style>

Attribute Selector.

Attribute Selector is used to select an element with some specific attribute or attribute value. Selects all elements that have the given attribute.

 <style>
            [class] {
                text-align:center;
                Color:red;
            }
            .col {
                font-size:40px;
                font-weight:bold;
                margin-bottom:-20px;
            }
        </style>

Grouping Selector.

The grouping selector selects all the HTML elements with the same style definitions.

• To group selectors, each selector is separated by a space.

h1, h2, p {
  text-align: center;
  color: red;
}

Inside Selector.

<!--In HTML -->
<div>
      <p> hello world </p>
</div>

<!-- In CSS selecting div then p i.e. Inside Selector -->

div p {
  background-color: yellow;
}

<!--then it shows "Hello World" with background YELLOW -->

Child Selector.

• Use > to select direct children of the first element.

div > p {
  background-color: yellow;
}

Sibling Selector.

Use ~ , This means that the second element follows the first (though not necessarily immediately), and both share the same parent.

div ~ p {
  background-color: yellow;
}

Adjacent Sibling Selector.

Use + , it matches the second element only if it immediately follows the first element.

div + p {
  background-color: yellow;
}

Thankyou For Reading.