Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS [Solved] Targeting Multiple Instances of Non-Unique Classes

  • This topic is empty.
Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #201085

    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,
    Tanner

    #201087

    @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,
    Tanner

    #201089

    Atelierbram, thank you. I appreciate your help.

    Best,
    Tanner

    #201090

    It 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

Viewing 4 posts - 1 through 4 (of 4 total)
  • The forum ‘CSS’ is closed to new topics and replies.