Individual color scheme for each table

Wishlist Pricing Table
1

I’d like to apply different colors for each table in my widget. As a workaround, the Support Team suggests using this code in the Custom CSS field on the Appearance tab:

.es-widget-container {
  --table-1-primary: rgb(141, 56, 255);
  --table-2-primary: blue;
  --table-3-primary: black;
}

/* First Table */
.es-widget-container:has(.es-toggles-wrapper:nth-child(1) .es-toggles-toggle-active) *:is(.es-title-container, .es-button, .es-bar) {
  background-color: var(--table-1-primary) !important;
}
.es-widget-container:has(.es-toggles-wrapper:nth-child(1) .es-toggles-toggle-active) .es-features-feature-icon svg {
  fill: var(--table-1-primary);
}

/* Second Table */
.es-widget-container:has(.es-toggles-wrapper:nth-child(2) .es-toggles-toggle-active) *:is(.es-title-container, .es-button, .es-bar) {
  background-color: var(--table-2-primary) !important;
}
.es-widget-container:has(.es-toggles-wrapper:nth-child(2) .es-toggles-toggle-active) .es-features-feature-icon svg {
  fill: var(--table-2-primary);
}

/* Third Table */
.es-widget-container:has(.es-toggles-wrapper:nth-child(3) .es-toggles-toggle-active) *:is(.es-title-container, .es-button, .es-bar) {
  background-color: var(--table-3-primary) !important;
}
.es-widget-container:has(.es-toggles-wrapper:nth-child(3) .es-toggles-toggle-active) .es-features-feature-icon svg {
  fill: var(--table-3-primary);
}
2 Likes