Before we begin, let’s brush up on a bit on CSS.
In general, CSS files are the layout and design for a web page. From the placement of images and text to the font size and background color, CSS controls the way these HTML elements display in a browser.
Now… The answer to the question asked in the beginning. What are they actually?
CSS selectors define the elements to which a set of CSS rules apply, in other words selectors are used to target the HTML elements on our web pages that we want to style.
There are 4 major and widely used type of selectors:
- ID selector — Selects an element based on the value of its
idattribute. There should be only one element with a given ID in a document.
ID selectors are the most powerful type of selector in terms of CSS specificity. Meaning that they beat out other types of selectors and the styles defined within win. That sounds good, but that’s typically considered bad, because it’s nice to have lower-specificity selectors that are easier to override when needed.
- Class selector — Selects all elements that have the given
- Tag selector — Selects all elements that match the given tag name.
Tag selectors are at their most useful when changing properties that are unique to that HTML element. Like setting the
<pre>.Don’t rely on them too much though. It’s typically more useful to have a class define styling that you can use on any HTML element.
- Universal selector — Selects all elements.
*This is not so useful but something to be vary of, it selects every element and applies the CSS to it, hence not very useful when trying to be specific.
Well, that was all of it then!
On the basis of this guide, you can enhance your learning and knowledge about other advanced CSS selectors which aren’t covered in this guide, but aren’t that necessary.
I know you’re feeling glad the guide is over. Keep learning : ) and leave a like!