Solved CSS adjustment to Toggle title

I am using the following code to set the pink colour on the title

.et_pb_toggle_title {
margin-left: -20px;
margin-right: -20px;
margin-top: -20px;
margin-bottom: -20px;
padding: 20px!important;
background: #fdeaf0;
}
.et_pb_toggle_title:before {
right: 10px!important;
}

What I want to do is have this code be conditional and only affect toggle titles that are active, so the pink toggle title background will only appear on a toggle that is open. I don't know how to do that and would really appreciate some help.




Also for anyone who finds this post and wants to copy and paste the top code / do something similar, adding in the CSS:

.et_pb_toggle_content.clearfix p {padding-top: 20px;}

should fix the paragraph to title spacing issue

- but full disclosure I'm new to this (currently making my first ever wordpress website!) and I've just been doing trial and error with web inspector tools to make adjustments, so I apologise if all the CSS in this post is a technical mess - it seems to work, but I welcome comments and corrections!

 

Thank you so much! Is there a way to animate the transition to ease it in some way (so the colour change isn't abrupt when active)?

 

Just adding an update for those who may come across this post later:

I used the following code to turn the background of my toggle the same colour as my custom title on hover, this sidesteps the issue of an abrupt colour change.

.et_pb_module.et_pb_toggle_close:hover .et_pb_toggle_title {
margin-left: -20px;
margin-right: -20px;
margin-top: -20px;
margin-bottom: -20px;
padding: 20px!important;
background: #fdeaf0;
}
.et_pb_module.et_pb_toggle_close:hover .et_pb_toggle_title:before {
right: 30px!important;
}

please use the selector tag as mentioned above if you only want to affect a particular toggle.

I only have one toggle on my website so here is a copy of all the code in my custom css box:

.et_pb_toggle_open .et_pb_toggle_title {
margin-left: -20px;
margin-right: -20px;
margin-top: -20px;
margin-bottom: -20px;
padding: 20px!important;
background: #fdeaf0;
}

.et_pb_toggle_title:before {
right: 10px!important;
}

.et_pb_toggle_open .et_pb_toggle_title:before {
right: 30px!important;
}

.et_pb_module.et_pb_toggle_close:hover .et_pb_toggle_title {
margin-left: -20px;
margin-right: -20px;
margin-top: -20px;
margin-bottom: -20px;
padding: 20px!important;
background: #fdeaf0;
}

.et_pb_module.et_pb_toggle_close:hover .et_pb_toggle_title:before {
right: 30px!important;
}

.et_pb_toggle_content.clearfix p {padding-top: 20px;
}