How to apply CSS to specific children of an element

Question

I have this CSS and looking for a smarter/better way to 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 I should put daypicker>table>tbody>tr>td in a variable?

From other similar question on StackOverflow I understand I can use universal selectors but don't know how to use it in my case.

Answer 1

Updated the answer as per the comment

The snippet in your Q has button.btn in common so you can just use that but as per your comment you don't need this style on button.btn.btn-sm.btn-danger in this case you can work with this solutions :

#1

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

This CSS would select all the button.btn elements except the one(s) with a class of .btn-danger. Refer link

#2

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


/*the style below will reset to your need for .btn-danger*/;

.daypicker>table>tbody>tr>td>button.btn.btn-danger{
   padding: /*your desired size*/;
   font-size: /*your desired size*/;
}

It's up to you to use the one which is apt for your requirement. Hope this helps you.