Search code examples
javascriptcsssifr

sIFR doesn't apply to children in list

I am unable to remove bullets in nested unordered lists after sIFR has been applied. I experinced this on a website I was creating.

I tried to create a basic HTML skeleton and apply the sIFR to easily figure out how to remove child bullets, but it didn't work here either.

<ul>
    <li>Option 1</li>
    <li>Option 2
        <ul id="menu">
            <li>Option 2-1</li>
            <li>Option 2-2
                <ul>
                    <li>Option 2-2-1</li>
                    <li>Option 2-2-2</li>
                    <li>Option 2-2-3</li>
                </ul>
            </li>
        <li>Option 2-3</li>
        </ul>
    </li>
</ul>

I seem to be unable to reference the inner ul's in any way. I've tried several selectors, including:

sIFR.replace(infinityt, {
  selector: 'li',
  css: ['.sIFR-root { list-style-type: none; list-style: none;  }', 'ul { list-style-type: none; list-style:none; }' ]
});

sIFR.replace(infinityt, {
  selector: '#menu',
  css: ['.sIFR-root { list-style-type: none; list-style: none; margin: 300px; }' ]
});
Solution

  • Fixed by wrapping the text in a span and sIFR the span. Normal CSS can then be used to remove bullets in the list.

        <ul>
        <li><span><a href="#">Option 1</a></span></li>
        <li><span><a href="#">Option 2</a></span>
            <ul>
                <li><span><a href="#">Option 2-1</a></span></li>