nth-child = auto styling

  • Resolved chappie

    (@chappie)


    10 years, 4 months ago

    After playing around, I found a great way to style my Testimonials page automatically so that each alternate testimonial is styled differently. You ca use it to break up the page so that testimonials are alternately black/gray, normal/italic, light/bold or whatever you want – without ever needing to style testimonials individually.

    It makes use of the pseudo class, nth-child. Give it a whirl:

    /* testimonials page vary style for alternate texts  */
.hms-testimonial-container:nth-child(even) {
font-style: italic;
color: #606060;
}

    This changes every even numbered testimonial. If you want to apply a different style to the odd numbers, just change “even” to “odd” when you repeat the code.

    I think you can extend the styling to the widget too if you change the target to .hms-testimonial-group – or you can apply different alternate styling to the widget by using .hms-testimonials-rotator.

    http://wordpress.org/plugins/hms-testimonials/

  • The topic ‘nth-child = auto styling’ is closed to new replies.