jQuery Selector Test

by Dipak1991

HTML

<div class="outer-container">
    <div class="inner-container">
        <p>inner-para1</p>
        <p>inner-para2</p>
        <ul class="sub-inner-list">
            <li><a>sub link1</a>

            </li>
            <li><a>sub link2</a>

            </li>
            <li><a>sub link3</a>

            </li>
        </ul>
    </div>
    <p>outer para1</p>
    <p>outer para2</p>
    <p>outer para3</p>
    <div class="inner-container">
        <p>inner-para1</p>
        <p>inner-para2</p>
        <p>inner-para3</p>
    </div>
    <ul class="outer-list">
        <li>outer item1</li>
        <li>outer item2</li>
        <li>outer item3</li>
        <li>outer item4</li>
    </ul>
</div>

CSS

html {
    box-sizing: border-box;
    padding : 10px;
}
div.outer-container {
    border: 3px solid #000;
    padding : 15px 15px;
}
div.inner-container {
    border: 3px solid #646CBF;
}
ul.sub-inner-list {
    border: 3px solid #5DD274;
}
ul.outer-list {
    border: 3px solid #9EAB29;
}