Introduction
In CSS, selectors are the ones that we use to point to the element we want to style in our HTML document. CSS offers different ways to select these elements. They are:
Let us look at each of these in more detail.
Type Selector
h1 { /* Selects all the <h1> elements */
}p { /* Selects all the <p> elements */
}span, a { /* Selects all the <span> and <a> elements */
}
Type selector is the one that selects all the elements of a particular type in the HTML document. For example, if we write h1, it selects all <h1> elements in the HTML document and applies the same style rules to all of them. You can also select multiple types of elements simultaneously. All you have to do is write each type separated by a comma (example: span, a).
You can also select the elements that are direct children of an element. For example, if you want to select all the <p> that are direct elements to <footer>, you can do it in this way: footer p { }.
You can select elements in this way, no matter how deep they are located:
HTML:
<main>
<p>
<span>
<a></a> <!-- 1st <a> element -->
</span>
</p> <p>
<a></a> <!-- 2nd <a> element -->
</p> <span>
<a></a> <!-- 3rd <a> element -->
</span>
</main>
CSS:
main p span a {
}/* This selects only the 1st <a> element */
Class Selector
.container { /* Selects all the elements with class="container" */
}.card { /* Selects all the elements with class="card" */
}
We use a class selector to style all the elements of the same class. We can use it by writing a period ( . ) followed by the name of the class we want to select. In the above example, .container selects all the elements whose class attribute is set to container (class="container").
ID Selector
#heading { /* Selects the element with id="heading" */
}#special { /* Selects the element with id="special" */
}
We can use an ID selector to select the element with a unique ID. It is as simple as writing a number sign ( # ) followed by the ID. For example: #heading, this selects and styles the element with its ID attribute set to heading (id="heading").
Note! An ID can be used only once and only for one single element. You can use a class to give similar styling to multiple elements.
Attribute Selector
input[type="number"] { }
/* Selects all <input> elements with type="number" */a[href="some.coollink.com"] { }
/* Selects all the <a> elements whose href has this value */img[title] { }
/* Selects all the <img> elements that have the title attribute */
Attribute Selectors can be used to select elements using their attributes and, also their values. Write the type of the element followed by the attribute in square brackets. For example, if you want to style <input> elements that are of "text" type, you can select these elements like this: input[type="text"].
Universal Selector
* {
}The Universal Selector is used to select all elements in the HTML document, at a time. The symbol for the Universal Selector is an asterisk ( * ).
