CSS last-child selector not working

css, css-selectors, html, less

Solution

Here's a working example after I have removed the redundant code to show you how it works http://jsfiddle.net/RDpcM/1/

It's always a good idea to format your code and try to break out the bits that matter when trying to debug. It's very easy to get a closing bracket wrong and it all goes pear shaped.

<div class="span8">

    <p>Some text.</p>
    <p>This collection includes video, audio and essays.</p>
    <p>Visit now</p>

</div>

div p:last-child    {
     font-style: italic;
    border:solid 1px blue;

 }

[EDIT - using JQuery]

If you have other elements in div.span8 and don't know the number of elements up front you can introduce some jquery to achieve the desired affect.

Here's another fiddle: http://jsfiddle.net/VPbv2/

or this will work as a standalone example for you to try out. JQuery dynamically sets the `mySelected` class when the document loads.

<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>
<style type="text/css">
.mySelected  {
    font-style: italic;
    border:solid 1px blue;
 }
</style>
<script type="text/javascript">
$(document).ready(function() {
    $("div.span8 > p:last").addClass("mySelected");
});
</script>
</head>
<body>
    <div class="span8">
        <p>Some text.</p>
        <p>This collection includes video, audio and essays.</p>
        <p>Visit now</p>
        <div>xxx</div>
    </div>
</body>
</html>

[EDIT - non JQuery]

You pointed out that the original answer will not work when you have this code

<div class="span8">
    <p>Some text.</p>
    <p>This collection includes video, audio and essays.</p>
    <p>Visit now</p>

    <div> another non-P tag that will mess up the p:last-child selector</div>

</div>

So you have to make sure you don't have any other siblings for your `<p>` tags by wrapping them in an extra div like this

<div class="span8">
    <div class="only-for-p">
        <p>Some text.</p>
        <p>This collection includes video, audio and essays.</p>
        <p>Visit now</p>
    </div>

    <div> this non-P tag no longer messes with the p:last-child selector</div>

</div>

Problem

I'm trying to apply styles to the last `<p>` in a div. I'd like to do so without adding a new class (or ID). I've tried using the last-child selector but it's not working. I have even tried declaring `p:last-child {font-style: italic;}` for all of my CSS document and this doesn't seem to have any effect. Here's my HTML: ``` <div class="new-section"> <div class="collection-container"> <div class="container"> <div class="row"> <div class="title span16"> <h1>The Title</h1> </div> <div class="span8"> <p>Some text.</p> <p>This collection includes video, audio and essays.</p> <p>Visit now</p> <div class="arrow-right"></div> </div> </div> </div> </div> </div> ``` And here's my LESS CSS: ``` .collection-container { height: 200px; position: relative; background-color: @gray; .container { padding-top: @r-margin; .title { margin-bottom: @xs-margin; } .span8 p:last-child { font-style: italic; } } } ```

Original source