CSS Selectors 101: Targeting Elements with Precision
CSS selectors are a way to choose elements. It helps to target a specific HTML element or a group of elements to style them in CSS. Think of it like addressing people; one is you’ll say, “All people just listen to me,” another is “People with green shirts listen to me,” and you can be more specific, like “Hey John, listen to me.” Same is the case with CSS selectors; they can select a broad group of elements or a specific element. So, in this article we will learn about different CSS selectors, how to target elements with selectors, and the selector priority.
CSS selectors
Element selector
The element selector uses HTML tags to target all the defined tag elements of HTML. Like we can select all paragraph elements with p and style them.
Class selector
Class selector selects HTML elements by their defined class. Like if there are different elements (h2, p, a) in HTML having the same class (color-red). We can target them all at once with class selector. The syntax of class selector is .class-name.
ID selector
Similarly, ID selector selects HTML elements based on their ID. ID is always unique, meaning one HTML document can have only one ID given to one element; same ID can’t be given to more than one element. The syntax of ID selector is #id-name.
Group selectors
If we need to give some styling to the same different elements, we can use group selector; it selects various groups of elements at once. Like if we need to select h2, p, .container, #card, we use comma to separate these, and it’s called group selector.
Descendant selector
Descendant selector helps to select elements in a specific location. Like if we need to select the p elements that are inside a div, that can be done using this selector. The syntax of this is simple, element-name descendant-name. First we write the element name inside which we want to select descendants, a space, and then the descendant name.
Selector priority
What if we select same element by using different selectors like the element selector, class selector, and ID selector? Which styling will apply. So I’ll explain this at a very high level.
Element selectors have the lowest priority, class selectors have medium priority, and ID selectors have high priority. That means if we select the same element by using these three selectors, always the styling of ID selector will apply.
This is a high-level overview; if you want to dig deeper into this, you can learn about CSS cascading and specificity algorithms.
Conclusion
Selectors are the foundation of CSS; with selectors, we are able to target different elements or groups of elements to style them. There are various selectors like element selector, class selector, ID selector, group selector, descendant selector, and more. Different selectors have different priorities; most priority selector styling applies in case of multiple selectors targeting the same element.
This is just a basic overview of CSS selectors and their priorities. I encourage you to practice it on your own; once you understand this well, you can then learn more things about CSS.
