Using :Last-Child with Class Selector

Using :last-child with class selector

Your statement was: "I want to style the last/second .heading."

That would mean that you would have to write your code like this:

<ul>
    <li class="heading">Hello world</li>
    <li class="heading">Hello world</li>
    <li class="heading">Hello world</li>
    <li class="heading">Hello world</li>
    <li class="heading">Hello world</li>
</ul>

And the CSS:

ul li.heading:last-child {
    background: black;
}
ul li.heading:nth-child(2) {
    background: black;
}

Else, with your current html-code, you would write:

ul li.heading:nth-child(4) {
    background: black;
}
ul li.heading:nth-child(1) {
    background: black;
}

I understand your thought, but the lis with the class "heading" isn't the second or last child.

:last-child of Elements with Class

Sadly there is no such selector that can select the last of a class, when there are other elements of the same type after it that have a different or no class. You can only get last of element type (:last-of-type) and last element (:last-child) and a specific element count (:nth-child()). However you are able to count backwards with :nth-last-of-type(2). This would select the second to last element.

.headerWithIcons div {

  width: 50px;

  height: 50px;

  background-color: red;

  display: inline-block;

}

.headerIcons:last-child {

  opacity: .5;

}

.headerIconsDIV:nth-last-of-type(2) {

  opacity: .5;

}

<div class="headerWithIcons">

  <div class="headerIconsDIV">Test</div>

  <div class="headerIconsDIV">Test</div>

  <div class="headerIconsDIV">Test</div>

  <div class="headerIconsDIV">Test</div>

  <!-- Only working when this div has the same class like the  elements above -->

  

  <div class="">Test</div>

</div>

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>

is it possible to chain :first-child and :last-child pseudo class selectors?

You can use comma to apply style to multiple selectors.

But you need to remove the whitespace between p and :first-child and use p:first-child, p:last-child

p:first-child, p:last-child {
  color: red;
}

<div>
  <p>
    List of Car Brands
  </p>
  <ul>
    <li>Honda</li>
    <li>Tesla</li>
    <li>Kia</li>

  </ul>
  <p>
    which one do you prefer?
  </p>
</div>

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>

Select :last-child, but with specific class

Use :last selector or .last() method on object of item elements:

$('.item:last');//will give third li

or

$('.item').last();//will give third li

How can select first child/last child of class in a mixed container?

Use nth-child or nth-of-type in combination with the class selector.

Live Example

.main .black:nth-child(2n) {
    color: yellow;
}

Or if you want them to be separate

This demo

.main .black:nth-child(5n - 6) {
    color: yellow;
}
.main .black:nth-child(5n - 4) {
    color:purple;
}

The function calculates using n = element of type, so :nth-child(n) would select every element, :nth-child(2n) selects all odd elements, :nth-child(2n-1) selects all even elements, and so on. You simply have to come up with a function that gets you the elements you want

Another option may be to add another class to the first and/or last element of class

You can select the first child with a dynamic number of elements with the class by combining two selectors like Jonathan said (I prefer div:not(.black) + div.black personally). However, the only way to select the last element with a class with a dynamic number of elements given there is no previous sibling selector is to use Javascript or a library like jQuery as follows:

Javascript

var blackElems = document.getElementsByClassName('black');
blackElems[blackElems.length - 1].style.color = 'purple';

jQuery

$('.main .black:last').css({ 'color' : 'purple' });

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>

Doesn't CSS first-child or last-child work with class wise?

As others have mentioned, :first-child is working as expected, as the first child of the parent.

The :first-child selector is used to select the specified selector, only if it is the first child of its parent.

Source: CSS :first-child Selector

You can reach the first .blue like this:

.red + .blue

or if you want to get all the .blue after .red

.red ~ .blue

You might want to use :first-of-type which selects the first of a type but then those .blue would have to be a different HTML element.

div.red:first-of-type {

    color:#F00;

}

div.red:last-of-type {

    color:#00F;

}

p.blue:first-of-type {

    color:#F00;

}

p.blue:last-of-type {

    color:#00F; 

}

<div>

    <div class="red">one</div>

    <div class="red">two</div>

    <div class="red">three</div>

    <p class="blue">one</p>

    <p class="blue">two</p>

    <p class="blue">three</p>

</div>

---

Related Topics