In this blog 📑, you will learn all about CSS selectors and their different types.

CSS Selectors

CSS selectors are used to selecting the content you want to style. Selectors are the part of CSS rule set. CSS selectors select HTML elements according to their id, class, type, attribute, etc.

• Universal selector
• Class selector
• ID Selector
• Type Selector (Element)
• Grouping Selector
• Attribute Selectors
• Descendant Selector(space)
• Child Selector (>)
• Adjacent Sibling Selector (+)
• General Sibling Selector (~)
• Pseudo-class Selector ( : )
• Pseudo-elements selector ( : : )

Universal Selector ✳

The Universal ( * ) selector selects all the elements and styles them. It can also select all elements inside another element.

Syntax

* {
  /* CSS code written here*/
}

This will select all elements.

Example

The below example select all elements, and set their background color to yellow

* {
  background-color: yellow;
}

The below example turns all the elements inside the "div" element to skyblue.

div * {
  background-color: skyblue;
}

Class Selector

The .class selector selects and styles all elements within the class that is specified. To use a class selector we must use dot (.) before the class name.

Syntax

.class-name {
  /* CSS code written here */
}

Example

In the example below, the background color of all elements in the .bg-pink class changes to pink as specified in the CSS file.

.bg-pink {
  background-color: pink;
}

ID Selector

The #id selector selects and styles the element with the specified id. To use an id selector we must use hash ( # ) before the id name.

Syntax

#idname {
  /* CSS code written here */
}

Example

In the example below, element with the id 'topic' changes its background color and the element with the id "example" changes its font color to blue.

#topic {
  background-color: yellow;
}

#example {
  color: blue;
}

Type Selector

The type selector selects and styles all elements with the specified element name.

Syntax

element {
  /* CSS code written here */
}

Example

In the example below, the font color of all the <p> elements changes to red and all of them are aligned in the center.

p {
  color: red;
  text-align: center;
}

Grouping Selector

The grouping selector selects all the HTML elements with the same style definitions.

Look at the following CSS code (the h1, h2, and p elements have the same style definitions)

h1 {
  text-align: center;
  color: blue;
}

h2 {
  text-align: center;
  color: blue;
}

p {
  text-align: center;
  color: blue;
}

It will be better to group the selectors, to minimize the code. To group selectors, separate each selector with a comma ( , ).

h1, h2, p {
  text-align: center;
  color: blue;
}

Attribute Selectors

The [attribute] selector is used to select elements with a specified attribute.

Syntax

[attribute]{
     /* CSS code written here */
}

Example

The following example selects all <a> elements with a target attribute

a[target] {
  background-color: yellow;
}

Descendant Selector(space)

The descendant selector matches all elements that are descendants of a specified element.

Example

The following example selects all <p> elements inside <div> elements:

div p {
  background-color: yellow;
}

Child Selector ( > )

The child selector selects all elements that are the children of a specified element.

Example

The following example selects all <p> elements that are children of a <div> element:

div > p {
  background-color: yellow;
}

Adjacent Sibling Selector (+)

• The adjacent sibling selector is used to select an element that is directly after another specific element.

• Sibling elements must have the same parent element, and "adjacent" means "immediately following".

Example

The following example selects the first <p> element that are placed immediately after <div> elements:

div + p {
  background-color: yellow;
}

General Sibling Selector (~)

The general sibling selector selects all elements that are next siblings of a specified element.

Example

The following example selects all <p> elements that are next siblings of <div> elements

div ~ p {
  background-color: yellow;
}

Pseudo-class Selector ( : )

A CSS pseudo-class is a keyword added to a selector that specifies a special state of the selected element(s).

Example

For example, :hover can be used to change a button's color to blue when the user's pointer hovers over it.

button:hover {
  color: blue;
}

Pseudo-elements selector ( : : )

A CSS pseudo-element is used to style specified parts of an element. use of pseudo element selector

• Style the first letter, or line, of an element
• Insert content before, or after, the content of an element

Example

For example ::first-letter pseudo-element is used to add a special style to the first letter of a text, here this will format the first letter of the text in all <p> elements

p::first-letter {
 font-size:1.5rem;
 font-weight: bold;
}

Hope you like this blog.There are many more Pseudo-elements and Pseudo-class selectors which we will talk about later in another blog.

>NOTE: There are no selectors or combinators to select parent items, siblings of parents, or children of parent siblings.