- This topic is empty.
-
AuthorPosts
-
April 25, 2015 at 12:05 pm #201085Historical Forums UserParticipant
It’s been a long time since I’ve posted for help at CSS-Tricks, I’ve missed this place. Looks good as ever.
Launched my own tech support business recently and next week I’m announcing a new product offering. The page that explains this new product has a couple of pricing tables on it: http://30dollartech.com/30care-support-plans/
The site is a WordPress site built on the theme “Basement” by Wegrass (http://basement.wegrass.com/). Great theme if anyone was wondering.
Anyway, you’ll notice that one of the pricing table headers is highlighted green. That’s because, through a function of the theme, I’ve “featured” it. I can change the colors of the other two table headers with this:
.stack-pricing ul.price-list li.row-title {background: #000;}
But, of course, that changes both headers. There doesn’t seem to be anything unique that I can target in order to change the color of the “plus” and “premium” headers to match the color used in their corresponding logos. If there is, I’m not good enough to know it. I had thought of targeting the “premium” plan by using a :last selector but it didn’t work. Then I realized why it didn’t work and felt dumb. :)
I want to make the header and price of each column match the color used in each plan’s “logo”.
Can anyone help with that?
Thanks,
TannerApril 25, 2015 at 12:17 pm #201087Historical Forums UserParticipant@Aterlierbram, thank you for the quickness of that response. I’m sure your suggestion will work but I’m afraid I don’t have a good understanding of pseudo class selectors like nth-of-type. Could you point me in the direction of a good resource to learn more about them? I wouldn’t have the slightest idea how to implement them. My CSS skills are average at best.
Thanks,
TannerApril 25, 2015 at 12:24 pm #201089Historical Forums UserParticipantAtelierbram, thank you. I appreciate your help.
Best,
TannerApril 25, 2015 at 12:31 pm #201090Historical Forums UserParticipantIt ended up being this, Atelierbram:
.stack-pricing div:nth-of-type(3) ul.price-list .row-title { background: #097288; } .stack-pricing div:nth-of-type(4) ul.price-list .row-title { background: #e9840d; }
and thank you again. I stuggled for a couple of hours on my own. I really appreciate it.
Best,
Tanner -
AuthorPosts
- The forum ‘CSS’ is closed to new topics and replies.