A CSS selector selects the HTML element(s) you want to style

CSS Selectors

We can divide CSS selectors into five categories:
Simple selectors (select elements based on name, id, class)
Combinator selectors (select elements based on a specific relationship between them)
Pseudo-class selectors (select elements based on a certain state)
Pseudo-elements selectors (select and style a part of an element)
Attribute selectors (select elements based on an attribute or attribute value)

Simple selectors

The CSS element Selector

The element selector selects HTML elements based on the element name

Example

Here, all <p> elements on the page will be center-aligned, with a red text color: 

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

The CSS 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="para1": 
#para1
{
text-align: center;
color: red;
}

The CSS 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 red and center-aligned:
.center
{
text-align: center;
color: red;
}

CSS Combinators

A combinator is something that explains the relationship between the selectors.
A CSS selector can contain more than one simple selector. Between the simple selectors, we can include a combinator.
There are four different combinators in CSS:

1.descendant selector (space)

2.child selector (>)

3.adjacent sibling selector (+)

4.general sibling selector (~)

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 matches all elements that are child of a specified element.

Example

The following example selects all <p> chiled of <div> elements:
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;
}

CSS Pseudo-classes :

What are Pseudo-classes?

A pseudo-class is used to define a special state of an element.
For example, it can be used to:
Style an element when a user mouses over it
Style visited and unvisited links differently
Style an element when it gets focus

Syntax

selector:pseudo-class {
property: value;
}

CSS Pseudo-elements :

What are Pseudo-Elements?

A CSS pseudo-element is used to style specified parts of an element.
For example, it can be used to:
Style the first letter, or line, of an element
Insert content before, or after, the content of an element

Syntax

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

CSS Attribute Selectors

The [attribute] selector is used to select elements with a specified attribute.
The following example selects all <a> elements with a target attribute:

Example

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

CSS [attribute="value"] Selector

The [attribute="value"] selector is used to select elements with a specified attribute and value.
The following example selects all <a> elements with a target="_blank" attribute:

Example

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