在angular2中一起使用css选择器lastchild和：after

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

Answer 1

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 : '-';
           }
        }
    }
}

Answer 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 : '-';
        }
      }
    }
}