Correct pseudo class selector

[andmperotti]

The original code had the psudo class selector inside the parentheses with the part pseudo element value, which is why the styling was not working when the element was active.

Description

The css code needs to use a psueod class selecor however it was typed in the selector as a value to the 'part' psudo element selector. Thus this change moves 'active' to be a psudo class selector following the part's parentheses and value.

Motivation

I was reading over this resource to learn about the 'part' psudo element selector and was looking at the example and started playing with the code because I thought it wasn't working.

[github-actions]

Preview URLs

• /en-US/docs/Web/CSS/::part

[estelle]

The original is correct.

All part names used in ::part() pseudo-element must be present in the part value declared on the shadow tree element but the order of the part names doesn't matter, i.e., the selectors ::part(tab active) and ::part(active tab) are the same.

In the HTML, we have <div part="tab active">Tab A</div>. The ::part(tab active) matches that.

[andmperotti]

Oh ok I understand now thank you.
I guess I was stuck on what I thought was using the 'active' pseudo class for styling the active div tab the user interacts with, and not just the 'active' part value tab.

And if you wanted the tabs to have a blue bottom border when active, here I changed 'active' part value to 'default' and use the active pseudo class selector.
tabbed-custom-element::part(tab) {
color: blue;
border-bottom: transparent solid 4px;
}

tabbed-custom-element::part(tab):hover {
background-color: black;
color: white;
}

tabbed-custom-element::part(tab default) {
border-color: blue;
}

tabbed-custom-element::part(tab):active {
border-color: blue;
}

Sorry I'm rambling but wanted to get this knot untangled in my brain.

[estelle]

would changing "active" to "hilite" in the HTML and CSS make it less confusing?