Hello, World! Welcome to the second article in my CSS series, Understanding CSS Selectors, a series with aim to help explain more about the use of selectors as know that selectors are pivotal in creating a good project with CSS. If you missed the first article in this series, which was on the basic selectors; the universal selector and the type selectors, check it out in this link, UNDERSTANDING CSS SELECTORS: UNIVERSAL SELECTORS AND TYPE SELECTORS.
From the last article, we looked at Universal and Type selectors, as earlier stated, and in this article we would be proceeding with class and ID selectors. So let’s jump right into it.
Class Selectors, like the name suggests, is a selector that works with the corresponding value or class name of the class attribute. The class attribute which is one of the global attributes, specifies one or more class names or values which is then used in the stylesheet to style the elements with the corresponding class name. Class selectors are represented with a period or full-stop (.) before the class name.
To use the class selector, we just have to give a value to the class attribute and make sure that our class name in the stylesheet corresponds to the name in the HTML tag. Note that the class name is principally for linking elements in your HTML file so that they could be styled as a group in the stylesheet and they do not in any way influence the semantic structure of the HTML document.
Class names are also case-sensitive and allow for the use of hyphens or underscore in the place of whitespaces. Class selectors have a specificity value of (0, 0, 1, 0) which means that they will be prioritized ahead of type selectors but would have ID selectors prioritized before them. Specificity increases when the class selectors are combined or when the selector is limited to a specific element.
ID selectors (pronounced as eye-dee) are quite similar to how classes are denoted, except that they are represented by an octothorpe, a pound sign or hash character(#), attached to its id name rather than a period and an id attribute attached to the HTML element instead of the class attribute.
Like the class selector, the ID selector is case-sensitive, must not start with a number and must exactly match across HTML, CSS and Javascript but in contrast to the class selector which can be used to select more than one element, the ID selector can only be used to select one unique element which means an HTML element with two or more ids would not be validated.
On the specificity scale, ID selectors rank very high, they have a specificity which is written as (0, 1, 0, 0). This means that their styles would override other selectors written with just tags or classes. However, considering CSS best practices, many devs would advise that you try not to use ID selectors as much as possible, this article, Reasons not to use IDs in CSS by Claire Parker-Jones sheds more light on it.
Let's look at some practical examples of class and ID selectors, below are the HTML and CSS codes for a simple example I created.
HTML
CSS
and the OUTPUT
Looking at the source codes above, we would be able to see that I styled the title and story divs separately and together for the styles that they would share in common. If you look at line 11 on the HTML, you would notice it also had a ID attribute along with the class attribute, then go on to the stylesheet and compare the style properties on lines 21 & 25. On line 21, we see a margin property for the title class but in the output, we see that this property was overridden and that of line 25 which is contained within an ID selector is taken into effect as it bears a margin-top property, this is due to higher specificity of the ID selectors (and because the latter styles in CSS override the former even if they have the same specificity).
Well, we have come to the end of today's article on class and ID selectors. In the next article in this series, we would be looking at the combinator selectors and how they are used.
Thank you for reading to the end, if you found this article helpful, please do well to share, it would probably be beneficial to someone else too. If you are interested in reading more articles, you can follow me to receive notifications when I publish more.
Thank you once more, see you in the next article where we would talking about the Combinator Selectors.
Ciao! ❤️
Top comments (0)