Использование селектора первого ребенка с навигацией Susy

Question

Я пытаюсь добавить немного стиля (|) для моей навигации.

Мой код susy: @include with-layout(6 внутри, true){ @include span(1);

Я добавил &::before { content: " | "; }

но когда я добавляю &:first-child { &::before { content: " "; } }

он не распознает, что каждый экземпляр навигации не первый дочерний элемент - он видит все элементы в моем html как первый дочерний элемент. Как это исправить?

Также - любые предложения о том, как сделать так, чтобы труба отображалась как разделитель (то есть между элементами навигации susy) - я не хочу использовать рамку слева, потому что я хочу тонкий эффект.

Спасибо,

Виктория

Answer 1

Хорошо - я обошел проблему, используя для параметра border-right значение 50% (которое выглядит так же, как конвейер и естественно расположен между кнопками) - но мне все равно было бы интересно узнать, почему первый ребенок селектор не работает в приведенном выше коде.

Теперь я хотел бы удалить последнюю границу справа, используя last child!!! Принцип такой же, как в приведенном выше примере, но я могу выложить больше кода, если вам это нужно.

Спасибо

Answer 2

Спасибо за ответ... Я постараюсь выложить код лучше для вас сейчас. Как жаль, что я не могу использовать jsfiddle или code pen в качестве примера - так жаль, что эти сайты с фрагментами кода принимают только css, а не scss и susy!!!

Хорошо...

HTML это -

<div class="nav">
    <ul>
        <li><a class="button active" href="#home">Home</a></li>
        <li><a class="button" href="palms-for-sale.html">Shop</a></li> 
        <li><a class="button" href="ordering.html">Ordering</a></li>
        <li><a class="button" href="delivery.html">Delivery</a></li>
        <li><a class="button" href="plant-care.html">Care</a></li>
        <li><a class="button" href="about.html">About</a></li>
    </ul>
</div>

Scss - это

        .nav {

         @include susy-breakpoint($xmedium-bp, $medium) {
            @include span(8 of 8 at 0);
            @include margin-leader(1);
            height: 30px;
            line-height: 30px;
            vertical-align: middle;

            ul {
                li {
                    display: inline;
                }
            }
        }

        @include susy-breakpoint($large-bp, $large) {
                @include span(8 of 8 at 0);
            }

        ul {
            li {
                a {

                    &.button {

                        @include susy-breakpoint($xmedium-bp, $medium) {
                            @include with-layout(6 inside, true){
                                @include span(1);

                                &::before {
                                    content: " | ";
                                }

                                &:first-child {
                                    &::before {
                                        content: "";
                                    }
                                }
                            }
                        }

                        @include susy-breakpoint($large-bp, $large) {
                            @include with-layout(6 inside, true){
                                @include span(1);
                            }
                         }
                    }
                }
            }
        }
    }

Я надеюсь, что я отбросил пример достаточно для вас.

Большое спасибо за поиск.

Vx