Learn the basics things about Selectors in CSS
In CSS, selectors are used to target the HTML elements on our web pages that we want to style.
There are several different types of selectors in CSS.
- Type Selector
- Class Selector
- ID Selector
- Universal Selector
- Attribute Selector
Allowing for fine-grained precision when selecting elements to style.
In this article we will take a look of the Basic Selectors
Basic selectors
Type Selector
Suppose we have a input
element on the page, and we want to display the words into it using the green color.
We can target the node using this selector input
, which targets all the element using the input
tag in the page. A simple CSS rule to achieve what we want is:
input {
color: green;
}
This selector is called type selector and selects all elements that match the given node name, every HTML tag has a corresponding selector, for example: div
, p
, span
, img
, etc.
If a selector matches multiple elements, all the elements in the page will be affected by the change.
Class Selector
The HTML elements have a class
attribute that is very commonly used withing CSS to associate styling, you have to keep in mind that the class
could be repeated inside the HTML document across multiples elements, using classes you can also select an element with 2 or more specific class names.
The classes are identified in CSS by using .
dot symbol
<span class="warning">
Warning
</span>
.warning {
color: red;
}
ID Selector
The HTML elements also have an id
attribute but this one could only be used by a single element in the whole HTML document
The IDs are identified in CSS using the #
hashtag symbol
Example using an id:
<span id="alert">
alert
</p>
#alert {
color: yellow;
}
Universal Selector
This selector is identified using the *
asterisk symbol, and selects all elements of the HTML document.
* {
color: green;
}
Attribute Selector
This group of selectors gives you different ways to select elements based on the presence of a certain attribute
on an element or even make a selection based on the presence of an attribute
with a particular value
[attribute]
Matches elements containing a given attribute
a[title] {
color: green;
}
[attribute="x"]
Matches elements containing a given attribute with a given value
a[href="https://toncho.dev"] {
color: yellow;
}
[attribute~="x"]
Matches elements containing a given attribute with a value that contains a sub-value within a space-separated list
span[title~="Style"] {
color: red;
}
/*
matches span elements with a title that contains 'Style'
(such as in title="Cascading Style Sheets")
*/
[attribute|="x"]
Matches elements containing a given attribute with a value that contains a sub-value within a hyphen-separated list
html[lang|="en"] {
color: green;
}
/*
matches html element with a lang attribute that contains 'en'
(such as in lang="en-gb")
*/
[attribute^="x"]
Matches elements containing a given attribute with a value that starts with something
a[href^="https://"] {
color: green;
}
/*
matches a elements with an href attribute, the value of which
begins with 'https://'
(such as in href="https://toncho.dev")
*/
[attribute$="x"]
Matches elements containing a given attribute with a value that ends with something
a[href$=".com"] {
color: yellow;
}
/*
matches a elements with an href attribute, the value of which
ends with '.com'
(such as in href="https://google.com")
*/
[attribute*="x"]
Matches elements containing a given attribute with a value that contains something
a[href*="toncho"] {
color: red;
}
/*
matches a elements with an href attribute, the value of which
contains 'toncho'
(such as in href="https://toncho.dev")
*/
Selecting an element with a class or id
You can select a specific element with a class or id attached.
Class:
<p class="toncho">
Toncho
</p>
p.toncho {
color: green;
}
ID:
<p id="toncho">
Toncho
</p>
p#toncho {
color: green;
}
Selecting multiple classes
You can select 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.
<p class="toncho dev">
Toncho Dev
</p>
.toncho.dev {
color: yellow;
}
Combining classes and ids
In the same way, you can combine a class and an id.
<p class="toncho" id="dev">
Toncho Dev
</p>
.toncho#dev {
color: yellow;
}
Grouping selectors
You can combine selectors to apply the same declarations to multiple selectors. To do so, you separate them with a comma.
<p>
My username is:
</p>
<span class="name">
DevToncho
</span>
p, .name {
color: yellow;
}
You can add spaces in those declarations to make them more clear:
p,
.name {
color: yellow;
}
If you want to see more infor about CSS Simple Selector go take a look at the MDN documentation