Search code examples
cssselectororbit

Orbit css selectors

I'm using Foundation Orbit slider. It's working fine except that I need to do have some css (move the caption) applied to a specific slider on the page.

If I use following selector it does the change, only problem it's a global change.

.orbit-wrapper .orbit-caption
{
    bottom:-30px;
}

I have tried different selectors with the id of the container div but it never gets applied. 

#promotion .orbit-caption
{
    bottom:-30px;
}

If I check the css values in the browser, the correct values are there, but they are not applied to the element somehow. Only when I change the selector as in the first example above I get the change.

I'm not an expert in css, but the selectors I have tried with do work in normal circumstances.

What do I do wrong?

Solution

  • Ok, so I found out whats going on. Orbit copies the caption element to an element outside of the original orbit container (my div). I didn't notice this from the beginning because it left the original captions where I created them, so I was debugging them.

    The solution is to create another wrapper element and use that as an selector for the captions. The following is working if I create a div with id=promotion-wrapper containing the orbit slider div.

    #promotion-wrapper .orbit-caption
{
    bottom:-30px;
}