Menu
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;
}
}
}
931
It seems like this would be an appropriate place to use :last-of-type, to select the last p in its parent element:
.span8 p:last-of-type {
font-style: italic;
}
Demonstration
138
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>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
