CSS Types of Selectors

Just like any programming language works, the CSS code is also interpreted based on some rules.
Here, the browser interprets what is called the style rules.
Based on the rules, it applies the design to the corresponding elements of the webpage.

The style rule can be seen as following 3 parts:

Selector – This is the HTML part of your webpage. Any HTML tag that will be styled by the CSS code is termed a Selector.
Property – All the hassle that once had to be done as HTML attributes, now falls under this category. Simply put, all the color, border, cell padding, etc. attributes of your HTML tags are now the CSS properties
Value – We have the style-ee we have the style-er all that remains is the style. The value corresponds to the style value given to the Property to be applied for the Selector.

CSS Syntax

The basic syntax for a basic CSS code can be shown as

the general syntax of defining a CSS rule is as above.

the selector then inside parenthesis property: value.

CSS Types of Selectors

Selectors with a specific type body,h1, div span, etc

CSS Type Selector

Selectors with a specific type body,h1, div span, etc

It will show the result

Universal Selectors

This is when you want don’t want the selector to be specific for type and be universally applied at all tags * is used as a universal selector

CSS Universal Selectors

Universally applied at all tags

It will show the result

Descendant Selectors

It’s for when you want a style to be applied to an element only in case it is a part of another specific element

color will only apply to p inside the div

CSS Descendant Selectors

Descendant selector applied to all p tags inside the div

Descendant selector not applied to p tag outside div

It will show the result

Class Selectors

As the name suggests, this is for the styling of the class attribute in CSS class is represented by the class name preceded by a dot(.),

CSS Class Selectors

applied based on class

It will show the result

ID Selectors

Similar to class selectors, this is for the id attribute to be assigned on CSS with # then the id attribute value

CSS Id Selectors

applied based on the id

It will show the result

Child Selectors

It is very much similar to descendant selectors in its execution. chile selector selects only the immediate child of a tag whereas the descendent selector selects a tag at any level inside the parent tag. to select a child we use > symbol

CSS Child Selectors

applied based on the id

It will show the result

Attribute Selectors

You can specify a particular attribute (e.g. type= “password”) that you want to style.

Attribute Selectors

It will show the result

Multiple Style Selectors

You can have multiple properties for a single selector depending on the style requirement. Each property-value pair is separated by a semicolon (;)

You can specify a particular attribute (e.g. type= “password”) that you want to style.

CSS Multiple Style Selectors

We can apply multiple styles separated by semicolumn

It will show the result

Grouping Selectors

This is when many selectors have similar property-value pairs.

CSS Multiple Style Selectors

CSS Multiple Style Selectors

CSS Multiple Style Selectors

We can apply the same style to multiple selectors

It will show the result

As we discussed CSS Types of Selectors. Hope you understand and are able to implement the concepts.