R.V.RaguPrashanth February 2016

Which selector will apply for HTML tag

<style>
     .divNav
     {
        font-size:25px; 
     }

     #divNav
     {
        font-size:25px; 
     }
</style>

<div class="divNav" id="divNav">

Both ID and class have same style.

Which will apply? And what is the reason?

Answers


ketan February 2016

It will always apply id style. Because Id have high specificity .

Check:

#divNav
       {
        font-size:25px; 
       }
.divNav
       {
        font-size:15px; 
       }
      
<div class="divNav" id="divNav">test</div>

And:

.divNav
       {
        font-size:15px; 
       }
      
#divNav
       {
        font-size:25px; 
       }
<div class="divNav" id="divNav">test</div>


Alexis February 2016

.divnav{
  color:red !important;
  }

#divnav{
  color:blue;
  }
<div class='divnav'  id='divnav' style='color:yellow'>Test</div>

You can try to remove important and style in tag for look at the priority.

Css have some priority :

  • Tag < class < id

  • Style in attribute > id

  • But !important > all, don't use it

you can calculate priority using :

Style in attribute = 1000

#id = 100

.class = 10

tag = 1

So

#id .class tag {
 /* = 111 */
}

#id #id2 {
/* = 200 */
}

Post Status

Asked in February 2016
Viewed 2,177 times
Voted 11
Answered 2 times

Search




Leave an answer