CSS Selectors

Dark code
  HTML   
 Menu  Log in
CSS Selectors
‹ Previous Next ›
A CSS selector selects the HTML element(s) you

want to style.
CSS Selectors
CSS selectors are used to "find" (or select) the
HTML elements you want to style.
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)
This page will explain the most basic CSS 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;
}
Try it Yourself »
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;
}
Try it Yourself »
Note: An id name cannot start with a number!
ADVERTISEMENT
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;
}
Try it Yourself »
You can also specify that only specific HTML

elements should be affected by a class.
Example
In this example only <p> elements with
class="center" will be red and center-aligned:
p.center {
text-align: center;
color: red;
}
Try it Yourself »
HTML elements can also refer to more than one

class.
Example
In this example the <p> element will be styled
according to class="center" and to class="large":
<p class="center large">This paragraph

refers to two classes.</p>
Try it Yourself »
Note: A class name cannot start with a number!
The CSS 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:
* {
text-align: center;
color: blue;
}
Try it Yourself »
The CSS Grouping Selector

The grouping selector selects all the HTML elements
with the same style definitions.
Look at the following CSS code (the h1, h2, and p

elements have the same style definitions):
h1 {
text-align: center;
color: red;
}
h2 {
text-align: center;
color: red;
}
p {
text-align: center;
color: red;
}
It will be better to group the selectors, to minimize

the code.
To group selectors, separate each selector with a

comma.
Example
In this example we have grouped the selectors from
the code above:
h1, h2, p {
text-align: center;
color: red;
}
Try it Yourself »
Test Yourself With Exercises
Exercise:
Set the color of all <p> elements to red.
<style>
{
red;
}
</style>
Submit Answer »
Start the Exercise
All CSS Simple Selectors
Selector Example Example

description
#id #firstname Selects the

element with
id="firstname"
.class .intro Selects all

elements with
class="intro"
element.class p.intro Selects only

<p> elements
with
class="intro"
* * Selects all
elements
element p Selects all

<p> elements
element,element,.. div, p Selects all

<div>
elements and
all <p>
elements
‹ Previous Next ›
ADVERTISEMENT
NEW
We just launched
W3Schools videos
Explore now
COLOR PICKER

Get certified
by completing
a CSS
course today!
school
w3 s
2
CE
02
TI 2
R
FI
ED .
Get started
CODE GAME
Play Game
ADVERTISEMENT
Report Error
Spaces
Pro
Buy Certificate
Top Tutorials
HTML Tutorial
CSS Tutorial
JavaScript Tutorial
How To Tutorial
SQL Tutorial
Python Tutorial
W3.CSS Tutorial
Bootstrap Tutorial
PHP Tutorial
Java Tutorial
C++ Tutorial
jQuery Tutorial
Top References
HTML Reference
CSS Reference
JavaScript Reference
SQL Reference
Python Reference
W3.CSS Reference
Bootstrap Reference
PHP Reference
HTML Colors
Java Reference
Angular Reference
jQuery Reference
Top Examples
HTML Examples
CSS Examples
JavaScript Examples
How To Examples
SQL Examples
Python Examples
W3.CSS Examples
Bootstrap Examples
PHP Examples
Java Examples
XML Examples
jQuery Examples
Get Certified
HTML Certificate
CSS Certificate
JavaScript Certificate
Front End Certificate
SQL Certificate
Python Certificate
PHP Certificate
jQuery Certificate
Java Certificate
C++ Certificate
C# Certificate
XML Certificate
FORUM | ABOUT
W3Schools is optimized for learning and training. Examples

might be simplified to improve reading and learning.
Tutorials, references, and examples are constantly reviewed
to avoid errors, but we cannot warrant full correctness of all
content. While using W3Schools, you agree to have read
and accepted our terms of use, cookie and privacy policy.
Copyright 1999-2022 by Refsnes Data. All Rights Reserved.

W3Schools is Powered by W3.CSS.

CSS Selectors

Uploaded by

Copyright:

Available Formats

CSS Selectors

Uploaded by

Document Information

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

CSS Selectors

Uploaded by

Copyright:

Available Formats

Dark code

A CSS selector selects the HTML element(s) you

We can divide CSS selectors into five categories:

Simple selectors (select elements based on

This page will explain the most basic CSS selectors.

The CSS element Selector

The CSS id Selector

The id of an element is unique within a page, so the

To select an element with a specific id, write a hash

Note: An id name cannot start with a number!

The CSS class Selector

To select elements with a specific class, write a

You can also specify that only specific HTML

HTML elements can also refer to more than one

<p class="center large">This paragraph

Note: A class name cannot start with a number!

The CSS Universal Selector

The CSS Grouping Selector

Look at the following CSS code (the h1, h2, and p

It will be better to group the selectors, to minimize

To group selectors, separate each selector with a

Test Yourself With Exercises

Start the Exercise

All CSS Simple Selectors

Selector Example Example

#id #firstname Selects the

.class .intro Selects all

element.class p.intro Selects only

element p Selects all

element,element,.. div, p Selects all

W3Schools is optimized for learning and training. Examples

Copyright 1999-2022 by Refsnes Data. All Rights Reserved.

You might also like