1

I have the style border-bottom: 1px solid pink set on the outer-most div in HTML for a component. The component is used like rows creating the illusion of a table. I'd like the last one in a series of them to have a different style (i.e. make the border invisible).

I was hoping to use :last-child but noticed that every element got the style because within the scope of a component, there's only one outer-most div. I found this solution based on last value in ngFor but that's no good in my case because the rows may be a part of an array but also added one-by-one after an array that's ngfor'ed.

What I need is a facility to mark the last occurrence of a component on the page and set a style accordingly but do it from within the component itself. Is it possible at all?

Below is a snippet based on the answer below. The second object doesn't get the extra style on the last element while the first one does (by being assigned class last).

div.last {
  background-color: yellow;
}

div:host(:last-child) {
  background-color: yellow;
}


div {
  padding: 5px;
  margin: 5px;
  border: 2px solid black;
  max-width: 300px;
  display: flex;
  flex: 1;
  justify-content: center;
}

div.outer {
  border-color: purple;
}

div.middle {
  border-color: olive;
}

div.inner {
  border-color: orange;
}

div.multi {
  border-color: pink
}

div.last {
  background-color: yellow;
}

div:host(:last-child) {
  background-color: yellow;
}
<div class="outer">
  <div class="middle">
    <div class="inner">
      <div class="multi">A</div>
      <div class="multi">B</div>
      <div class="multi last">C</div>
    </div>
  </div>
</div>

<div class="outer">
  <div class="middle">
    <div class="inner">
      <div class="multi">A</div>
      <div class="multi">B</div>
      <div class="multi">C</div>
    </div>
  </div>
</div>
YakovL
  • 7,557
  • 12
  • 62
  • 102
Konrad Viltersten
  • 36,151
  • 76
  • 250
  • 438
  • please share code what you have tried so far , to debug and fixing it – Naga Sai A May 10 '19 at 21:07
  • @NagaSaiA I created a fiddle to reflect the issue. I need the effect to be done without setting a different class on the last element. – Konrad Viltersten May 12 '19 at 20:19
  • Could you please share componenet.html, as from above code snippet.multi:last-child would work , https://codepen.io/nagasai/pen/WBGMYx , I think which is not you are looking for – Naga Sai A May 13 '19 at 13:43
  • @NagaSaiA Precisely what I'm looking for as an effect **but** not quite the tech I'm dealing with. I'd like that to be encapsulated in an Angular component. I've prepared a demo and asked a separate question [here](https://stackoverflow.com/questions/56119045/is-it-possible-for-a-component-to-know-its-placement-in-the-ngforing-component). Feel free to take a peek. – Konrad Viltersten May 13 '19 at 19:54

1 Answers1

3

The following css rule should work. You are targeting a shadow element whose container is the last child

:host(:last-child) {
    border-bottom: solid 1px pink;
}

or

:host(:last-child) > div {
    border-bottom: solid 1px pink;
}
vals
  • 61,425
  • 11
  • 89
  • 138
  • 1
    Interesting choice of color. There are so many to pick from and *pink* isn't alphabetically nor semantically significant. Yet, for some reason, I use to pick it too. It comes so naturally - much more than the others. Nice to see I'm not alone. :) – Konrad Viltersten May 12 '19 at 20:02
  • Not sure if I understood your suggestion correctly, so I made a fiddle. Please see the edit in the OP. – Konrad Viltersten May 12 '19 at 20:16
  • [Here](https://stackblitz.com/edit/angular-t1jsau)'s a Blitzy to show what I mean. – Konrad Viltersten May 13 '19 at 19:55