1

How do I get the last-child CSS selector to work on an angular component selector? I want to add styles to the last component item with a particular class.

My HTML:

<component-name class="abc"></component-name>
<component-name class="abc"></component-name>
<component-name class="abc"></component-name>
<component-name class="efg"></component-name>
<component-name class="efg"></component-name>

In the case above, I would like to style the last .abc item. So my CSS:

component-name.abc:last-child {
 // some styles
}

This doesn't work. Neither does this:

component-name.abc:last-of-type {
    // some styles
}

How do I select the last-child in this case?

user3607282
  • 2,465
  • 5
  • 31
  • 61
  • This should work. But in the parent component, not the children components. Where did you try to select the last child ? –  Jan 17 '18 at 10:37
  • 2
    CSS doesn't have a 'last-of-class' selector.. – sol Jan 17 '18 at 10:38
  • @trichetriche when i do `component-name: last-of-type` it works on the last element (not what i want, just checking), but when I do `component-name.abc:last-child` or `component-name.abc:last-of-type` it doesn't work. – user3607282 Jan 17 '18 at 10:47
  • I agree with @sol, why don't u use the :nth-of-type selector? – Arne Banck Jan 17 '18 at 10:48
  • @sol do you mean, you can't select the last-child by class on css? – user3607282 Jan 17 '18 at 10:48
  • See this answer: https://stackoverflow.com/a/7298062/5561605 – sol Jan 17 '18 at 10:48
  • ..and this - https://stackoverflow.com/questions/5545649/can-i-combine-nth-child-or-nth-of-type-with-an-arbitrary-selector – Paulie_D Jan 17 '18 at 10:51
  • I don't think it's possible. People look how to achieve a `:nth-of-class` or `:last-of-class` selector, but it seems that it is just not possible. See this : https://stackoverflow.com/questions/5545649/can-i-combine-nth-child-or-nth-of-type-with-an-arbitrary-selector/5546296#5546296 – Jeremy Thille Jan 17 '18 at 10:52
  • Typical deficiency of the :last-child selector. – VXp Jan 17 '18 at 10:56

3 Answers3

0

Is the css code you posted within the component-name.css-file? If that's the case move it to the parent component style sheet or style.css.

Jonas Hohmann
  • 43
  • 5
-2

You can use jQuery last()

Stack Snippet

$('component-name.abc').last().css( "background-color", "red" )
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<component-name class="abc">abc</component-name>
<component-name class="abc">abc</component-name>
<component-name class="abc">abc</component-name>
<component-name class="efg">efg</component-name>
<component-name class="efg">efg</component-name>

Reference Link:

Bhuwan
  • 16,525
  • 5
  • 34
  • 57
-3

You could try the nth-of-type selector.

I made a fiddle: https://jsfiddle.net/34vwp9xd/

.abc:nth-of-type(3) {
  background:red;
}

But it's less than ideal because you have to know the index of the class you want to style, I think your going to need to use JS to solve this by adding a last class to the last element of class abc

Liam Kenneth
  • 982
  • 1
  • 11
  • 21
  • Why the downvote? :last-child wont work here, has to be :last-of-type – Liam Kenneth Jan 17 '18 at 10:40
  • `last-of-type` will select the last ``. Since it doesn't have the `.abc` class, it won't select anything. Try it in a Codepen or something (I did), it doesn't work. Sorry, downvoted as well :) – Jeremy Thille Jan 17 '18 at 10:42
  • I downvoted for same reason, sorry -- see this answer https://stackoverflow.com/a/7298062/5561605 – sol Jan 17 '18 at 10:42
  • My bad, I was sure i have done something like this in the past but that must of been on an actual element whoops – Liam Kenneth Jan 17 '18 at 10:46