CSS re-styling of tabbed content?

[Dave]

.wp-block-ub-tabbed-content-tab-title-wrap and other classes appear to be style in an XML payload which overrides even theme customization CSS. Where is this generated? I’d like to override the border styles, but this prevents traditional approaches.

Also, the selected tab doesn’t seem to have a class identifier or other characteristic that can be styled. (My CSSfu is not Level 5, as I’m sure you can tell.) Have I overlooked something obvious?

[Alexis]

Hi @DaveReedMe ! Active tabs in the tabbed content block always have the “active” class. Your CSS selector should be “.wp-block-ub-tabbed-content-tab-title-wrap.active”.

To override the plugin style, you may need to add the ID of the block to the beginning of the CSS selector. You can find this by inspecting the source code and going to the block’s main element. For example, since you’re looking for a tabbed content block, you’ll need to find the ID that’s formatted as “ub-tabbed-content-(unique hexadecimal code for the block)”. Your custom CSS should be able to override the plugin style once you specify the block ID. With all else being equal, your custom CSS should prevail over the plugin CSS.

[Dave]

Thanks for the reply, Alexis. Are those hex codes dynamically generated at runtime? Or are they a design-time artifact?

[Alexis]

They’re dynamically-generated in runtime, and they’re added to ensure that multiple instances of any block could be styled separately from each other, i.e. the style for an instance of a certain block won’t affect another instance of that block.