CSS ::part() Selector

❮ Previous Selectors Next ❯

Example

tabbed-custom-element::part(tab) {
  color: #0c0dcc;
  border-bottom: transparent solid 2px;
}

tabbed-custom-element::part(tab):hover {
  background-color: #0c0d19;
  color: #ffffff;
  border-color: #0c0d33;
}

tabbed-custom-element::part(tab):hover:active {
  background-color: #0c0d33;
  color: #ffffff;
}

tabbed-custom-element::part(tab):focus {
  box-shadow: 0 0 0 1px #0a84ff inset, 0 0 0 1px #0a84ff,
    0 0 0 4px rgba(10, 132, 255, 0.3);
}

tabbed-custom-element::part(active) {
  color: #0060df;
  border-color: #0a84ff !important;
}
Try this code ❯

Meaning

The ::part() selector represents any element within a shadow tree that has a matching part attribute.

Version: CSS3



Standard Syntax

::part(ident+) {
  css declarations;
}


Browser Support

The numbers in the table specify the first browser version that fully supports the property.



Status





Parameter values

The following table describes the values of this selector parameter.

Value Description
ident+ Specifies the matching part attribute value.
❮ Previous Selectors Next ❯