CSS Selectors

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

Types of Selectors

Element/Type Selector
Id Selector
Class Selector
Attribute Selector
Combinators
Pseudo Classes
Pseudo Elements

Element Selector

Selects HTML elements based on the element name.

p {
	color: red;
}

Applies the styles to all paragraph elements

id Selector

Uses the id attribute of an HTML element to select a specific element.
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.

#heading {
	color: orange;
}

class Selector

Class means classification or category
Selects HTML elements with a specific class attribute.
To select elements with a specific class, write a period (.) character, followed by the class name.

.center {
	text-align: center
}

attribute Selector

Used to select elements with a specified attribute.

a[target] {
	color: red;
}

a[target] - Selects all elements with a target attribute a[target="_blank"] - Selects all elements with target="_blank" a[href*="google"]- Selects all elements that contains a[href^="https"]- Selects all elements that starts with a[href$="com"]- Selects all elements that end with a[href^="https"][href$=".com"]- Specify multiple attributes

Grouping Selectors

Group all the selectors which has same style definition

h1 {
  color: red;
}

h2 {
  color: red;
}

p {
  color: red;
}

h1, h2, p {
	color: red;
}

All Elements Selector

Selects all elements

* {
	font-size: 12px;
}

CSS

Basics