Basic selectors

1. Universal Selector:

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

Example-

The CSS rule below will affect every HTML element on the page:

/* asterisk symbol means apply to all */
*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

2. Element Selector:

The element selector selects all elements with the specified element name.

Example-

Select and style all p elements:

p {
  background-color: orange;
}

3. Class Selector:

The class selector selects HTML elements with a specific class attribute.

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

Example-

In this example all HTML elements with class="center" will be orange and center-aligned:

.center {
  text-align: center;
  color: orange;
}

4. ID Selector:

The id selector uses the id attribute of an HTML element to select a specific element.

The id of an element is unique within a page, so the id selector is used to select one unique element!

To select an element with a specific id, write a hash (#) character, followed by the id of the element.

Example-

The CSS rule below will be applied to the HTML element with id="para2"

#para2 {
  text-align: center;
  color: red;
}

5. Grouping Selector:

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

Example-

In this example we have grouped the element selectors:

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

6. Attribute selector:

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

Example-

input[type="text"] {
border : 2px solid red;
}

CSS Combinators

1. Descendant Selector:

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;
}

2. 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;
}

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".

Example-

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

div + p {
  background-color: yellow;
}

4. 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 Selectors

1. Pseudo-classes

A pseudo-class is used to define a special state of an element.

Example-

When you hover over the link, it will change color:

a:hover {
  color: blue;
}

We also have some more following Pseudo-classes:

:last-child
:last-of-type
:first-child
:first-of-type
:nth-child(n)

2. Pseudo-Elements

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

CSS ::after Selector

The ::after selector inserts something after the content of each selected element(s).

Example-

Insert some text after the content of each p element:

p::after {
  content: " - Insert some text";
}

CSS ::before Selector

The ::before selector inserts something before the content of each selected element(s).

Example-

Insert some text before the content of each p element:

p::before {
  content: "Insert some text";
}