What is a selector?

A selector is used to select HTML element and make styling changes to it.

Types of CSS selectors:-

The CSS selectors are divided into many categories.

1. Universal selector
2. Element selector
3. Class selector
4. Id selector
5. Chained selector
6. Direct selector
7. Sibling selector
8. Pseudo selctor

Universal selector

The universal selector is a selector that selects all the elements present in the body of the document. It is represented as *

{
     background-color: red;
     font-size: 2rem;

}

The above selector * we have used is universal selector. It will selects all the elements present in the body and the desired styling will get applied to all the elements.

Element Selector

The element selector selects the element based on the name of HTML element.

p{
     color: blue;
    text-align: center;

}

Here in the above example, we have used an element selector that will select the p tag. So in this example , all the paragraph tags will get the property, color:blue and text-align: center

Class selector

The class selector selects the elements based on the class name of the element.

.classOne{
     margin: auto;
    padding:0%

}

So in the above example, we are trying to apply styling to a tag whose class name is classOne. Here the Dot before the classOne shows that we are trying to use a class selector. More than one elements can have the same classname , so class selector can target all those elements who has that classname.

ID selector

The id selector selects the elements based on the id of the element.

#id1
{
    font-weight: 800;
    background-color: aqua;

}

So in the above example, we are trying to apply styling to a tag whose id is id1. Here the # before the id1 shows that we are trying to use an id selector. Id is always unique to an element . So the id selector gets applied on a unique element who has that particular id.

Chained selector

Chained selectors are used to select those tags which have atleast multiple classes. Suppose we have some elements which have same classname but we want to select a particular tag so we will add another class to it. This is where we use a chained selector.

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

So in the above example we have used a chained selector . We are trying to target an element which is li and it has two classes bg-black and text-white. This is called chaining.

Combined Selector

Combined selectors are those selectors where we are trying to apply different elements with the same styling.

p,div

{
  border: 2px solid red;
}

Here in the above case we are trying to apply styling border:2px solid red to two different elements, that is p tag and the div tag. So in place of writing the CSS individually for p and div tag ,we are using a combined selector, that is a comma.

Direct child selector

The direct child selector is denoted by a>b. This means it selects all the b's that are the direct child of a tag. Maybe a must have some child named c which has a child b. So those b's will not be considered.

div>p
{
color:red;
}

Here the CSS will be applied to all the p tags which are the direct child of div. Direct child selector is represented by >

Sibling selector

Sibling selector a+b is used in such a way that b tag comes right after a and both a and b are children of the same parent

<div>
      <h1>this is heading</h1>
      <p>this is para</p>
    </div>

h1+p
{
    background-color: green
}

Here styling background:red will get applied to p tag as p is next sibling of h1

Before Pseudo selector

Before Pseudo selector is used to add the content before the selected element. The following example shows the before pseudo selector.

<!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>
    h1::before
    {
      content: '';

      background-color: red;
      padding: 20px;
      border-radius: 50%;
    }

  </style>
</head>
<body>
  <h1>My heading tag</h1>

</body>
</html>

After Pseudo selector

After Pseudo selector is used to add the content after the selected element. The following example shows the after pseudo selector.

<!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>
    h1::after
    {
      content: '';

      background-color: red;
      padding: 20px;
      border-radius: 50%;
    }

  </style>
</head>
<body>
  <h1>My heading tag</h1>

</body>
</html>

Thank you very much for reading. Sahil

#iwritecode ##web-development #css #ineuron