Need help on styling a list of radio elements

  • Resolved ionblue

    (@ionblue)


    10 years, 7 months ago

    I’m trying, quite unsuccessfully, to do some styling on a list of radio elements. My list is quite long and when I add them in each one goes in as a span element with a label element (I enabled that). What I want to do is have the background a different color for every other one which is simple enough to do normally. However I can’t seem to figure out how the heck to do in this.

    Since CF7 adds the name as a class to the main parent I’m able to target it specifically with that class – .genre-list.

    What should do what I’m after is this:

    span.genre-list span span label:nth-child(odd) {
    background-color: #eeeeee;
    }

    But all that does is color the background on every single label element which is NOT what I want.

    Is this even possible with this since it uses a span/label combo?

    Thanks.

    https://www.ads-software.com/plugins/contact-form-7/

Viewing 2 replies - 1 through 2 (of 2 total)
  • Thread Starter ionblue

    (@ionblue)

    And never mind. I just figured out how to do this. I was able to do it when I stopped using the label element. Disabled that and changed my CSS to this:

    span.genre-list span span.wpcf7-list-item:nth-child(odd) {
    background-color: #eeeeee;
    }

    And now it works! Just in case anybody else wants to do this. Oh and I’m also changing the display to block so there’s one per line with this:

    .genre-list span.wpcf7-list-item {
    display: block;
    }

    Now for more styling fun!

    If this resolves your question, it helps others contributing here, if you can flag your post as [resolved]

Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘Need help on styling a list of radio elements’ is closed to new replies.