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.

You can either add a unique class to all of these elements and target it that way or you can narrow it down by removing the nested parent elements and go with `daypicker > button` if I understand your question correctly. — mnewelski, Sep 12 '17 at 09:05
`daypicker` isn't an element-type, it's probably either a class-name or an id; in which case you need to write either `.daypicker` (if a class-name) or `#daypicker` (if an id). — David Thomas, Sep 12 '17 at 09:06
I'm using this library in my angular project. https://github.com/Gillardo/ngx-bootstrap-datetime-popup using bootstrap v.4 and need to make some changes to the css. this is the html: — Shay, Sep 12 '17 at 09:10
daypicker is an element I installed from github, I have no access to it so I can't add a class to the relevant elements. The above css works but I'm looking for a way to enhance it. — Shay, Sep 12 '17 at 09:12

Jithin Raj P R · Accepted Answer · 2017-09-12T13:20:23.110

0

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.

edited Sep 12 '17 at 13:20

answered Sep 12 '17 at 09:16

Jithin Raj P R

6,667
8
38
69

1

Not what I had in mind but works perfectly. Thanks. – Shay Sep 12 '17 at 09:30
@Shay What was the idea in your mind share it. we can try your method also.! – Jithin Raj P R Sep 12 '17 at 09:35
you'r solution is wider then my snippet, It will effect elements other the ones I intended. – Shay Sep 12 '17 at 09:46
`daypicker` is actually a nodeName, not a className. – Thomas Sep 12 '17 at 09:57
@Shay changind `.daypicker` back to `daypicker` should solve most of you problem with the buttons. If it's not, than you have to keep the verbose definitions of wich buttons you want to select. BUT the `>table>tbody>tr>td>` part is definitely obsolete and can be replaced by a simple *space*. – Thomas Sep 12 '17 at 10:01
@Thomas Do you mean changing this: daypicker>table>tbody>tr>td>button.btn.btn-sm.btn-secondary to this: daypicker>*>button.btn.btn-sm.btn-secondary ? Because I tried that and it didn't work. – Shay Sep 12 '17 at 11:53
@Shay please specify what elements you are targeting in your **Q** my first solution works exactly what you will get applying your snippet. – Jithin Raj P R Sep 12 '17 at 12:13
@weBer you'r code works on all buttons inside the table and not only on the specific buttons as the snippet in my question. I wanted to know if I write a cleaner code to do exactly the same. – Shay Sep 12 '17 at 12:27
@Shay in the snippet in your **Q** has `button.btn` in common so you can just use my first suggestion and your result will be same if there is **no common class** then your method is good to go. – Jithin Raj P R Sep 12 '17 at 12:45
@weBar you'r suggestion effects also the following element: daypicker>table>tbody>tr>td>button.btn.btn-sm.btn-danger but I don't want to effect this specific button. – Shay Sep 12 '17 at 12:54
@Shay you should have mentioned that on your **Q** bro. only then we can suggest best answer for you. I will update my answer according to your need. – Jithin Raj P R Sep 12 '17 at 13:07
@Shay I have updated the answer for you if it was helpful don't forget to vote it up :) – Jithin Raj P R Sep 12 '17 at 13:21
@weBar thanks alot. I can't up vote because I'm new in Stack Overflow and don't have enough reputation points. – Shay Sep 12 '17 at 13:26
@Shay it's k bro. Glad I could help you. :) – Jithin Raj P R Sep 12 '17 at 13:37

How to apply CSS to specific children of an element

1 Answers1