The term "CSS selector" refers to the process of handling any HTML element with CSS. In order to choose elements for a certain style, CSS selectors are utilised. It generally specifies the pattern to choose the items that will be subject to applying a set of CSS rules.

CSS Selectors category

An explanation of how the selectors relate to one another. There are 5 different types of CSS selectors:

1. Simple selectors🔈

selecting the items in a straightforward manner, such as by utilising the element name, class, and id names, or by grouping many elements

Simple selectors are further classified into 4 categories:

i. Universal Selector🌐

The term "universal" implies that we target every HTML element. The symbol "*" is used as a universal selector.

Syntax: * {property : value;}

In this example, the color, margin, and border were set and then applied using the universal selector so that every element could be seen to have changed.

ii. Element Selector🖇️

Based on the element name, the element selector identifies HTML elements and designs using CSS. To style, a specific HTML element, use this selector. Depending on our requirements, we may simply choose any tag and design.

Syntax: element-name {property : value;}

We can see from the example that we dealt with the element name directly. The h3 and p elements have changed, as can be seen. We can do the same way with other elements.

iii. Grouping Selector🎁

We can choose numerous HTML elements to which we wish to apply the same style, by using the grouping selector. To reduce the amount of code, grouping the selectors will be preferable. Selectors should be separated by commas to be grouped.

Syntax: element-name1, element-name2,... {property : value;}

Here, we've used a grouping selector to style the h3, h2, and p elements. You may group additional elements and apply styles to them as well.

iv. Class and id Selector🎭

HTML components may be distinguished using CSS's class and ID selectors. The primary benefit of class and ID is that they allow us to present the same HTML element in various ways.

To utilise the class attribute, we use the dot (.) symbol followed by the class name. The class selector finds and matches all the elements with the selected class and makes modifications to all our desired classes.

While the ID selector is the special value assigned to the specific HTML tag that we wish to style, the id attribute is used by preceding the id name with the # symbol.

Syntax for class selector: .class-name {property : value;}

Syntax for id selector: #id-name {property : value;}

When we use the id "second" to style an element because each id is unique, just the selected id gets styled, however when we use the class "para" here, all the elements with the para class get designed.

2. Combinator Selectors🔉

The connection between two selectors is explained by CSS combinators.

It is further broken down into 4 categories:

i. Adjacent Sibling Selector (+)➕

One tag, immediately adjacent to the selected element, is chosen by the adjacent sibling selector. There must be a common parent element between siblings elements. The plus symbol "+" is used to pick the only one sibling the specified target element.

Syntax: selector1 + selector2 { property: value; }

In this case, the p tag was only styled because it follows the h3 immediately.

ii. General Sibling Selector (~)🔀

The general sibling selector chooses all siblings after the selected element. Between siblings elements, there must be a shared parent element. The tilde symbol "~" is used to pick the sibling of the specified target element.

Syntax: selector1 ~ selector2 { property: value; }

In this case, all p tag was styled because all p tags are the siblings of h3 and belong to same parent.

iii. Descendant Selector (space)🈁

All of the child components of the specified element are selected using this selector. The elements may be directed child to the target element or they may be nested very deeply within the target element. The space character " " is used to pick all the children in the specific target element.

Syntax: selector1 selector2 { property: value; }

In this example, we choose the paragraph within box class, and it found every paragraph inside the box class and changed its style.

iv. Child Selector (>)▶️

Only the direct child element is chosen using the child selector. We utilise the child selector to avoid this challenge as all nested element children are likewise picked when using the descendent selector. The greater than character "> " is used to pick the direct children in the specific target element.

Syntax: selector1 > selector2 { property: value; }

This example demonstrates how p tags that are direct children of the box are styled.

3. Attribute Selectors🔊

Each HTML element contains a set of attributes, and choosing items according to an attribute or attribute value is known as an attribute selector.

In this example, we've chosen the input attribute with the email type and styled it.

4. Pseudo Classes Selectors📢

To describe an element's unique state, a pseudo-class is utilised in CSS. Choosing parts according to a specific state. To give existing items an effect based on their states, it may be used in combination with a CSS Pseudo selector. With the help of pseudo-class, we are also able to choose an HTML element without declaring its class or ID and instead just use the hidden address and style it.

Syntax: selector:pseudo-class { property: value; }

To pick or style the element in this example, we used the hover effect, nth-child(), last-child, and first-child pseudo classes.

5. Pseudo Elements Selectors📣

Specific portions of an element can be styled using a CSS pseudo-element. For styling, the initial letter or line of an element, uses a pseudo-element. The content may be inserted before or after an element using the pseudo-elements as well.

Syntax: selector::pseudo-element { property: value; }

The impact of::before,::after,::first-line,::first-letter, and ::selection on an element was demonstrated in the above example.

This marks the end of our discussion on CSS selectors, in which we covered all the key information.

Hope you like it.😊 Happy Learning😊