Using the Last-Child Selector

How to use the :last-child selector?

Does .slab:last-child mean the last child of .slab or the last occurrence of .slab ?
Neither. It matches an element that
- has the "slab" class, and
- is the last child of its parent.
The last .slab within its parent may not necessarily be its last child. .slab:last-child will match if and only if both conditions are true for the given element.
In case 1, why is the border-bottom vanishing after the introduction of an unrelated element .something ?
Because then the last child of the parent of .wrapper becomes that other element. This element isn't unrelated to .wrapper — it's related to it by way of being its next sibling.
The .slab elements within that wrapper never receive a border; the border is being applied to the .wrapper for as long as it is the last child of its parent. (Incidentally, the parent of .wrapper in your examples is implied to be body.)
What is the best way to apply border-bottom to the last .slab ?
You won't be able to do this reliably unless you can guarantee that the only possible children of .wrapper are .slab elements, in which case the class name then becomes quite irrelevant (but you can still include it in your selector so you avoid matching the last child of .wrapper when it's not a .slab).

How can I select the last-child of the last-child?

You can use .block div:last-child div:last-child

.block div:last-child div:last-child{  background-color:yellow;}

<div class="block">  <div>not</div>  <div>not</div>  <div>not</div>  <div>    <div>not</div>    <div>not</div>    <div>this one</div>  </div></div>

CSS :last-child

One possibility I can think of is that you're appending elements that aren't <div>s and/or don't have the item class. Check the output of your PHP/MySQL script and see if there are any non-div.item elements beside (in DOM terms) the div.item elements.

Such elements will not match the selector:

div#content div.item:last-child

That selector finds only <div>s with item class, that are the last child of div#content.

Here's an example.

Before appending

<div id="content">
  <div class="item"></div> <!-- [1] Selected -->
</div>

After appending

<div id="content">
  <div class="item"></div> <!-- [2] Not selected -->
  <div></div>              <!-- [3] Not selected -->
</div>

What's being selected, what's not, and why?

Selected

This <div> element has the item class, and it's the last child of div#content.
It exactly matches the above selector.
Not selected

This <div> element has the item class, but is not the last child of div#content.
It doesn't exactly match the above selector; however, it can possibly match either one of these selectors:
```
/* Any div.item inside div#content */
div#content div.item

/* The last div.item child of its parent only */
div#content div.item:last-of-type
```
Not selected

Although this <div> element is the last child, it does not have the item class.
It doesn't exactly match the above selector; however, it can possibly match this:
```
/* Any div that happens to be the last child of its parent */
div#content div:last-child
```

CSS: last-child of parent

You can use .parent > *:last-child or just .parent > :last-child

An asterisk (*) is the universal selector for CSS. It matches a single
element of any type. Omitting the asterisk with simple selectors has
the same effect.

.parent > *:last-child {  background-color: red;}

<div class="parent">  <p>First child</p>  <input type="text" placeholder="Second child" />  <div>Third child</div></div>

Using the last-child selector

The :last-child pseudoclass still cannot be reliably used across browsers. In particular, Internet Explorer versions < 9, and Safari < 3.2 definitely don't support it, although Internet Explorer 7 and Safari 3.2 do support :first-child, curiously.

Your best bet is to explicitly add a last-child (or similar) class to that item, and apply li.last-child instead.

Behaviour of last-child

It's worth mentioning that W3Schools is an external resource. It isn't the official CSS documentation. The :last-child pseudo-class is defined in the CSS Selectors specification here: http://www.w3.org/TR/css3-selectors/#last-child-pseudo. This specification states:

The :last-child pseudo-class represents an element that is the last child of some other element.

:last-child selects specifically the last child. Here p:last-child would apply styling to a p element only if it is the last child. In your case, span is the last child, not p, therefore there's nothing for your selector to select.

Example 1

<div>
  <p>Foo.</p>
  <span>Bar.</span>
<div>

Here span is the last child, not p. p:last-child would not select anything.

Example 2

<div>
  <p>Foo.</p>
  <span>Bar.</span>
  <p>Baz.</p>
<div>

Here p is the last child, so p:last-child would select the last p element (whose text here is "Baz.".

This behaviour is exactly why the :last-of-type selector exists. :first-child and :last-child will always only look select the first or last child.

how to pick 2nd last child by css

you can do:

li:nth-last-child(2) {
   css declarations;
}

nth-last-child counts back from the last child rather than forward from the first.

Note that I took out the 'ul' and 'a' selectors from the css. That didn't match what you had in the html.

Select the last 3 child elements

You can read more here about nth-last child, but this should basically do the trick of selecting the last 3 children with just CSS

#something a:nth-last-child(-n+3) {
    /*declarations*/
}

fiddle demonstration from Fabrício Matté

This will only select those rows returning a positive number for out N expression (-n+3), and since we are using nth-last-child, it's counting from last to first,
so first rows from bottom gives,

f(n) = -n+3
f(1) = -1+3 = 2 <- first row from the bottom
f(2) = -2+3 = 1 <- second row from the bottom
f(3) = -3+3 = 0 <- third row from the bottom

everything else will return a negative number

How can I select the last element with a specific class, not last child inside of parent?

:last-child only works when the element in question is the last child of the container, not the last of a specific type of element. For that, you want :last-of-type

http://jsfiddle.net/C23g6/3/

As per @BoltClock's comment, this is only checking for the last article element, not the last element with the class of .comment.

body {
  background: black;
}

.comment {
  width: 470px;
  border-bottom: 1px dotted #f0f0f0;
  margin-bottom: 10px;
}

.comment:last-of-type {
  border-bottom: none;
  margin-bottom: 0;
}

<div class="commentList">
  <article class="comment " id="com21"></article>

  <article class="comment " id="com20"></article>

  <article class="comment " id="com19"></article>

  <div class="something"> hello </div>
</div>