What are CSS selectors?
A CSS selector is a set of elements and other terms that tell the browser which HTML elements to apply CSS property values to. CSS selectors are divided into two categories, basic and advanced.
In the basic category:
- Type selectors
- CSS id selectors
- CSS class selectors
- Universal selectors
In advanced selectors:
- Combination selectors
- Pseudo class-selectors
- CSS Pseudo-elements
BASIC CSS selectors
Basic selectors are the most common and are used to style specific elements on a website.
CSS type selectors CSS type selectors apply to HTML elements based on their names. Examples of such selectors are p and h1. They are used to select all HTML components that have the specified name.
See the example below:
<html>
<body>
<style>
/* selecting all h6 elements */
h6 {
color: red;
font: bond;
}
/* selecting all p elements */
p {
text-align: center;
background-color: blue;
}
</style>
</body>
</html>
In the example above, we have selected and applied styles to all elements of types h6 and p.
The code becomes clean and simple when you apply styles by selecting a single element to represent all other similar elements.
CSS id selector The id selector applies to HTML elements that match the id of the selector.
Each element has a unique id. Therefore, styles applied to selected elements differ from one element to another.
The syntax for the id selector is:
#id-name {
property: value;
}
Let’s look at the example below:
<html>
<body>
<style>
#contacts {
background-color: yellow;
color: green;
}
#about {
background-color: black;
color: green;
}
</style>
</body>
</html>
In the code above, we have selected two different HTML elements and applied different styles to them. Such as the id #contacts have different background colors from that of id #about.
CSS class selector CSS class selector applies styles to all HTML elements with the same class name.
The . character followed by the class-name is used to select elements with a specific class. Such as the .class-name.
This selector is very useful in styling multiple elements that require the same style.
Example of a Class selector:
<html>
<body>
<style>
.card {
text-align: center;
color: white;
}
</style>
</body>
</html>
In the snippet above, we have selected and styled all elements with the class name card. These elements will have a white color and will be centered on the web page.
CSS universal selector As the name suggests, this selector applies to all HTML elements. Every element, from the header to the footer, follows the style specified by the universal selector.
A universal selector is denoted by an asterisk (*).
Below is an example to illustrate a universal selector.
<html>
<body>
<style>
/* selecting all the elements */
* {
padding: 10px;
margin: 20px;
}
</style>
</body>
</html>
The code above zeroes out the padding and margin by 10px and 20px respectively.
How are CSS selectors grouped?
We sometimes want to group different elements to apply similar styles to them. This saves time and makes your code clean and easy for other developers to understand.
However, this can be a challenge if you don’t know how to go about it.
In this section, we will look at how to group CSS selectors.
The code snippet below will be our reference:
<html>
<body>
<style>
p {
background-color: red;
font: large;
text-align: center;
color: blue;
}
h5 {
background-color: red;
font: large;
text-align: center;
color: blue;
}
h6 {
background-color: red;
font: large;
text-align: center;
color: blue;
}
</style>
</body>
</html>
In the snippet above, we have given three different elements, p, h5, and h6 the same style. This is repetitive and bad use of time and resources.
To avoid this, we can group the selectors using the (,) character to separate elements as shown below:
<html>
<body>
<style>
p,
h6,
h5 {
background-color: red;
font: large;
text-align: center;
color: blue;
}
</style>
</body>
</html>
In the snippet above, we have composed the styles for different elements once because they have the same definitions.
We can also add different definitions to each element despite grouping them together.
<html>
<body>
<style>
/*group the selectors and state definitions that are the same*/
p,
h5,
h6 {
background-color: red;
font: large;
text-align: center;
}
/*apply individual styles(eg color: black;) to selector p*/
p {
color: black;
}
/*apply individual styles(eg padding: 10px;) to selector h5*/
h5 {
padding: 10px;
color: yellow;
}
/*apply individual styles(eg color: black;) to selector h6*/
h6 {
color: white;
}
</style>
</body>
</html>
Advanced CSS selectors
To gain more knowledge on CSS selectors, we need to dive deeper into advanced CSS selectors.
Advanced CSS selectors allow us to perform more than what basic selectors do. They also allow us to push beyond the boundaries of CSS.
Let’s look at some of the advanced CSS selectors.
Combination selectors The combination is a term used to describe the relationship between selectors. Combination selectors amalgamate two CSS selectors.
There are four types of CSS combination selectors.
- Descendant selectors
- Child selectors
- Adjacent sibling selectors
- General sibling selectors
Descendant selectors In descendant selectors, all elements that fall under a specific element are matched to each other.
The syntax for descendant selectors is as shown below:
selector1 selector2 { / property declarations / } Let’s look at the example below:
<html>
<body>
<ul>
<li>
<li>Item 1</li>
<ol>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
</ol>
</li>
</ul>
</body>
</html>
<style>
ul,ol{
font: large;
}
</style>
The code above selects all ol elements in the ul elements.
Child combination selectors A child combination selector appears in the middle of two selectors. It only selects direct child elements of the specified element.
We use the > character to denote a child selector.
Let’s look at the example below:
<html>
<body>
<div>
<p>Hello World!</p>
<title><h1>My website</h1></title>
</div>
</body>
</html>
Styling the above HTML code:
div > h1 {
color: blue;
}
In the snippet above, the element (div) will only find the p element, not the h1. This is because the h1 tag is not a direct child of the div tag.
Adjacent sibling selectors Adjacent sibling selectors select one element that immediately follows another.
They are denoted by the plus (+) character.
Below is an example to demonstrate adjacent sibling selectors:
div + p {
font-size: 50px;
color: white;
font-style: large;
}
Any p element that follows the div element will have the above style definitions.
General sibling combination selector General sibling combination selectors select any element that is a sibling of a specified element. They are denoted by the tilde (~) character.
Example:
title ~ h1 {
color: blue;
}
In the example above, all h1 elements that are siblings of the title element will be selected and styled with a blue color.
Pseudo-selectors Pseudo-selectors are divided into two categories:
Pseudo class-selectors: They are used to define the states of an element. For example, they can be used to:
Style an element when a user hovers over it. Differently style visited and unvisited links.
CSS Pseudo-elements: Styles a specific part of an element. They can be used to:
Style the first letter or line of an element. Insert content before or after the content of an element. Example of a Pseudo class-selectors:
/* mouse over link */
a:hover {
color: hotpink;
}
/* unvisited link */
a:link {
color: yellow;
}
/* visited link */
a:visited {
color: purple;
}
When the user hovers over the link, its color changes to hot-pink. Visited and unvisited links are styled with different colors.
Example of a CSS Pseudo-elements:
<html>
<body>
<p>
The first character has a yellow color. I.e `T`. The first line has color
red.
</p>
</body>
</html>
Let’s style the above HTML code:
<style>
p::first-letter {
color: yellowgreen;
font-size: large;
}
p::first-line {
color: red;
}
</style>
The first letter, i.e. T will have a yellow-green color, and its font size will be large.
The first line in the above sentence will have a red color.