Use last-child on angular selector

Question

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?

Answer 1

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 .

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

• last()

Answer 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