Hello learners!
Ever thought of how CSS selects elements? Ever thought of how CSS knows when to accept which type of CSS? This is the part where CSS showcases it’s brain! The Specificity Algorithm. This article will delve into the algorithm and selectors in CSS, comprehensively and make you understand easily this difficult-sounding concept! So let’s dive into the article!
CSS Selectors 🔍
ID Selector 🪪
ID selectors are assigned in HTML by using the attribute
id. These are selected using CSS by using the identifier#to let the CSS know that whatever you are selecting is the ID attribute of some element.You should not assign the same ID to any other element as IDs are meant to be unique and to be assigned singularly to an element ‼️
Class Selector 🎓
Class selectors are assigned in HTML by using the attribute
class. These are selected using CSS by using the identifier.to let the CSS know that whatever you are selecting is the Class attribute of some element.You can assign the same class name to other elements as well because these are meant to group similar elements together and is not related with the uniqueness of an element.
Tag Selector 🏷️
Tags are what construct an element and attributes can be applied to them. These can be selected by using their name as the identifier itself. For example,
divhere.
Specificity Algorithm - Analogy 🎯
Specificity algorithm is basically to find out the specificity of the method which is being used to select the element. Yes, different ways of selecting the element, to apply CSS, have different priority orders (will be discusses in this article). But what is Specificity?!
Analogy → There are 2 aliens. One alien is the father (Kasper) and the other alien is the son (Crusoe). Crusoe asks Kasper to give him all the humans having PLANET TAG earth (least specific). Kasper says, “Be more specific son, tell me some continent of earth”. Crusoe then asks to give him all the humans of the CONTINENT CLASS Asia (more specific). Kasper asks him to be more specific and tell some country. Crusoe then asks to give him all the humans of COUNTRY ID India (more specific). Kasper then says him to be more specific. Crusoe then says “Forget all of them! I only want the human whose name is AX22AX”. The last one is the INLINE RELATION (most specific).
From the above analogy, the order of specificity is → Inline » ID » Class » Tags
Basic CSS Cheatsheet 🃏
| Property | Example Value | Description |
width | width: 200px; | Sets the width of an element |
height | height: 150px; | Sets the height of an element |
padding | padding: 20px; | Space inside the element (inside border) |
margin | margin: 10px; | Space outside the element |
border | border: 2px solid black; | Border width, style, and colour |
box-sizing | box-sizing: border-box; | Includes padding & border inside width/height |
color | color: white; | Sets the text colour |
background-color | background-color: white; | Sets the background to have black colour |
font-size | font-size: 18px; | Sets text size |
font-weight | font-weight: bold; | Sets the text weight |
Conclusion 🏁
Knowing the specificity algorithm and the selector types becomes very important for efficient and accurate CSS styling. Otherwise, you would lose control over the styling that you wish to apply on the elements. This article is enough to understand the concept of specificity algorithm. I hope this article added value to your learning. Follow for more such articles!