-1

In the following example the first-child selector works, the last-child doesn't. Please see attached screenshots.

The Problem: My class "gotit" colors the bar green, the class "go4" colors it grey. The last gotit should be red. Sounds simple, huh?

So now dig in: If I try to select the first-child, it works like a charm: enter image description here

If I try to select the last-child, it just does nothing. enter image description here

Anyone here with a hint whats wrong? Thank you in advance!

Community
  • 1
  • 1
ThomasB
  • 402
  • 3
  • 14
  • 2
    Can you give us some code to work with, and a demo on https://jsfiddle.net :-) – Andrew Bone Jun 22 '16 at 14:53
  • 2
    Your HTML is invalid. You cannot have a paragraph inside a span. – Quentin Jun 22 '16 at 14:55
  • 3
    you want the last element with class `.gotit` not the last-child – DaniP Jun 22 '16 at 14:56
  • thanks @Quentin - its just prototyping, but you're wright and I am thankful for your hint! I will correct it right now. – ThomasB Jun 22 '16 at 14:58
  • 1
    Please proved all your relevant markup in the post, not just a screenshot. Currently we cannot be sure of what the last child of `.progress` is. I'm guessing there is something else going on that hasn't been shared yet (extra markup, extra CSS). A very basic working example of what you have is [here](https://jsfiddle.net/rq0gwno5/), `.gotit` has to be the last child of `.parent` to work. If it isn't, [this will happen](https://jsfiddle.net/rq0gwno5/1/). – hungerstar Jun 22 '16 at 14:59
  • 1
    Almost certain duplicate - http://stackoverflow.com/questions/5545649/can-i-combine-nth-child-or-nth-of-type-with-an-arbitrary-selector – Paulie_D Jun 22 '16 at 14:59
  • @DaniP sounds like its an understanding. Could you provide me some example code or link to get further information? Right now i cant move on with this snippet. – ThomasB Jun 22 '16 at 15:00
  • http://stackoverflow.com/questions/13211453/css-how-to-say-classlast-of-type-classes-not-elements here you can begin or the duplicate – DaniP Jun 22 '16 at 15:04

1 Answers1

4

Make sure .gotit is actually the last child of .parent. Like below.

.inner {
  min-width: 50px;
  min-height: 20px;
  background-color: gray;
  float: left;
  margin: 2px;
}
.inner:last-child {
  background-color: red;
}
<div class="outer">
  <div class="inner"></div>
  <div class="inner"></div>
  <div class="inner"></div>
</div>

If it isn't, using :last-child with .gotit won't work. See below.

.inner,
.inner-other {
  min-width: 50px;
  min-height: 20px;
  background-color: gray;
  float: left;
  margin: 2px;
}
.inner:last-child {
  background-color: red;
}
<div class="outer">
  <div class="inner"></div>
  <div class="inner"></div>
  <div class="inner"></div>
  <div class="inner-other"></div>
  <div class="inner-other"></div>
  <div class="inner-other"></div>
</div>

I'm guessing your markup looks like the above markup. Try regrouping your elements to help ensure that :last-child or :last-of-type will work. Something like below.

.inner div,
.inner-other div {
  min-width: 50px;
  min-height: 20px;
  background-color: gray;
  float: left;
  margin: 2px;
}
.inner div:last-child {
  background-color: red;
}
<div class="outer">
  <div class="inner">
    <div></div>
    <div></div>
    <div></div>
  </div>
  <div class="inner-other">
    <div></div>
    <div></div>
    <div></div>
  </div>
</div>
hungerstar
  • 21,206
  • 6
  • 50
  • 59