CSS priority

Here is an example for the css priority levels: The code will be this:

<div class="main">
 <div class="container">
  <div class="mydiv" id="textid">
   Text
  </div>
 </div>
</div>

Here is a list of stronger priorities starting from the lowest:

1

div{
     color:blue;
}	

2

.mydiv{
     color:blue;
}	

3

div .mydiv{
     color:blue;
}	

4

.container .mydiv{
     color:blue;
}	

5

container .mydiv{
     color:blue;
}	

6

.main .container .mydiv{
     color:blue;
}	

7

#textid{
     color:blue;
}	

8

div #textid{
     color:blue;
}	

9

.container #textid{
     color:blue;
}	

10

container #textid{
     color:blue;
}	

11

.main .container #textid{
     color:blue;
}	

12

inline css:

<div class="main">
 <div class="container">
  <div class="mydiv" id="textid" style="color:blue;">
   Text
  </div>
 </div>
</div>	

13

.mydiv{
     color:blue!important;
}	

14

.container .mydiv{
     color:blue!important;
}	

15

.main .container .mydiv{
     color:blue!important;
}	

16

#textid{
     color:blue!important;
}	

17

div #textid{
     color:blue!important;
}	

18

.container #textid{
     color:blue!important;
}	

19

container #textid{
     color:blue!important;
}	

20

.main .container #textid{
     color:blue!important;
}	

21

<div class="main">
 <div class="container">
  <div class="mydiv" id="textid" style="color:blue!important;">
   Text
  </div>
 </div>
</div>