Seperate color for each service icon and title

i want seperate color for each service icon and title. I tried to find solution and found couple of post also. I used following css…

.service:nth-of-type(2) .service-icon {
background-color: #333;
}
.service:nth-of-type(2) .service-title {
color: #333;
}

but it did not work…

can any guide me how to achieve it.

it is bit urgent

Hello there,

Please use this code:



/* Service 1 */

.service:nth-of-type(1) .icon{
  border-color: #ff0000;
}
.service:nth-of-type(1) .icon i{
  color: #ff0000;
}

.service:nth-of-type(1) .content > h3{
  color: #ff0000 !important;
}

/* Service 2 */

.service:nth-of-type(2) .icon{
  border-color: #fff000;
}
.service:nth-of-type(2) .icon i{
  color: #fff000;
}

.service:nth-of-type(2) .content > h3{
  color: #fff000 !important;
}

/* Service 3 */ 

.service:nth-of-type(3) .icon{
  border-color: #008000;
}
.service:nth-of-type(3) .icon i{
  color: #008000;
}

.service:nth-of-type(3) .content > h3{
  color: #008000 !important;
}

Regards,
Kharis

Hello Kharis

thank you very much for code, it worked. appreciate your response.

You’re always welcome here :slight_smile:

Please let us know in a new topic if you have any further questions, or if we can provide you with any other assistance.

If you enjoyed Sydney, would you mind rate it here:https://wordpress.org/support/view/theme-reviews/sydney#postform like some of our users did? We would highly appreciate it if you do so.

Regards,
Kharis