One of the first things you will learn about CSS is the basic CSS syntax, and pretty much as soon as you learn the syntax, you will come across CSS selectors.
CSS selectors are a powerful tool for styling your website. They are easy to learn and use, and they can be used with any HTML element. So, if you’re new to coding, don’t worry, I am too, and the basic CSS selectors are a great place to start!
This article will tell you everything you need to know about CSS selectors. Hopefully, it will help you understand which items to select and understand the “cascading” part of Cascading Style Sheets (CSS) a bit better.
The basics of CSS Selectors
CSS selectors were first introduced in the CSS1 specification, released in 1996. Since then, they have been updated and expanded in subsequent versions.
CSS selectors are used to style HTML elements in two ways, either by selecting a specific element or by selecting a group of elements.
When you select a specific element, you can style that element with specific properties. For example, you can change an element’s colour, size, and font.
When you select a group of elements, you can style all of the elements in that group with the same properties. For example, you can change the colour, size, and font of all of the paragraphs on your website at once.
What group is selected and how styles are applied is also impacted by the cascading effect of CSS. If you want to understand how styles cascade in CSS you can read our article here.
How many CSS selectors are there
There are many different types of CSS selectors, and in this article, we will explore them all, breaking them up into basic CSS selectors and more advanced CSS selectors
Basic CSS selectors every beginner should know
There are four main basic CSS selectors every beginner should know, they are Type, Class, and Universal selectors. You can also combine different elements and create what is referred to as a combined selector, which can come in very handy.
Below are examples of each of the basic selectors mentioned above.
Type selector
The type selector is the most basic selector, and it is written as a simple element name. For example, to style all <h1> tags on your website, you would use the h1 type selector.
Below is an example of a type selector in CSS:
h1{
font-size: 16px;
}
Class selector
Class selectors are written with a period (.) before the class name. For example, to style all elements with the .classname, you would use the .classname selector.
Below is an example of a class selector in CSS
.classname{
width:100px;
background-color: yellow;
padding-top:10px;
padding-bottom:10px;
}
Universal selector
The universal selector is written with an asterisk (*). For example, to style all elements on your website, you would use the * selector.
Below is an example of a universal selector in CSS that would set the font-size of the entire document to 20px
* {font-size:14px;}
Combining selectors
You can combine selectors by separating them with a comma (,). For example, to style all h1 and p tags, you would use the h1,p selector.
h1,p{
font-size: 16px;
}
Advanced CSS selectors
I am calling these selectors advanced, not because the concept is difficult to grasp but because the names of the selectors sound intimidating to new coders like you and I.. These “advanced” CSS selectors are relatively easy to grasp once you get over their names.
An attribute selector with pseudo-class
You can combine an attribute selector with a pseudo-class by using the colon (:) separator.
Pseudo-class selector
Pseudo-class selectors are written with a colon (:) before the pseudo-class name. For example, to style all links that are in focus, you would use the :focus pseudo-class selector.
Pseudo-element selector
Pseudo-element selectors are written with a double colon (::) before the pseudo-element name.
Pseudo-class with pseudo-element
You can combine a pseudo-class with a pseudo-element by using the double colon (::) separator.
How does specificity influence selectors
CSS selectors are important in how your website is styled. The specificity of a selector determines which style declarations are applied to an element. How do you determine the specificity of a selector?
The number of CSS selectors is one way to calculate the specificity. For example, a selector with two class names has a higher specificity than a selector with one class name.
Types of CSS selectors also affect specificity. For example, a class selector has a higher specificity than a type selector. In addition, the order of the selectors also affects specificity. The most specific selector will override the less specific selector.
You can learn more about specificity and the cascading effect of CSS in our article here
3 Important facts about CSS selectors beginners should remember
1. Selectors are used to target specific elements on a page. This is important because it allows you to style only the elements that you want, without affecting the rest of the page.
2. Selectors can be simple or complex, depending on what you need them to do.
3. You can use multiple selectors to target specific elements on a page. This is helpful when you want to style several elements that are all related in some way.
Conclusion
CSS selectors are important for coding in CSS because they help target specific elements on a web page. This is important because it allows you to style only the elements you want without worrying about affecting other elements on the page.
Specificity is also important when working with CSS selectors. This helps to ensure that the correct elements are targeted and that any conflicts are resolved.
By understanding both CSS selectors and specificity, you can easily ensure that your pages look exactly how you want them to and that they are correctly formatted.
