Possible to use CSS to style two different types of buttons?

I use two types of button styles in the same screen - a filled in one and one with an outline.

I really want to use a different color button so I used the following CSS

[data-test="app-button-view"] {
background: #c94d37 !important;
color: white !important;

Which works - just a little too well as all buttons now becomes this style - which makes sense.
But is there a way to have two different styles of buttons when using CSS?

yeah, it’s possible but fiddly. You need to target each button individually using screenScrollView and :nth-of-type

So something like the following:

div[id*='screenScrollView'] > div > :nth-of-type(3) button {
    background-color: "red";
div[id*='screenScrollView']> div > :nth-of-type(4) button {
    background-color: "blue";

It may take a bit of trial and error to get the correct nth-of-type values, and these will be affected by other components on the same screen. AND they will change if you start re-arranging components.


Ok, got it!
Maybe this is a bit of a last minute treatment when everything is working…

This topic was automatically closed 24 hours after the last reply. New replies are no longer allowed.