CSS selectors are used to "find" (or select) the HTML elements you want to style.

We can divide CSS selectors broadly into five categories:

• Simple selectors (to select elements based on name, id, class).
• Combinator selectors (to select elements based on a specific relationship between them).
• Pseudo-class selectors (to select elements based on a certain state).
• Pseudo-elements selectors (to select and style a part of an element).
• Attribute selectors ( to select elements based on an attribute or attribute value).

A. Simple selectors

A.1. Element or Tag selector

The element selector selects HTML elements based on the element name.

Syntax

tag-name{
    property: value;
}

Example:

p {
    text-align: center;
}

h1{
    color: red;
}

A.2. CSS ID Selector

IDs in CSS start with a # sign, followed by the ID name.

Syntax

#ID{
    property: value;
}

Example: HTML element with id="container-1".

#container-1 {
    text-align: center;
}

A.3. CSS class Selector

To select elements with a specific class, write a period (.) character, followed by the class name.

Syntax

.class-name{
    property: value;
}

Example: HTML element with class="button-primary".

.button-primary {
    background-color: #ff11ff;
}

A.4. CSS universal Selector

The universal selector (*) selects all HTML elements on the page.

Syntax

*{
    property: value;
}

Example:

* {
    margin: 0px;
}

B. Combination selectors

B.1. Descendant selector (space)

The descendant selector selects all elements that are descendants of a specified element. It is used to target a particular element present inside a particular (or) nested under several elements. The selectors can be elements, class or ID.

Syntax

selector1 selector2 selector3{
    property: value;
}

Example: To select element with class=”heading”, under div, which is under body.

body div .heading{
  background-color: red;
}

B.2. Child Selector (>)

The child selector selects all elements that are the children of a specified element. The selectors can be elements, class or ID.

Syntax

selector1 > selector2{
    property: value;
}

Example: To select all

elements that are children of a

div > p {
  background-color: yellow;
}

B.3. 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". The selectors can be elements, class or ID.

Syntax:

selector1 + selector2{
    property: value;
}

Example: To select the first

element that are placed immediately after all

div + p {
  background-color: yellow;
}

B.4. General Sibling Selector (~)

The general sibling selector selects all elements that are next siblings of a specified element. The selectors can be elements, class or ID.

Syntax:

selector1 + selector2{
    property: value;
}

Example: To select all the

elements that are placed immediately after the

div + p {
  background-color: yellow;
}

C. Pseudo-classes

A CSS pseudo-class is a keyword that is added to a selector and defines a special state of the selected elements. The selected element could be simple or combination selectors. Pseudo-classes are represented by a colon(:).

Some of the most common CSS pseudo-classes are:

:active, :hover, :focus, **:disabled**, :checked, :first-child, :nth-child, :first-of-type.

Syntax

selector: pseudo-class{
    property: value;
}

Example: To change the background color and text color, during a mouse hover.

li:hover {
  background-color: black;
  color: white;
}

List of other pseudo-classes

D. Pseudo-elements

A pseudo-element is used to style specified parts of an element. The selected element could be simple or combination selectors. Pseudo-classes are represented by double colons(::).

Syntax

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

D.1. ::first-line Pseudo-element

The ::first-line pseudo-element is used to add a special style to the first line of a text.

Example: To format the first line of the text in all

elements.

p::first-line {
  color: #ff0000;
  font-variant: small-caps;
}

D.2. ::first-letter Pseudo-element

The ::first-letter pseudo-element is used to add a special style to the first character of a text.

Example: To format the first character of the text in all

elements.

p::first-letter {
  color: #ff0000;
  font-variant: small-caps;
}

D.3. ::before Pseudo-element

The ::before pseudo-element can be used to insert some content before the content of an element.

Example: To add a text “Hello” before h1 element.

h1::before {
  content: "Hello";
}

Example: To insert an image before the content of each

element.

h1::before {
  content: url("logo.png");
}

D.4. ::after Pseudo-element

The ::after pseudo-element can be used to insert some content after the content of an element.

Example: To add a text “Hello” after h1 element.

h1::after{
  content: "Hello";
}

Example: To insert an image after the content of each

element.

h1::after{
  content: url("logo.png");
}

D.5. ::marker Pseudo-element

The ::marker pseudo-element selects the markers of list items. Markers such as numbers in an ordered list, bullets in an un-ordered list, etc.

Example: To style the markers of the html.

::marker {
  color: red;
  font-size: 23px;
}

D.6. ::selection Pseudo-element

The ::selection pseudo-element matches the portion of an element that is selected by the user. Properties like color, background, cursor and outline can be changed using this pseudo-element.

Example: To make the selected text red on a yellow background.

::selection {
  color: red;
  background: yellow;
}

Special mention to Hitesh Choudhary for motivating me to write this blog!