Double last-child calls, one works, the other doesn't

Question

I have my code here: http://jsfiddle.net/u9BsD/2/

You will see the second section #indoorRange the last-child is being applied pushing the last box to the right and extending the width 1% more. The first section #membership is the exact same, but with three blocks but the last-child class is not effecting the element it should. Is there some rule surrounding the last-child rule I am not aware of?

Thank you for your help.

<div id="memberships">
<div class="greyHeading">
    <header>
         <h3>Individual Membership:</h3>

    </header>
    <p>$175.00</p>
</div>
<div class="greyHeading">
    <header>
         <h3>Family Membership:</h3>

    </header>
    <p>$200.00 (Includes spouse and children under 21)</p>
</div>
<div class="greyHeading">
    <header>
         <h3>Red, White and Blue Discounts:</h3>

    </header>
    <p>Active LE, military, and 1st responders: 1/2 price membership discount!</p>
    <p>Retired LE, military and 1st responders 25% discount on membership!</p>
</div>
<div class="cl"></div>
</div>
<div id="indoorRange">
<div class="greyHeading">
    <header>
         <h3>Range Fees</h3>

    </header>
    <p>The range fees are per session. A "session" is defined as a visit to Allen
        Arms Indoor Shooting Range. We reserve the right to limit sessions to one
        hour if other customers are waiting for lanes.</p>
    <p>All lanes limited to two shooters unless special permission is obtained
        in advance.</p>
</div>
<div class="greyHeading">
    <header>
         <h3>Single Session</h3>

    </header>
    <ul>
        <li>One Adult Shooter: $10.00</li>
        <li>Two Adult Shooters on Same Lane: $7.50 Each</li>
        <li>Children under 18 with paying adult guardian: Free</li>
    </ul>
</div>
<div class="greyHeading">
    <header>
         <h3>Ladies Day</h3>

    </header>
    <p>Every Wednesday is Ladies Day! Women shoot for $5.00. Additionally, women
        receive 20% off range memberships.</p>
</div>
<div class="greyHeading">
    <header>
         <h3>Red White and Blue Discounts</h3>

    </header>
    <p>Law Enforcement, Active Duty Military, First Responders, and Security
        personnel pay only $5.00 per session any time, and receive 50% discount
        on memberships!</p>
</div>
</div>


#memberships .greyHeading {
float: left;
width: 32%;
margin: 0 1% 0 0;
}
#memberships .greyHeading:last-child {
float: right;
margin: 0;
width: 33%;
}
#memberships .greyHeading header {
background: #666;
margin: 0 0 10px 0;
}
#memberships .greyHeading header h3 {
color: #fff;
text-shadow: 0px 1px 1px rgba(0, 0, 0, 1);
line-height: 25px;
margin: 0;
padding: 5px 0 1px 5px;
}
#indoorRange .greyHeading {
float: left;
width: 24%;
margin: 0 1% 0 0;
}
#indoorRange .greyHeading:last-child {
float: right;
margin: 0;
width: 25%;
}
#indoorRange .greyHeading header {
background: #666;
margin: 0 0 10px 0;
height: 55px;
}
#indoorRange .greyHeading header h3 {
color: #fff;
text-shadow: 0px 1px 1px rgba(0, 0, 0, 1);
line-height: 25px;
margin: 0;
padding: 5px 0 1px 5px;
}

There is no hidden rule that you are missing... What's odd is that you can remove the entire rule for :last-child for the indoorRange ID, and not even that makes the first one work. Working on it... — Michael, Feb 15 '13 at 16:38

score 2 · Accepted Answer · edited May 23 '17 at 11:49

2

Remove <div class="cl"></div> from the HTML and add #indoorRange { clear: both; } to the css, I believe this fixes it.

The styling wasn't applied to the last memberships greyHeading as due to the <div class="cl"> element it wasn't actually the last child.

EDIT: fiddle for proof

EDIT2: I was right about the cl div having the style applied, you may be able to use the last-of-type pseudo selector to achieve what you want also, I don't know what browser support is like unfortunately.

See this SO question for more information:

CSS last-child selector: select last-element of specific class, not last child inside of parent?

edited May 23 '17 at 11:49

Community

1
1

answered Feb 15 '13 at 16:56

Sean

6,389
9
45
69

Normally when you use floats elements inside parent you need `clear:both` the parent to fit the height from him. `clear:both` makes the element drop below any floated elements that precede it in the document [SEE HERE](http://stackoverflow.com/questions/1012131/what-is-the-use-of-style-clearboth) – Dumitru Chirutac Feb 15 '13 at 17:07

score 0 · Answer 2 · answered Feb 15 '13 at 16:49

This is not the most ideal answer as it does not solve why :last-child is not working. However, this does work for me, and may be a suitable solution.

All I did was switch from using last-child to nth-child. So these two particular classes are the changes... I also added background colors to make it more visually obvious that they are working in the jsfiddle that is here: http://jsfiddle.net/u9BsD/3/

#memberships .greyHeading:nth-child(3) {
    float: right;
    margin: 0;
    width: 33%;
    background: red;
}

#indoorRange .greyHeading:nth-child(4) {
    float: right;
    margin: 0;
    width: 25%;
    background: blue;
}

Double last-child calls, one works, the other doesn't

2 Answers2