In Cascading Style Sheet, CSS, there is a property called specificity . CSS Specificity is the process of determining the most relevant set of CSS property values or styles browsers will apply to an element especially when there is a conflicting set of rules. As you get deeper into developing a website, there is a tendency that your CSS files will become large, sometimes very large when you’re coding a big website. There is a good chance that you will run into a problem determining the right CSS selector to apply to an element. For you to understand CSS Specificity, you must understand CSS selectors. are that part of CSS rule that finds or selects the HTML elements you want to style. CSS Selectors- The most common CSS selectors are summarized below, : It is denoted by (*) and selects all HTML elements on the page. Universal Selectors Example: Here, all elements on the page will have a font-size of . 4px * { : ;} font-size 4px : This selects HTML elements based on the name of the element Element Selector Example: Here all <h1> elements on the page will be center-aligned. { : center;} h1 text-align : This uses the id attribute of an HTML element to select a specific element. CSS id Selector Example: Here, the element with id my-text will have a font-color of red; { : red;} #my-text color : This selects all HTML elements with a specific class attribute. CSS Class Selector Example: Here all the elements with the class my-name will have a text color of green. { : green;} .my-name color : This selects two or more elements, classes, id, or a combination of it and gives them the same style. Grouping Selector Example: Here all h1, h2, p elements will have a color of yellow; , , { : yellow;} h1 h2 p color Understand the Hierarchy of CSS Specificity Before I list the hierarchy of CSS specificity, I want you to have this concept in your memory; More Specific = Higher Priority When a selector is more specific to an element, it has a higher priority. Inline Styles Inline-styles are the styles defined directly within an HTML element’s tag. Example; Hello Selector < = > p style "color: blue;" </ > p The "Hello Selector" will have a font-color of blue. This style is more specific to the p element than any other style that may be applied to it in the same document. Thus it has the highest priority in the CSS hierarchy of Specificity. ID Selectors ID selectors are the next in the hierarchy. They can only be overridden by inline styles. ID selectors are unique to one element. Class Selectors, Attributes, and Pseudo Classes Class selectors, attributes, and pseudo-class selectors are the next in the hierarchy. These three are at the same level. They can be overridden by Inline styles and ID selectors. In case you don’t know, attribute selectors and values are used to select elements with the specified attribute value. Example: Here all input elements with type text will have a block display. { : block;} input [type="text"] display Also, Pseudo-classes are used to define a special state of an element. It can be used to style an element when a user mouses over it when the elements get focus. Example: The color of the <a> element will change to red when a user hovers over it. { : red;} a :hover color Elements and Pseudo Elements Elements and Pseudo elements are the last in the hierarchy. They can be overridden by all the sets explained above. In other words, they rank the lowest in the hierarchy of CSS specificity. Remember that pseudo-elements are used to select and style specified parts of an element. Example: Here, the first line of the selected <p> element will have a font-color of white. { : red;} a :hover color An important thing to note CSS means, Cascading Style Sheets, this means that the CSS styles applied to an element "cascade" or flows from top to bottom. Example: { : red;} { : blue;} h2 color h2 color If the elements have the same specificity, the later style is applied. Here, the later style is applied to the h2 element. Therefore, the h2 element will have a font-color of blue instead of red because of the flow. Specificity in Action As I said earlier, as the CSS file becomes larger in a big project, the more complicated your CSS selectors will be and the chance of conflicting CSS rule will be higher. Look at this, Example 1 { : bold;} { : normal;} p em font-weight em font-weight Even though the single em style came later in the document, it’s font-weight will be bold, simply because the p em selector is more specific than only em. Example 2 { : yellow;} { : green} h2 #text-header color h2 [id=text-header] color Here, the first style will be applied to the element making the font-color to be yellow. This is because id selector will override attribute selector. Specificity Calculation There is a way of calculating the CSS specificity of a selector to see whether it will take precedence over another. The highest calculated sum takes precedence and thus will be applied to the element. Study the diagram below: As a rule, points are given to the different levels of CSS specificity hierarchy. When the points are added, depending on the combination of CSS selectors used for an element, the selector group with the highest points will be applied to the element. Example 1 = Specificity of 112 #cat h2.text-box em ID + HTML Element + class + HTML Element 100 1 10 1 Example 2 { : red; } { : green; } #cat h2 .text-box background #cat .text-box background The first style has a specificity of (100 + 1 +10 ) = Specificity of 111points The second style has a specificity of (100+10 ) = Specificity of 110points The first selector would win, and the background of .text-box would be red because it has more points than the second selector even though the second selector comes later in the style sheet. However, there is an online resources that will help you to study more and calculate CSS specificity of selectors. Visit http://specificity.keegan.st/ Summary As you continue in your journey as a web developer, always remember that there is a property called CSS specificity. The selector group with the highest specificity point value will be applied in case of conflicting rules. If the selectors have the same specificity value, the later style will be applied to the element. When you have issues with conflicting styles, calm your nerves, remember the hierarchy of specificity. With this, you will be able to detect the error and make the necessary correction. Always be as specific as you need to be when writing CSS.
