HTML 5

Selectors Precedence Levels in CSS

Introduction

This article exlains what CSS Precedence Levels are.

CSS Precedence Level

A CSS precedence level mainly defines the priority of CSS styles that CSS applys to a specific element at the following three levels.

  • Inline styles
  • Embedded styles
  • External styles

Inline styles

Inline styles have the highest priority over the external style and external styles. Inline styles take priority over embedded styles and external styles. Inline styles are applied directly to an element via the style attribute.

Code of Inline style

  1. <!DOCTYPE html>    
  2. <html xmlns="http://www.w3.org/1999/xhtml">  
  3.   <head>  
  4.   <title> My HTML Page </title>  
  5.   </head>  
  6.   <body>  
  7.  <div id="Box" style="width:10px">  
  8.   <div id="Table">  
  9.   <h1>Best Company</h1>  
  10.   <ul id = "list" >  
  11.  <li> CSharpCorner</li>  
  12.   <li> Norton India</li>  
  13.  <li id="DebugCoder">DebugCoder</li>  
  14.  <li>MCN Solution</li>  
  15.  </ul>
  16. </div>  
  17.  </div>  
  18.   </body>  

inline

Embedded styles

Embedded styles take priority over the external styles. It has more priority in comparison to external styles and less than in inline styles. This type of style is applied only within the style tag, that goes in the head of your document.

HTML code of embedded style

  1. <!DOCTYPE html>    
  2. <html xmlns="http://www.w3.org/1999/xhtml">    
  3. <head>    
  4.     <title> My HTML Page </title>    
  5.     <style type="text/css">    
  6.     h1 {    
  7.         color: #f00;    
  8.     }    
  9.     </style>    
  10.        </head>    
  11.     <body>    
  12.         <div id="Box">    
  13.             <div id="Table">    
  14.            <h1>Best Company</h1>    
  15.                 <ul id = "list" >    
  16.                     <li> CSharpCorner</li>    
  17.                     <li> Norton India</li>    
  18.                     <li id="DebugCoder">DebugCoder</li>    
  19.                     <li>MCN Solution</li>    
  20.                 </ul>    
  21.               </div>    
  22.         </div>    
  23.     </body>  

CSS code of embedded style

  1. html {  
  2. }    
  3. body {    
  4. }      
  5. #Box {  
  6. color:#f00;  
  7. }    
  8. #Table {    
  9. }    
  10. #list {  
  11. }  
  12. }  
  1. embedded

External styles

External styles have less priority. It is a file with a css extension that is applied in the head of your document. Never remind that, external files do not take priority over inline styles and embedded styles.

HTML code of external style

  1. <!DOCTYPE html>    
  2. <html xmlns="http://www.w3.org/1999/xhtml">    
  3. <head>    
  4.     <title> My HTML Page </title>    
  5.     <link href="StyleSheet.css" rel="stylesheet" />    
  6.     <style type="text/css">    
  7.     h1 {    
  8.         color: #f00;    
  9.     }    
  10.     </style>    
  11.        </head>    
  12.     <body>    
  13.         <div id="Box">    
  14.             <div id="Table">    
  15.            <h1>Best Company</h1>    
  16.                 <ul id = "list" >    
  17.                     <li> CSharpCorner</li>    
  18.                     <li> Norton India</li>    
  19.                     <li id="DebugCoder">DebugCoder</li>    
  20.                     <li>MCN Solution</li>    
  21.                 </ul>    
  22.               </div>    
  23.         </div>    
  24.     </body> 

CSS code of external sheet

  1. html {    
  2. }         
  3. body {           
  4. }              
  5. #Box {    
  6. color:#00ff90;    
  7. }     
  8. #Table {    
  9. }         
  10. #list {    
  11.   } 
 external

CSS precedence level of selectors

There are various types of CSS precedence levels of selectors.
  • ID selector
  • Class selector
  • Type Selector
  • Element Selector

ID selector

ID selector can be used to override all the selectors. The #id selector applys the styles to elements with a specific id. The #id selector can be supported in all browsers.

HTML code for ID selector 

  1. <div id="div1">  
  2.  Hello  
  3.  </div>  
  4.  </body>  
CSS code for ID selector
  1. #div1{  
  2.  font-size:32px;  
  3.  color:#b200ff;  
  4.  border: 2px solid gray;  
  5.  }  
IDSelector

Class selector

The class selector uses the HTML class attribute. It finds elements with the specific class that we define in a CSS file. The class selector can be used to find elements with a specific class followed by the name of the class.

HTML code for class selector
  1. <body>  
  2.  <div class="div1">  
  3.  Class Selector   
  4.  </div>  
  5.  </body>  
  6.     
CSS code for class selector
  1. .div1{  
  2.  font-size:32px;  
  3.  color:#b200ff;  
  4.  border: 2px solid gray;  
  5.  }  
classSelector

Element selector

The element selector selects an element based on the element name. The user can select all elements on a page using <p>.

HTML code for element selector

  1. <body>  
  2. <div>  
  3. Element Selector Example 1   
  4. </div>  
  5. <div>  
  6. Element Selector Example 2  
  7. </div>  
  8. <div>  
  9. Element Selector Example 3  
  10. </div>  
  11. </body>   
CSS code for element selector
  1. div{  
  2.  font-size:32px;  
  3.  color:#b200ff;  
  4.  border: 2px solid gray;  
  5.  }  
ElemnetSelector

Child selector

The child selector can be used to match elements that are direct children of other elements.

HTML code for element selector

  1. <div>  
  2.  Element Selector Example 1   
  3.  </div>  
  4.  <div>  
  5.  Element Selector Example 2  
  6.  </div>  
  7.  <div>  
  8.  Element Selector Example 3  
  9.  </div>  

CSS code for element selector

  1. div:first-child {  
  2.  font-size: 32px;  
  3.  color: #b200ff;  
  4.  border: 2px solid gray;  
  5.  }  
  6.  div:last-child{  
  7.  font-size:34px;  
  8.  color:#ffd800;  
  9.  border : 2px dotted gray;  
  10.  }  
childSelector

Summary

This article rovided an introduction to CSS precedence levels and also explained the CSS precedence level of selectors.

Up Next
    Ebook Download
    View all
    Learn
    View all
    Get Started

    You need to be a premium member to use this feature. To access it, you'll have to upgrade your membership.

    Become a sharper developer and jumpstart your career.

    Basic

    $0

    $

    . 00

    monthly

    For Basic members:

    • Standard Profile
    • Access learning courses
    • Access free e-books
    • 1x point
    Premium

    $20

    $

    . 00

    monthly

    For Premium members:

    • Earn 2x reward points
    • Premium profile with Verified check
    • Premium Avatar with status update
    • Learning courses
    • Unlimited Certifications and badges on profile
    • Unlimited Book downloads
    • Access to Premium content
    • Online Training
    • Unlimited PDF conversions and downloads
    • Professional Resume Writing
    • Interview Preparations Guide
    • 25 messages per month
    • 1 "Kodzu" avatar, basic
    Elite

    $45

    $

    . 00

    monthly

    For Elite members:

    • Bundle E-books
    • Access to all Learn Series
    • Unlimited Apply Jobs