Search code examples
cssjquery-mobiledropshadow

How to make a collapsible with a single css drop shadow in Jquery mobile?

I try to style my collapsibles. I want to have there a single drop shadow casted from the header on the first element in the following list. But I can't find the right selector to make it a single shadow instead the shadow appears on every li-element. Can you help me please?

enter image description here

I've made a jsfiddle for this Example

HTML-Code:

<div data-role="collapsible-set" data-content-theme="d" data-inset="true" >
    <div data-role="collapsible" data-inset="false" data-collapsed="false">
        <h3>Section 1</h3>
        <div data-role="collapsible" class="submenue no_corners" 
                data-inset="true" data-theme="c" data-theme-content="d" 
                data-corners="false" data-collapsed="false">
            <h3> Submenue </h3>
            <ul data-role="listview" data-icon="plus">
                <li>Subitem </li>
                <li>Subitem </li>
                <li>Subitem </li>
            </ul>
        </div>
    </div>
</div>

CSS-Style:

.ui-collapsible-content li {
    -webkit-box-shadow: inset  0px 8px 8px -2px #AAAAAA;
    -moz-box-shadow:    inset  0px 8px 8px -2px #AAAAAA; 
    box-shadow:         inset  0px 8px 8px -2px #AAAAAA;
}
Solution

  • Use psuedo CSS selector :first-child

    Demo

    .ui-collapsible-content li:first-child {
 -webkit-box-shadow: inset  0px 8px 8px -2px #AAAAAA;
 -moz-box-shadow: inset  0px 8px 8px -2px #AAAAAA; 
 box-shadow: inset  0px 8px 8px -2px #AAAAAA;
}