GeezerVison

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 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!

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 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 element will be styled according to class="center" and to class="large":

This paragraph refers to two classes.

Try it Yourself »

Note: A class name cannot start with a number!

❮ Previous Next ❯

★ +1

W3Schools Full Access - your next career move

REMOVE ADS

Learn more about Adventure Mode›

Free account

Track your progress

XP earned 0 Day streak 0 Spaces 0 League —

New

Learn in Adventure Mode W3Schools Adventure App

Coding fundamentals as bite-sized lessons and challenges.

Contact Sales

If you want to use W3Schools services as an educational institution, team or enterprise, send us an e-mail:
[email protected]

Report Error

If you want to report an error, or if you want to make a suggestion, send us an e-mail:
[email protected]

   

FORUM ABOUT CAMPUS

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, cookies and privacy policy.

Copyright 1999-2026 by Refsnes Data. All Rights Reserved. W3Schools is Powered by W3.CSS.

You are visitor 01402503 — GeezerVison does not store the pages you look up.
Best viewed with Netscape Navigator 4.7 or Internet Explorer 6 at 800×600. No cookies required.

GeezerVison

CSS Tutorial

CSS Advanced

CSS Flexbox

CSS Grid

CSS Responsive

CSS Cert

CSS SASS

CSS Examples

CSS References

CSS Selectors

CSS Selectors

The CSS element Selector

Example

The CSS id Selector

Example

The CSS class Selector

Example

Example

Example

Track your progress

Learn in Adventure Mode W3Schools Adventure App

Contact Sales

Report Error

Top Tutorials

Top References

Top Examples

Get Certified