Search code examples
javascriptjqueryhtmlcssflipclock

Several FlipClock counters and different CSS styles for each one of them

I have several(more than 1) flipclock counters on a single page. I need to change some CSS styles for each one of them. If i change styles in flipclock.css file, it affects all the flipclock counters i have on a page.

I read the API documentation and i found a property that may help called 'classes' but i didn't find any examples of using it.

Please, help me change CSS styles for different flipclock counters.

Solution

  • Wrap each clock in a div with a class then use that to style each of the clocks.

    <div class="blue-clock">
    <div class="your-clock"></div>
</div>

    Or add a new class or id to each clock like this.

    <div id="id-here" class="your-clock blue-clock"></div>

    Then in your css use.

    .blue-clock {color: blue;}