Make title of each column different color

CSS Codes Pricing Table
1

Add the code for your layout to the Custom CSS field on the Appearance tab of your Pricing Table widget’s settings:

Grid:

.es-column-container:nth-child(1) .es-title {
  color: tomato;
}

Carousel:

.es-layout-carousel-grid .es-column-container:nth-child(1) .es-title,
.es-snap-carousel-item:nth-child(1) .es-title {
  color: tomato;
}

Classic Table:

.es-layout-classic-table-container:not(:has(.es-snap-carousel-wrapper)) .es-column-container:nth-child(1) .es-title,
.es-snap-carousel-item:nth-child(1) .es-title {
  color: tomato;
}

Comparison Table:

.es-layout-comparison-table-container:not(:has(.es-snap-carousel-wrapper)) .es-column-container:nth-child(2) .es-title,
.es-layout-comparison-table-snap-carousel .es-snap-carousel-item:nth-child(2) .es-title,
.es-layout-comparison-table-mobile-snap-carousel .es-snap-carousel-item:nth-child(1) .es-title {
  color: tomato;
}

Comparison Table Head Column:

.es-layout-comparison-table-container:not(:has(.es-snap-carousel-wrapper)) .es-column-container:nth-child(1) .es-title,
.es-head-column-container .es-title {
  color: tomato;
}

Note: Replace numbers in brackets with the number of the needed column: . The number in the last line of the Comparison Table code=actual number−1. For example, if the real column number is 2, you should paste 1.

1 Like