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>