Skip welcome & menu and move to editor
Welcome to JS Bin
Load cached copy from
 
<!DOCTYPE html>
<html>
    <head>
        <style>
           ul.moreThanThree {
               background-color: green;
           }
        </style>
    </head>
    <body>
        <ul>
            <li>
                1
                <ul class="foo">
                    <li>a</li>
                    <li>b</li>
                    <li>c</li>
                </ul>
            </li>
            <li>2</li>
            <li>3</li>
        </ul>
        <ul>
            <li>
                1
                <ul class="bar">
                    <li>a</li>
                    <li>b</li>
                    <li>c</li>
                    <li>d</li>
                </ul>
            </li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
        </ul>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
         <script type="text/javascript">
            $(function(){
                countListItems($('.foo'));
                countListItems($('.bar'));
            });
            function countListItems(ul) {
                if ( ul.children('li').length <= 3 ) {
                    ul.addClass('moreThanThree')
                }
            }
        </script>
    </body>
</html>
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
anonymouspro
0viewers