CSS Selectors

CSS Tutorial

A CSS selector selects the HTML element(s) that you desire to style.

CSS selectors are used to “find” (or select) the HTML elements for styling.

We can divide CSS selectors into five categories:

Simple selectors use the elements based on name, id, and class.
Combinator selectors use the elements based on a specific relationship between them.
pseudo-class selectors use the elements based on a condition of the state.
Pseudo-elements selectors select and style a part of an element.
Attribute selectors use the elements based on an attribute or attribute value.

1) The CSS element Selector

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

Example

<!DOCTYPE html>
<html>
<head>
<style>
p {
text-align: center;
color: red;
}
</style>
</head>
<body>

<p>How are You?</p>
<p>Hello!</p>
<p>Hey!</p>
</body>
</html>

Output

How are You?

Hello!

Hey!

2) The CSS id Selector

The id selector selects a specific element by using the id attribute of an HTML element.

The id of an element is unique inside a page, therefore the id selector is used to choose one unique element!

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

Example

<!DOCTYPE html>
<html>
<head>
<style>
#para1 {
text-align: center;
color: red;
}
</style>
</head>
<body>

<p>How are You?</p>
<p id=”para1″>Hello!</p>
<p>Hey!</p>
</body>
</html>

Output

How are You?

Hello!

Hey!