The CSS selector helps us to target an HTML element in our web page.

What is Selector?

The CSS selectors are commonly used to target an HTML element which helps us to specify the specific value to specific elements within our web page.

Here are some of the selectors:-

Basic Selector

👉 Universal Selector

In CSS Universal Selector is denoted with Asterisk ( * ) . it helps us to select all the HTML elements on our web page.

Syntax

        * { style properties }

👉 Type Selector

A Type Selector is used to represent the instance of the element type in the document tree .

Syntax

        elementname{ properties }

👉 Class Selector

The .class Selector selects elements with a specific class attribute. it is denoted with a dot ( . ) with the name of the class ( .class ) .

Syntax

    .class_name { style properties }

👉 ID Selector

The id Selector uses the id attribute of an HTML element to select the specific element, the id of an element is unique on the web page due to with it can only be assigned to only one HTML element.

Syntax

   #id_value { style properties }

👉 Attribute Selector

The Attribute Selector is used to select the element with some specific attribute or attribute value.

Syntax

  [attribute] { style properties  }

Group Selector

👉 Selector List

The Selector List in CSS is used to select all the matching nodes within the web page, It is referred to (, ).

Syntax

  element, element, element { style properties }

Combinators

👉 Descendant Selector

Descendant selector is used to select all the descendants of the specified element.

Syntax

  selector1 selector2 {
    /* property declarations */
  }

👉 Child Selector

Child Selector is used to selecting all the child elements of the specified element.

Syntax

  selector1 > selector2 { style properties }

👉 General Sibling Selector

General Sibling Selector is used to select all the specific elements after the specified element.

Syntax

  former_element ~ target_element { style properties }

👉 Adjacent Sibling Selector

Adjacent Sibling Selector is used to select the element that is directly after the specific element.

Syntax

  former_element + target_element { style properties }

👉 Column Selector

The Column Selector referred to with ( || ), is placed between two CSS selectors. it matches only those elements matched by the second selector that belong to the column elements matched by the first.

Syntax

  column-selector || cell-selector {
  /* style properties */
}

you can have a better understanding of the column selector on the link given below. column combinator

Pseudo

👉 Pseudo-classes

A Pseudo-class is a keyword added to a selector to specify a special state of a special element, like to style an element when the user mouses over it, style the element when it gets focused or when to style visited and unvisited links differently.

Syntax

        selector:pseudo-class {
        property: value;}

Some commonly used Pseudo classes are:-

• :hover
• :active
• :visited
• :focus
• :checked

👉 Pseudo-elements

A Pseudo-element is a keyword added to a selector that lets us style the specific part of our selected elements.

Syntax

  /* The first line of every <p> element. */
  selector::pseudo-element {
    property: value;
  }

• ::first-line

  it is used to change the first line of the specified paragraph in our webpage.

• ::first-letter

  it is used to change the first letter of the specified paragraph in our webpage.