Использование css selector lastchild и: after вместе в 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 : '-';
        }
    }
}

Я получаю вывод, как это

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

Я не хочу - для последнего ребенка. Я хочу вывод, как это

A-B-C-D-E F G

Я перепробовал много вариантов. Например, один из них, который я попробовал

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

Но это не работает. Может ли кто-нибудь, пожалуйста, помогите мне

html css sass css-selectors

0

Priya 24 Апр 2017 в 13:54

Answer 1

Использовать :not с :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>

Вот версия SASS

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

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

2

dippas 5 Май 2017 в 01:24

Answer 2

Поскольку селекторы :nth-* и last-child используют фактический тип элемента, а не имя класса, я думаю, что лучше использовать селектор класса.

Вместо этого, используя псевдо ::before в сочетании с селектором родного брата +, не имеет значения, сколько предметов имеет каждый класс, он всегда будет считаться правильным.

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

2

Ason 24 Апр 2017 в 12:28

Использование css selector lastchild и: after вместе в angular2

2 ответа

Похожие вопросы

Новые вопросы

html