Geek asks and answers

Last-child CSS selector not working

I am trying to apply styles to the latter <p>in a div. I would like to do this without adding a new class (or ID).

I tried using the last-child selector, but it does not work.

I even tried declaring p:last-child {font-style: italic;}CSS for my entire document, and this seems to have no effect.

Here is 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 is 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;
    }
  }
}
+5
source share
6 answers

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

, . , .

<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 - JQuery]

div.span8 , , jquery .

: http://jsfiddle.net/VPbv2/

. JQuery mySelected .

<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 - JQuery]

, ,

<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>

, , <p>, div,

<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>
+4

, :last-of-type, p :

.span8 p:last-of-type {
  font-style: italic;
}

+6

, . ...

.span8   p:last-child {font-style: italic;}

.

, CSS3, ...

.span8   p:nth-child(3) { }

.

+5
div.span8 p:last-child { font-style:italic; }
0

p: , p: , div.span8 - div.arrow -, p

0

css , p span8. .span8 p:last-child {font-style: italic;} .span8 p:nth-last-child(2) {font-style: italic;}

0

More articles:


All Articles