javascript - How to apply CSS to specific children of an element -


i have css , looking smarter/better way write this.

daypicker>table>tbody>tr>td>button.btn.btn-sm.btn-secondary, daypicker>table>tbody>tr>td>button.btn.btn-default.btn-info, daypicker>table>tbody>tr>td>button.btn.btn-sm.btn-info, daypicker>table>tbody>tr>td>button.btn.btn-sm{     padding: 0.25rem;     font-size: 0.8rem; } 

mayble should put daypicker>table>tbody>tr>td in variable?

from other similar question on stackoverflow understand can use universal selectors don't know how use in case.

updated answer per comment

the snippet in q has button.btn in common can use per comment don't need style on button.btn.btn-sm.btn-danger in case can work solutions :

#1

 .daypicker>table>tbody>tr>td>button.btn:not(.btn-danger){     padding: 0.25rem;     font-size: 0.8rem;  } 

this css select button.btn elements except one(s) class of .btn-danger. refer link

#2

.daypicker>table>tbody>tr>td>button.btn{     padding: 0.25rem;     font-size: 0.8rem; }   /*the style below reset need .btn-danger*/;  .daypicker>table>tbody>tr>td>button.btn.btn-danger{    padding: /*your desired size*/;    font-size: /*your desired size*/; } 

it's use 1 apt requirement. hope helps you.


Comments

Popular posts from this blog

angular - Ionic slides - dynamically add slides before and after -

minify - Minimizing css files -

Add a dynamic header in angular 2 http provider -