A selector allows us to associate one or more declarations to one or more elements on the page.
Basic selectors
Suppose we have a
pelement on the page, and we want to display the words into it using
the yellow color.
p {
color: yellow;
}
Here in the aboved example we target p element as a selector
which will apply the style to all
ptag that we have in the page.
Every HTML tag has a corresponding selector, for example:
div,
span,
img.
If a selector matches multiple elements, all the elements in the page will be affected by the change.
HTML elements have 2 attributes which are very commonly used within
CSS to associate styling to a specific element on the page:
class
and
id.
There is one big difference between those two: inside an HTML
document you can repeat the same
class
value across multiple elements, but you can only use an
id
once. As a corollary, using classes you can select an element with 2
or more specific class names, something not possible using ids.
Classes are identified using the
.
symbol, while ids using the
#
symbol.
Example using a class:
.my-class {
color: yellow;
}
Example using a id:
#my-id {
color: yellow;
}
So far we've seen how to target an element, a class or an id. Let's introduce more powerful selectors.
Why would you want to do that, if the class or id already provides a way to target that element? You might have to do that to have more specificity. We'll see what that means later.
Targeting multiple classes
You can target an element with a specific class using .class-name , as you saw previously. You can target an element with 2 (or more) classes by combining the class names separated with a dot, without spaces.
Example:
.my-class.another-class {
color: yellow;
}
A selector can target one or more items:
p, a {
font-size: 16px;
}
Combining classes and ids
In the same way, you can combine a class and an id.
Example:
.my-class#my-id {
color: yellow;
}
Grouping selectors
You can also group selectors together, to apply the same styles to different elements. To do that, you just need to separate the selectors with a comma.
Example:
p, a, .my-class {
color: yellow;
}
Follow the document tree with selectors
We've seen how to target an element in the page by using a tag name, a class or an id.
You can create a more specific selector by combining multiple items
to follow the document tree structure. For example, if you have a
span
tag nested inside a
p
tag, you can target that one without applying the style to a
span
tag not included in a
p
tag:
Example:
p span {
color: blue;
}
See how we used a space between the two tokens
p
and
span.
This works even if the element on the right is multiple levels deep.
To make the dependency strict on the first level, you can use the
>
symbol between the two tokens:
Example:
p > span {
color: blue;
}
In this case, if a
span
is not a first children of the
p
element, it's not going to have the new color applied.
<div>
<p>
<span>This is going to be blue</span>
<div>
<span>This is not going to be blue</span>
</div>
</p>
</div>
Adjacent sibling selectors let us style an element only if preceded
by a specific element. We do so using the
+
operator:
Example:
p + span {
color: yellow;
}
This will assign the color yellow to all span elements preceded by a
p
element:
Example
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>My First Page</title>
<style>
p > span {
color: yellow;
}
</style>
</head>
<body>
<div>
<p>
<span>This is going to be yellow</span>
<div>
<span>This is not going to be yellow</span>
</div>
</p>
</div>
</body>
</html>
We have a lot more selectors we can use:
- Attribute selectors
- Pseudo class selectors
- Pseudo element selectors
- And more...
We'll find all about them in their respective sections.