Overview of Frequently Used CSS Selectors
Introduction
CSS selectors are an essential part of the website’s markup. Basically, CSS selectors are part of the CSS rules matching an element (if ID) or set of elements (if class) within an HTML document. Roughly, CSS selectors can be divided into basic and advanced categories, but this article will discuss only the basic ones, since the majority of developers will unlikely use the benefits of advanced selectors.
Universal Selector
The first CSS selector discussed is the Universal selector. The purpose of this selector is to match any element type. This selector uses the * sign, and its syntax is equivalent to the following:
* {
declarations
}
For example, if a developer wants to apply the margin:0; property to every element in an HTML document, the following line of code should be used:
* {
margin: 0;
}
Furthermore, consider the following example using the div * b selector:
BoldSelector
Bold Againbut immediate child of the div tag
In this example, div * b selector (and corresponding declarations) will match Bold, but it will not match Bold Again, since it is an immediate child of
This example is provided to demonstrate the fact that the universal selector should never be confused with a wildcard character, since it does not match “zero or more elements.”
Element Type Selector
An element type selector matches only the elements using the corresponding element type name. The basic syntax for this type of selector follows:
E {
declarations
}
For example, if the developer wants to apply padding:0; to all
li {
padding:0;
}
Class Selector
Class selectors are used frequently in web development, offering a great way of applying one style to several HTML elements. This type of selector is declared by using the . sign before the desired class name. The basic syntax follows:
.className
{
declarations
}
It is not allowed to use whitespace between . and the class name.
Furthermore, the following method can be used as well:
p.title
{
declarations
}
If this line of code is used, the properties of the “title” class will be applied to all
elements whose class attribute is set to “title”.
ID Selector
In order to create a selector that will match particular elements within an HTML document, the ID selector should be used. Specifically, an ID selector will match only the elements whose ID attribute is set to that ID selector. Furthermore, it is important to note that ID selectors are unique (their values unique) and as such, ID selectors cannot match more than one element in an HTML document. ID selectors use the # sign, and the basic syntax follows:
#IDName{
declarations
}
For example, if a developer wants to define a specific set of CSS properties for the footer, the following piece of code should be used:
#footer {
declarations
}
Since an ID selector identifies an HTML element uniquely, it should be used “only” when necessary; in other words, a developer should consider carefully when to use an ID selector and when to use a class selector. Examples of “unique” (where the ID should be used instead of the class) HTML elements are the footer, header, content, main, sidebar and similar “core” elements of the website.
Furthermore, it is possible to use an ID selector in the following way:
ul#footer {
declarations
}
This line of code will apply only to an unordered list element whose ID attribute value is equal to footer. As it is the case with class selectors, whitespace between # and ID name is not allowed.
