CSS Selectors
Finding (or selecting) the HTML elements you want to style is what CSS selectors do.
They fall into five groups:
- Simple selectors pick elements by name, id, or class.
- Combinator selectors look at the relationship between elements.
- Pseudo-class selectors depend on a certain state.
- Pseudo-element selectors style just a part of an element.
- Attribute selectors check for an attribute or its value.
The most basic CSS selectors are the subject of this page.
The CSS element Selector
A tag name is all the element selector needs to pick HTML elements.
Example
Every <p> element on this page gets red, center-aligned text.
<style> block.
Select all <p> elements by name and make them center-aligned with red text. Include a few paragraphs.
Output: complete HTML page
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>CSS element Selector</title>
<style>
p {
text-align: center;
color: red;
}
</style>
</head>
<body>
<p>Every paragraph will be affected by the style.</p>
<p id="para1">Me too!</p>
<p>And me!</p>
</body>
</html>
The CSS id Selector
To reach one specific element, the id selector relies on the element's id attribute.
Since an id is unique on a page, only a single element is targeted.
The selector itself is a hash (#) and then the id.
Note: The id written after the hash cannot start with a number.
Example
The element with id="para1" receives this rule.
<style> block.
Style only the element with id="para1" using #para1, making it center-aligned with red text. Include one paragraph with that id and a couple of other paragraphs without it, so only the targeted one changes.
Output: complete HTML page
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>CSS id Selector</title>
<style>
#para1 {
text-align: center;
color: red;
}
</style>
</head>
<body>
<p id="para1">Hello World!</p>
<p>This paragraph is not affected by the style.</p>
</body>
</html>
The CSS class Selector
Elements carrying a specific class attribute are picked by the class selector.
The selector itself is a period (.) and then the class name.
A class can also be limited to one element type, and one element is free to use several classes.
Note: The name written after the period cannot start with a number.
All elements with a class
Anything with the class center turns red and center-aligned.
<style> block.
Use .center to make all elements with class="center" center-aligned with red text. Apply the class to a heading and a paragraph so it works across different element types.
Output: complete HTML page
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>CSS class Selector</title>
<style>
.center {
text-align: center;
color: red;
}
</style>
</head>
<body>
<h1 class="center">Red and center-aligned heading</h1>
<p class="center">Red and center-aligned paragraph.</p>
</body>
</html>
Class on one element type
The class center takes effect on <p> elements only, turning them red and center-aligned.
<style> block.
Use p.center so only <p> elements with class="center" are center-aligned with red text. Include a heading with class="center" (which should NOT change) and a paragraph with class="center" (which should change).
Output: complete HTML page
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>CSS class Selector on Paragraphs</title>
<style>
p.center {
text-align: center;
color: red;
}
</style>
</head>
<body>
<h1 class="center">This heading will not be affected</h1>
<p class="center">This paragraph will be red and center-aligned.</p>
</body>
</html>
More than one class
Two classes, center and large, style this paragraph at once.
<style> block.
Define a .center class (center-aligned red text) and a .large class (large font size). Add a paragraph with class="center large" so both rules apply to it.
Output: complete HTML page
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Multiple CSS Classes</title>
<style>
.center {
text-align: center;
color: red;
}
.large {
font-size: 300%;
}
</style>
</head>
<body>
<h1 class="center">This heading is red and center-aligned</h1>
<p class="center large">This paragraph refers to two classes.</p>
</body>
</html>