Week #9 — Udemy: Web Development Bootcamp
This week I actually managed to get another section done. Section seven was all about CSS selectors. There were a few that I already knew but I was pleasantly surprised to find that there was a great deal I didn’t know.
I already knew how to reference elements, classes and IDs along with how to use a couple of pseudo classes but there was more than I thought there was.
There are also more pseudo classes, attribute selectors and pseudo elements.
One of the main takeaways from this section is specificity and prioritisation. Up until now, I wasn’t entirely aware of why certain styles on a style sheet overruled others. Most of the time it would boil down to the order they were placed in on the style sheet. Other times the order didn’t matter.
As it turns out, styles are prioritised based on specificity and the type of selector. At first glance specificity, like the order of placement on a style sheet, is pretty straight forward. Style sheet references with more selectors will be given priority over references with less selectors (e.g. div p a{…} vs. a{…}). However, it is slightly more complicated.
Each type of selector has a certain level of priority. They are split into three levels.
- ID Selectors (Highest)
- Class Selectors, Attribute Selectors and Pseudo Classes (Medium)
- Element Selectors and Pseudo Elements (Low)
An ID selector will beat out a class selector, an attribute selector and a pseudo class. Class selectors, attribute selectors and pseudo elements will beat out element selectors and pseudo elements.
Additionally, the number of selectors in a single CSS reference only plays a role when they are on the same priority level. Basically, two ID selectors in a single reference will win over a reference with only one. However, not even five class selectors will win against one ID selector.
It was explained in the videos that the level of priority/specificity could be boiled down to a number. This number is determined by the selectors within a CSS reference. High priority selectors (ID selectors) counted for one hundred points, medium level selectors (class selectors, attribute selectors and pseudo classes) counted for ten points, and low level selectors counted for one point. So a reference with an ID selector, an element selector, and a pseudo class would have a priority score of one hundred and eleven. Unfortunately, what this point system does not properly illustrate is that no amount of selectors from a level below will beat a single selector from a level above (e.g. one ID selector cannot be beaten by one hundred class selectors).
Needless to say, it was very interesting. This was a point of confusion for me for a while so I’m quite happy to discover that there is a proper system around it.
I’m hoping that there will be more interesting things to learn in the next section.
