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.

2

I am using a modified version of this to change the Title Size of a specific column smaller than the others and I got it to work for the first row, but how do I then apply to other rows? I am using the grid layout. I used

.es-column-container:nth-child(2) .es-title {
font-size: 18px;
}

3

Never mind, I figured it out! I just had to count out from the start what box it was and use that!

4

Great! If anything else comes up, we’re always here to help :wink: