Table of Contents:
What are CSS selectors?
Types of CSS Selectors:
1. Simple CSS selector
2. Grouping selector
3. CSS Combinators
4. Pseudo class selector
5. Pseudo element select

What are CSS Selectors?

CSS selectors help to target and select the element that you want to style.

CSS selectors allow you to select multiple elements at the same time.

They are helpful when you want to apply the same style to more than one HTML element because you are not going to write the same line of code for the different HTML elements.

Types of CSS selectors:

Simple CSS Selectors:

selector that allows you to target and select a specific part of your document for styling purposes.

Simple selectors directly select one or more elements:

by using the universal selector
based on the name and type of the elements
based on the class value of the elements
based on the ID value of the elements

CSS Universal Selector

With this selector, you can easily choose any element in the document, no matter where it is or what type it is.

To use the universal selector, use the asterisk * character.

*{
   property:value;
 }

Use the universal selector to reset browser padding and margins to zero before applying styles.

*{
margin:0;
padding:0;
}

CSS type selector

This selector picks out all of the specific HTML elements. To utilize it, state the name of the element.

For example, To apply a style to every paragraph in an HTML document, you need to specify the p element.

p{
color:red;
}

The code above selects all the paragraph elements and makes the text color red.

CSS Class Selector

The class selector selects HTML elements based on the value of their given class. Specifically, it selects every single element in the document with that specific class name.

To select elements with the class selector, use the dot character (.) followed by the name of the class.

.classvalue{
property:value;
}

In the code above, elements with the class of classvalue are selected and styled accordingly.

CSS ID Selector

The ID selector selects HTML based on the value of its ID attribute.

And the ID attributes of an element should be unique in a document, meaning there should only be one HTML element with that given ID. You can't use the same ID value on a different element besides that one.

To select the element with the specific ID, use the hash character, # followed by the name of the ID value:

#myvalue{
property:value;
}

The code above will match only the unique element with the ID value of myvalue .

Grouping CSS selector

With the grouping selector, you can target and style more than one element at once.

To use the grouping selector use a comma , to group and separate the different elements you want to select.

For example, here you would target multiple elements such as div,p,a ,and span and apply the same style to each of them:
```
 div,p,a,span{
 property:value;
 }
```
CSS Combinators

This selector allows you to combine two elements based on the relationship between the elements and their location in the document.

There are four types of combinators:

Descendant combinator.
Direct child combinator.
General sibling combinator
Adjacent sibling combinator

Descendant combinator

It selects only the descendants of the specific element.

First, you mention the parent element, leave a space, and mention the descendant of the first element, which is the child element of the parent. The child element is an element inside the parent element.

For example,

<!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">
  <link rel="stylesheet" href="main.css">
  <title>Document</title>
</head>
<body>
  <div>
    <h2>I am level 2 heading</h2>
    <p>I am a paragraph inside a div</p>
    <span>I am a span</span>
    <p>I am a paragraph inside a div</p>
  </div>
  <p>I am a paragraph outside a div</p>
</body>
</html>

In the above example, the div is the parent and the h2 ,span and two p are the child element because they are inside the div element.

If you want to style the p inside the div, here is what you would do:

div p{
property:value;
}

In the above example, only two paragraphs inside the div that have the text I am a paragraph inside a div get style. The two-child element and the paragraph outside the div element will not get styled.

Sashi Rajbanshi's Blog