How to increase specificity weight-CodePudding

<td class>
     <div class="browser indicator">
     <div class="mobile indicator">

In this code, the class indicator has a display:inline-block. How do I increase the specificity weight of the class browser and mobile so I can give them a separate value for display?

CodePudding user response：

You can do that by specifying both classes "chained", meaning browser when it has indicator as well use this style.

.browser.indicator {
  
}

.mobile.indicator {
  
}

The important part for you is to not have the space between the classes because doing this will style children with the class indicator

.browser .indicator {
  
}

.mobile .indicator {
  
}

CodePudding user response：

U can use this one:

.indicator {
 display:inline-block;
 width: 100%;
}

@media only screen and (max-width: 600px) {
  .indicator {
    display: block;
  }
}

if screen size will be less 600px all styles which u have at @media will provide for page.