Sqnkov Sqnkov - 6 months ago 187
CSS Question

How to override Unslider's arrows styling?

I am using multiple instances of Unslider on a website I am working on, and one of them needs to have navigation arrows. I added the arrows but now I can't style them, they seem to be inaccessible trough CSS. No

!important;
rules work either.

Here is my html:

<div class="unslider">
<div class="slider">
<ul>
<li>
<!-- slide content -->
</li>
<li>
<!-- slide content -->
</li>
</ul>
</div>
</div>


Here is my SCSS (based upon generated markup from the plugin itself):

.unslider {
.slider {
// slide styling
}
.unslider-arrow {
background: tomato !important;
}
}


And my initialization:

$('.slider').unslider({
autoplay: true, delay: 7000,
arrows: true,
nav: false,
})





Here is a Fiddle.







NOTE: All of the samples are just blank code, which size has been reduced in order to help better and quicker understanding.


No matter what I do, my SCSS(CSS) can't reach the arrows.


SOLUTION: As Marcos described in his answer, You should be very careful about your CSS hierarchy. If you are adding custom containers, unslider might mix-up your selectors slightly.

Answer

The arrows are not children elements of the .slider. container.

To achieve what you want, the SCSS hierarchy should look like this:

.unslider {
        .unslider-arrow {
            background: tomato ;
        }
}

Your original code seems to be adding a .slider parent that you don't need.

Working fiddle: https://jsfiddle.net/cq5p2g1e/2/

Comments