What is CSS ?

CSS stands for Cascading Style Sheets. It describes how HTML elements are to be displayed on screen, paper, or in other media.CSS saves a lot of work. It can control the layout of multiple web pages all at once. In other words, we can say CSS is the language we use to style a Web page.

Selectors in CSS

CSS selectors are used to find or select the HTML elements you want to style. There are many types of selectors in CSS. The major ones are...

• Universal Selector
• Individual Selector
• Class Selector
• ID Selector
• And Selector
• Combined Selector
• Inside the Element Selector
• Direct Child Selector
• Adjacent Sibling Combinator
• Before Pseudo Selector
• After Pseudo Selector

Here we will discuss one by one selectors in details...

Universal Selector

The CSS universal selector (*) matches elements of any type. It selects the entire HTML page.

Syntax

* { style properties }

Example

Output

Individual Selector

CSS Individual/Element Selector selects all elements with the specified element name.

Syntax

p {color: red;}

Example

Output

Class Selector

The .class selector selects elements with a specific class attribute. To select elements with a specific class, write a period (.) character, followed by the name of the class.

Syntax

.class{color: red;}

Example

Output

ID Selector

The #id selector styles the element with the specified id. It can only be once in the entire HTML page. To select elements with a specific id, write a hash (#) character, followed by the name of the id.

Syntax

#id {color: black;}

Example

Output

CSS Chained Selector

The chained selector is also defined as and selector. it is used when we want two or more conditions to be true then that situation the CSS styling is applied.

Syntax

.element.element{
   color: red;
}

Example

Output

Combined Selector

In this selector, we use one styled-components to style different elements. For example, if I want to style h1 elements and h4 elements in one CSS component or code and change the color black to red I used a combined selector. It separates via a comma (,).

Syntax

element,element {
  color: red;
}

Example

Output

Inside the Element Selector

When you select a child or sub-child that is present inside the parent or child then we will use an inside element selector. and it is many time used in real-life projects.

Syntax

div ul li {
color: red;
}

Example

Output

Direct Child Selector

The child combinator (>) is placed between two CSS selectors. It matches only those elements matched by the second selector that are the direct children of elements matched by the first.

Syntax

div > li { 
              color: red;
            }

Example

Output

Adjacent Sibling Combinator

The adjacent sibling combinator (+) separates two selectors and matches the second element only if it immediately follows the first element, and both are children of the same parent element.

Syntax

.sibling + p {
                    color: red;
                   }

Example

Output

Before Pseudo Selector

In CSS, ::before creates a pseudo-element that is the first child of the selected element. It is often used to add cosmetic content to an element with the content property. It is inline by default.

Syntax

::before {
              content: "Hey";
              }

Example

Output

After Pseudo Selector

In CSS, ::after creates a pseudo-element that is the last child of the selected element. It is often used to add cosmetic content to an element with the content property. It is inline by default.

Syntax

::after {
            content: "Bye";
           }

Example

Output

Thank you so much for reading this...