A CSS selector is essential in web development for identifying and customizing specific HTML elements.
In layman's terms, a CSS selector selects the HTML element(s)
Types of CSS Selectors
- Simple Selector
- Combinator selectors (select elements based on a specific relationship between them) grouping + combinator
- Pseudo-class selectors (select elements based on a certain state)
- Pseudo-elements selectors (select and style a part of an element)
- Attribute selectors (select elements based on an attribute or attribute value)
Simple selector
Simple selectors are the most basic selectors, and we have already covered them in our previous articles. A simple selector is a selector with a single component. Let's take a quick look at the types and examples of simple selectors.
Playground Example: To make things simpler, you can click the button below to open the playground, which comes with pre-filled HTML.
In the editor, you will see HTML, CSS, and JS input on the left/top, and the output on the right/bottom.
Simple selector: CSS Universal Selector
The universal selector is used to apply common styles to all HTML elements. For example, if you want to apply a font style across your webpage, you can use the universal selector instead of applying styles to multiple elements.
Below is the syntax for adding CSS to HTML elements:
* {
CSS property: value
}To add a style in your CSS stylesheet, begin with *
Then, enclose the desired CSS properties within curly braces {} to effectively define and style all the elements in the html document.
Simple selector: CSS Element Selector
The element selector is utilized to apply common styles to HTML elements according to their element name.
Below is the syntax for adding CSS to HTML elements:
tagname {
CSS property: value
}To add a style in your CSS stylesheet, begin with tagname or element name, like h3, p, etc
Then, enclose the desired CSS properties within curly braces {} to effectively define and style specific elements in the html document.
Simple selector: CSS Grouping Selector
The grouping selector is used to apply common styles to all HTML elements with the same style definitions.
Below is the syntax for adding CSS to HTML elements:
list of all tags {
CSS property: value
}
/* Example: CSS Group Selector */
h3, p {
font-size: 20px;
}To add a style in your CSS stylesheet, begin with all tagnames or element names, like "h3 span p" etc
Then, enclose the desired CSS properties within curly braces {} to effectively define and style specific elements in the html document.
Simple selector: CSS class Selector
The class selector is utilized to apply consistent styles to all HTML elements with a designated class attribute.
Below is the syntax for adding CSS to HTML elements:
.classname {
CSS property: value
}To add a style in your CSS stylesheet, begin with the period (.) character, followed by the class name.
Then, enclose the desired CSS properties within curly braces {} to effectively define and style specific elements in the html document.
Simple selector: CSS Id Selector
The id selector is used to apply consistent styles to an HTML element with a unique id attribute.
Below is the syntax for adding CSS to HTML elements:
#idname {
CSS property: value
}To add a style in your CSS stylesheet, begin with the # character, followed by unique id name.
Then, enclose the desired CSS properties within curly braces {} to effectively define and style unique element in the html document.
These are the basic CSS selectors. We will discuss the remaining ones in upcoming articles.
It will also be a good time to review the previous article, "How to Add CSS in HTML."
Want to practice more? Click here for more hands-on exercise.
References: