how to set the multiple selected background color

[whysowt326]

maybe
tab-item.selected.tab {
background-color: red;
}
but it does not work

[irvinm]

How about:

tab-item.highlighted tab-item-substance {
  background: linear-gradient(90deg, rgba(9,4,66,1) 0%, rgba(10,7,119,1) 15%, rgba(14,86,224,1) 50%, rgba(10,7,119,1) 85%, rgba(9,4,66,1) 100%); 
}

[whysowt326]

all right , just one problem , my active is purple, and hover is little green , i want to set the selected ones to be purple .
problem is : the last choosed one will be read as the hover color ,not the purple . how can i override it ?
in the firefox css files ,there is no such problem.
Syntax below:

tab-item.highlighted tab-item-substance {
background: purple; !important
}

[whysowt326]

all right , just one problem , my active is purple, and hover is little green , i want to set the selected ones to be purple .
problem is : the last choosed one will be read as the hover color ,not the purple . how can i override it ?
in the firefox css files ,there is no such problem.
Syntax below:

tab-item.highlighted tab-item-substance {
background: purple; !important
}

[irvinm]

I see what you are saying ... the challenge is that CSS gives preference to items that are more specific when determining which to apply. So if you had a style on ".highlighted" and then another to ".highlighted.hover", the second would always be applied when true over the first.

If they are at the same level, then the order in which they are in the CSS file determines which is applied unless forced by "!important" ... the last to be listed would be applied if "!important" isn't there.

Can you show your CSS you are applying for "highlighted", "active", and "hover"?

[irvinm]

I don't know if this is going to be possible. The "active" tab by default is also a "highlighted" tab. Therefore, you can not tell if the active tab is just a single tab (which you want green) or part of a group of tabs that are selected (which you want purple). I am doing the opposite and making sure the "active" tab shows differently even when part of a selected group by showing a slightly thicker border.

@piroor any thoughts on a better way to accomplish what @whysowt326 is trying to do?

[whysowt326]

i remove the !important on the hover setting , and then it works !

[whysowt326]

you give me the ideas how to distinguish active ones from the group selected/hightlights ones.

[irvinm]

Glad you got it to work!

[whysowt326]

tab-item.highlighted tab-item-substance { background: #1E90FF; !important } tab-item.active .background { background-color: #1E90FF ; } tab-item tab-item-substance:hover { background: #55AB6C !important; opacity: 1; } More.Wang Mike Irvin ***@***.***> 于2024年3月31日周日 23:52写道：

…

I see what you are saying ... the challenge is that CSS gives preference to items that are more specific when determining which to apply. So if you had a style on ".highlighted" and then another to ".highlighted.hover", the second would always be applied when true over the first. If they are at the same level, then the order in which they are in the CSS file determines which is applied unless forced by "!important" ... the last to be listed would be applied if "!important" isn't there. Can you show your CSS you are applying for "highlighted", "active", and "hover"? — Reply to this email directly, view it on GitHub <#3514 (reply in thread)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/BDHS2HRSUTZ6HSFB6PBJGDLY3AWKJAVCNFSM6AAAAABFQPE6UCVHI2DSMVQWIX3LMV43SRDJONRXK43TNFXW4Q3PNVWWK3TUHM4DSNRVGYYDK> . You are receiving this because you authored the thread.Message ID: ***@***.***>