Add CSS to unseelected Content Tabs?

[YozoraXCII]

I'm trying to customize my Content Tabs to make it a bit more "obvious" that they are tabs.

I'm by no means an expert and a lot of this is ChatGPT produced, but so far I have managed to produce this for the active tab:

What I would like to do is add a similar rounded fill for the inactive tabs in a dark grey colour, but I can't figure out the right elements for selecting the unselected tabs. I'll probably need a few pixels of spacing between each tab to avoid the border of the tabs touching each other.

here is the css I'm working with, apologies for any ChatGPT mess:

.md-tabs__item {
  font-weight: normal;
}

.md-tabs__item--active {
  font-weight: bold;
  text-decoration: underline;
}

.md-tabs__item a {
  color: #000;
}

.md-tabs__item a:hover {
  color: #dfdfdf;
}

.md-tabs__item:not(.md-tabs__item--active) a {
    color: #ffffff;
}

.md-typeset .tabbed-set > input:first-child:checked ~ .tabbed-labels > :first-child,
.md-typeset .tabbed-set > input:nth-child(10):checked ~ .tabbed-labels > :nth-child(10),
.md-typeset .tabbed-set > input:nth-child(11):checked ~ .tabbed-labels > :nth-child(11),
.md-typeset .tabbed-set > input:nth-child(12):checked ~ .tabbed-labels > :nth-child(12),
.md-typeset .tabbed-set > input:nth-child(13):checked ~ .tabbed-labels > :nth-child(13),
.md-typeset .tabbed-set > input:nth-child(14):checked ~ .tabbed-labels > :nth-child(14),
.md-typeset .tabbed-set > input:nth-child(15):checked ~ .tabbed-labels > :nth-child(15),
.md-typeset .tabbed-set > input:nth-child(16):checked ~ .tabbed-labels > :nth-child(16),
.md-typeset .tabbed-set > input:nth-child(17):checked ~ .tabbed-labels > :nth-child(17),
.md-typeset .tabbed-set > input:nth-child(18):checked ~ .tabbed-labels > :nth-child(18),
.md-typeset .tabbed-set > input:nth-child(19):checked ~ .tabbed-labels > :nth-child(19),
.md-typeset .tabbed-set > input:nth-child(2):checked ~ .tabbed-labels > :nth-child(2),
.md-typeset .tabbed-set > input:nth-child(20):checked ~ .tabbed-labels > :nth-child(20),
.md-typeset .tabbed-set > input:nth-child(3):checked ~ .tabbed-labels > :nth-child(3),
.md-typeset .tabbed-set > input:nth-child(4):checked ~ .tabbed-labels > :nth-child(4),
.md-typeset .tabbed-set > input:nth-child(5):checked ~ .tabbed-labels > :nth-child(5),
.md-typeset .tabbed-set > input:nth-child(6):checked ~ .tabbed-labels > :nth-child(6),
.md-typeset .tabbed-set > input:nth-child(7):checked ~ .tabbed-labels > :nth-child(7),
.md-typeset .tabbed-set > input:nth-child(8):checked ~ .tabbed-labels > :nth-child(8),
.md-typeset .tabbed-set > input:nth-child(9):checked ~ .tabbed-labels > :nth-child(9) {
    color: #ffffff;
    background-color: #00bc8c;
    border-color: 0 -.05rem #30363d #30363d #fff inset;
    text-decoration: underline;
    text-decoration-thickness: 1.5px;
    text-underline-offset: 4px;
    text-decoration-color: #ffffff;
    border-radius: 6px 6px 0 0;
    font-weight: bold;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.md-typeset .tabbed-labels>label {
    border-bottom: 0rem
}

.js .md-typeset .tabbed-labels:before {
    height: 0px;
}

.md-typeset .tabbed-content {
    width: 100%;
    border: 1px solid var(--md-default-fg-color--lightest);
    border-radius: 0 0 6px 6px;
    padding: 10px;
    box-sizing: border-box;
    background-color: hsl(225deg 3.85% 13.04%);
}

[kamilkrzyskow]

Hello @YozoraXCII,
nice work, to be honest I'm surprised that ChatGPT managed to generate all these child selectors, instead of something more generic 😁
The magic for the "active tab" is in the :checked part, so you have to make a copy of that list of child selectors and omit the :checked part to select every possible tab. You can move the "shared" parts, like the rounding etc, into the non-:checked group, and active tab parts like the color into the :checked group.

EDIT: Since it concerns all tabs, not just the active one, then all of these child selectors could be simplified to

.tabbed-set .tabbed-labels > label {
    color: yellow;
    background-color: blue;
    border-color: 0 -.05rem #30363d #30363d #fff inset;
    text-decoration: underline;
    text-decoration-thickness: 1.5px;
    text-underline-offset: 4px;
    text-decoration-color: #ffffff;
    border-radius: 6px 6px 0 0;
    font-weight: bold;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

[YozoraXCII]

Hello @YozoraXCII, nice work, to be honest I'm surprised that ChatGPT managed to generate all these child selectors, instead of something more generic 😁 The magic for the "active tab" is in the :checked part, so you have to make a copy of that list of child selectors and omit the :checked part to select every possible tab. You can move the "shared" parts, like the rounding etc, into the non-:checked group, and active tab parts like the color into the :checked group.

EDIT: Since it concerns all tabs, not just the active one, then all of these child selectors could be simplified to

.tabbed-set .tabbed-labels > label {
    color: yellow;
    background-color: blue;
    border-color: 0 -.05rem #30363d #30363d #fff inset;
    text-decoration: underline;
    text-decoration-thickness: 1.5px;
    text-underline-offset: 4px;
    text-decoration-color: #ffffff;
    border-radius: 6px 6px 0 0;
    font-weight: bold;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

Thanks for this! I managed to get what I was looking for and managed to build in a little padding between the labels too, but will incorporate the changes you've suggested!