Software Development Tricky

Friday, 21 April 2017

What are the priority among CSS Selector?

There are following selectors apply in an element. The CSS rules define which selector is capable of first priority and next priority and so on....

1. !important - First Priority
2. Inline Style - Second Priority
3. #Id - Third  Priority
4. .Class - Fourth Priority
5. Tag - Fifth Priority

Sample Code: 


 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
<!DOCTYPE html>
<html>
    <head>
        <title>CSS Selector Priority</title>
    </head>
    <style>
        div h2 {
            color:green !important;
        }
        #importantId {
            color:blue;
        }
        .importantCls {
            color:brown;
        }
        h2, h3 {
            color:gold;
        }
    </style>
    <body>
        <div>
            <h2 id="importantId" class="importantCls" style="color:black;">Take <b>Important<b> Style First</h2>
            <h3 id="importantId" class="importantCls" style="color:black;">Take <b>Inline Style<b> Style Second</h3>
            <h3 id="importantId" class="importantCls">Take <b>#Id<b> Style Third</h3>
            <h3 class="importantCls">Take <b>.Class<b> Style Third</h3>
            <h3>Take <b>.Class<b> Style Third</h3>
        </div>
    </body>
</html>

Output:


If you like post. Kindly share your feedback


Posted by at

Followers