Trouble customizing slider dots for multiple sliders on same page

[bmichaelgroff (Michael Groff)]

So I’ve built a custom slider with a bit of custom code, especially for the slider dots. However I’m kinda stuck on what do for multiple custom sliders on the same page since all the slider dots have the same class.

Is there a way to target slider dots with with a specific parent class?

Here is a screenshot of the two sliders:

Here is the code I’m using to affect the top slider:

<style>
.w-slider-dot {
  background: #c4c5c5;
  font-size: 10px;
  margin: 8px;
}

.w-slider-dot.w-active {
  background: teal;
  font-size: 13px;
  margin: 8px;
}

/* Extra small devices (phones, 500px and down) */
@media only screen and (max-width: 500px) {
  .w-slider-dot {
    margin: 5px;
  }
  .w-slider-dot.w-active {
    margin: 5px;
  }
}

</style>

Thanks so much guys.

Here is my site Read-Only:
https://preview.webflow.com/preview/test-031ec1-9bb3184c8b09ab1eab523e11f98?utm_medium=preview_link&utm_source=designer&utm_content=test-031ec1-9bb3184c8b09ab1eab523e11f98&preview=a6fd0387e48fec698dc378be5c14735a&workflow=preview

[imtiazraqib]

Hey @bmichaelgroff , you can use the parent child combo within CSS to target a child element with a specific parent.

For example, let’s say, all your slider dots have the class w-slider-dot and you have multiple slide classes, such as Hero__Slider, CTA__Slider etc.

This is how you can target each Slider’s slider dots:

<style>
  .Hero__Slider .w-slider-dot {
      background: #455678;
}

  .CTA__Slider .w-slider-dot {
      background: red;
}

You can check this playground if you need more help:

W3Schools online HTML editor

[bmichaelgroff (Michael Groff)]

Thanks @imtiazraqib! This is exactly what I needed. I assumed it was an easy CSS tweak

[imtiazraqib]

Glad I was able to help @bmichaelgroff , Happy Designing