Using css selector lastchild and :after together in angular2

Question

HTML:

<h2 class="title-main">
     <span class="title-inside">A</span>
     <span class="title-inside">B</span>
     <span class="title-inside">C</span>
     <span class="title-inside">D</span>
     <span class="title-inside">E</span>
     <span class="title-outside">F</span>
     <span class="title-outside">G</span>
</h2>

CSS:

:host/deep/.title-main {
    display: flex;
    margin-bottom: 0;

    .title-inside {
        &:after {
            content : '-';
        }
    }
}

I am getting the output like this

A-B-C-D-E-F G

I don't want the - for the last child. I want the output like this

A-B-C-D-E F G

i tried many options. For eg. one of them which i tried

title-inside:last-child ::after {
           content: ''
    }

But this is not working. Could anyone please help me

I tried like this also. That is not working

Sunny
– Sunny

2017-04-24 10:58:56 +00:00
Commented Apr 24, 2017 at 10:58 — Sunny
– Sunny, Commented Apr 24, 2017 at 10:58

dippas · Accepted Answer · 2017-05-05 01:24:27Z

2

use :not with :nth-last-of-type()

.title-main {
  display: flex;
  margin-bottom: 0;
}

.title-inside:not(:nth-last-of-type(3))::after {
  content: '-';
}

<h2 class="title-main">
  <span class="title-inside">A</span>
  <span class="title-inside">B</span>
  <span class="title-inside">C</span>
  <span class="title-inside">D</span>
  <span class="title-inside">E</span>
  <span class="title-outside">F</span>
  <span class="title-outside">G</span>
</h2>

Here is the SASS version

:host/deep/.title-main {
    display: flex;
    margin-bottom: 0;

    .title-inside {
        &:not(:nth-last-of-type(3)){
           &::after{
            content : '-';
           }
        }
    }
}

edited May 5, 2017 at 1:24

answered Apr 24, 2017 at 10:59

dippas

60.8k15 gold badges125 silver badges134 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Sunny Over a year ago

I tried ur approach. But no hypen is coming for other child also

dippas Over a year ago

I've just updated the SASS version, I've forgot the &::after take a look again

Sunny Over a year ago

Thanks for your answer. But i dont know, in my case this is not working

Sunny Over a year ago

I have updated my html. Could you please see that. I want that style to be applied to the last child of title-inside. @dippas

Sunny Over a year ago

Ya it worked. I used :nth-child(5). I tried with urs also it is working fine. Thanks a lot

Asons · Accepted Answer · 2017-04-24 12:28:29Z

2

Since :nth-* and last-child selectors use the actual element type and not class name, I think it is better to use a class selector.

By using the ::before pseudo instead, combined with the sibling selector +, it does not matter how many items each class has, it will always count right.

.title-main {
  display: flex;
  margin-bottom: 0;
}

.title-main  .title-inside + .title-inside::before {
  content: '-';
}

<h2 class="title-main">
     <span class="title-inside">A</span>
     <span class="title-inside">B</span>
     <span class="title-inside">C</span>
     <span class="title-inside">D</span>
     <span class="title-inside">E</span>
     <span class="title-outside">F</span>
     <span class="title-outside">G</span>
</h2>


<h2 class="title-main">
     <span class="title-inside">A</span>
     <span class="title-inside">B</span>
     <span class="title-inside">C</span>
     <span class="title-outside">D</span>
     <span class="title-outside">E</span>
     <span class="title-outside">F</span>
     <span class="title-outside">G</span>
</h2>

SASS

:host/deep/.title-main {
    display: flex;
    margin-bottom: 0;

    .title-inside {
      &+.title-inside {
        &::before{
          content : '-';
        }
      }
    }
}

edited Apr 24, 2017 at 12:28

answered Apr 24, 2017 at 11:49

Asons

87.7k12 gold badges119 silver badges175 bronze badges

2 Comments

Sunny Over a year ago

I dont want the hypen after E

Asons Over a year ago

@Priya Updated my answer with an explanation that might help

Collectives™ on Stack Overflow

Using css selector lastchild and :after together in angular2

2 Answers 2

5 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related