Cascade Order : Selector priority « Style Basics « HTML / CSS






  1. HTML / CSS
  2. Style Basics
  3. Selector priority

Cascade Order

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style type="text/css">
* {
  border: 0px solid black;
} 
div {
  border: 2px solid black;
} 
* .c10 {
  border: 4px solid black;
} 
#i100 {
  border: 6px solid black;
} 
* {
  border: 8px solid black !important;
} 
div {
  border: 10px solid black !important;
} 
* .c10 {
  border: 12px solid black !important;
} 
#i100 {
  border: 14px solid black !important;
} 
</style>
</head>
<body> 
<div id="i100" class="c10">!important has highest priority.</div> 
</body> 
</html>








Related examples in the same category

1.Selectors choose the element to apply formatting to
2.Six selector groups listed from highest to lowest priority:
3.Specificity means that more specific selectors are given priority over less specific selectors
4.Style is overwritable
5.select elements by type, class, and/or ID
6.Specificity, !important
7.!important has higher priority
8.Latter one overwrite the former one
9.the id selector is more specific than the element selector
10.Some properties in CSS are inherited to children elements