Everything you need to know about - CSS Selectors

What is a CSS Selector?

To select and style various elements in HTML (aka DOM Nodes) we use CSS selectors. We have many variations in selectors, Let's look into mostly used CSS selectors in this article. I hope you're pumped up, excited, and ready to start, Fasten your seatbelts because it's going to be a breeze.

Few most commonly used CSS Selectors

Here is the list of commonly used CSS Selectors.

• Universal Selector
• Type Selector (Element Selector, Individual Selector)
• Class Selector
• Id Selector
• Attribute Selector
• Selector List

Let's start with a universal selector

This selector helps us to select all the HTML elements (aka DOM Nodes) and apply the same style to every element present in the HTML document.

Syntax:

*{
    ...
}

Example:

NOTE: Sometimes the universal selectors are used to remove default browser styling using this chunk of code. Refer to the example 👇

*{
  margin: 0px;
  padding: 0px;
  box-sizing: border-box;
}

Type selector

This selector has various names like Element Selector and Individual Selector. It selects and applies styles to all the elements in HTML with the same type.

Syntax:

element {
    ...
}

Example:

Class selector

This selector selects and applies styles to all the HTML elements having the same class name specified.

Syntax:

.className {
    ...
}

Example:

Id selector

This selector selects and applies styles to the HTML elements having the same id mentioned while selecting.

Syntax:

#id {
    ...
}

NOTE: Id for every element should be unique.

Example:

Attribute Selector

It selects and applies styles to HTML elements that have specified attributes.

Syntax:

[attribute] {
    ...
}

Example:

Selector List

Here we combine two or more selectors of the same type or different type and apply the same styles to them

Syntax:

selectorOne, selectorTwo {
    ...
}

Example:

Combinators

A combinator is something that explains the relationship between the selectors. I understand the definition is slightly complex. We shall understand it clearly in the following examples. Few commonly used combinators are listed below.

• Descendant Combinator
• Child Combinator
• General Sibling Combinator
• Adjacent sibling combinator

Descendant combinator

It selects all the descendants ( i.e. children or grandchildren ) of the parent element. A descendant combinator is denoted by " ".

Syntax:

elementOne elementTwo {
    ...
}

It selects all the descendants of the type elementTwo inside elementOne.

Example:

Child combinator

It selects HTML elements that are only the direct children of the first element. Child combinator is denoted by " > ".

Syntax:

elementOne>elementTwo {
    ...
}

selects all the elements of type elementTwo which are direct children of elementOne.

Example:

General sibling combinator

It selects all elements that are next siblings of a specified element. Yeah again, it's a complicated definition 😣. But the example below will clear your doubts 😍.

The general sibling combinator is denoted as " ~ ".

Syntax:

elementOne ~ elementTwo {
    ...
}

Example:

Adjacent sibling combinator

Here this combinator only selects the second element only if it is immediately following the first element.

Adjacent sibling combinator is denoted as " + ".

Syntax:

elementOne + elementTwo {
    ...
}

Example:

Pseudo Selectors

• Pseudo-classes
• Pseudo elements

Pseudo-classes

It selects elements based on state information that is not available in the document tree or document object model.

Pseudo-classes start with " : "

Few pseudo-classes are :hover, :first-child, :last-child, :focus etc.

Syntax:

elementOne : pseudo-class{
    ...
}

Example:

Pseudo-elements

It represents the entities that are not included in HTML.

Pseudo-classes start with " :: "

Few pseudo-classes are ::before, ::after, :first-line etc.

Syntax:

elementOne :: pseudo-element{
    ...
}

Example: