web-dev-qa-db-ja.com

メニューでSassの最後の子セレクターを適用する

Sassを使用してナビゲーションに取り組んでいます。 ：last-childセレクターを使用して、最後のメニューリンクに異なるリンクの色（赤）を適用しようとしていますが、成功しません。次のSassコードから達成する方法を誰かに教えてもらえますか？以下は私がこれまでに持っているコードです。アドバイスをいただければ幸いです。

HTML

<ul class="menu">
   <li>
       My Navigation
   </li>
   <li>
       <a href="#">First Link</a>
   </li>
   <li>
       <a href="#">Second Link</a>
   </li>
   <li>
       <a href="#">Third Link</a>
  </li>
</ul>

サス

.menu {
    @include inline-list;
    font-size: 13px;


    &, a {
        color: black;
        text-decoration: none;

    }
    > * + * {
        margin-left: .5em;

        + *:before {
            content: ">";
            margin-right: .5em;
        }
    }

    & a ul li:last-child {
        color: red;
        font-weight: bold;
    }
}
csshtml5css3sasscompass-sass
7
user1781367

CSSがオフになっています。最後の行は、アンカータグの子であるliの最後の子をターゲットにしています。また、ネストしているセレクターの子をターゲットにする場合は、&を使用する必要はありません。

したがって、最後の子の選択を次のように変更します。

li:last-child a

そしてそれはうまくいくはずです。元のリンク宣言を上書きするには、リンクをターゲットにする必要があります。

22
Shauna

次のセレクターが機能します。

& li:last-child a

それをチェックしてください このデモフィドルで

＆は自動的に追加されるため、＆は必要ありません。

li:last-child a

いずれの場合も、*セレクターは避ける必要がありますが、パフォーマンスはひどいものです。ほとんどすべての場合、これを置き換えることができるより良いセレクターがあります。あなたの場合、

> li + li {
/*and*/
    &:before {
    }

仕事も。

&, a

また、&は単に親セレクターに解決されるため、あまり意味がありません。これを意図していない限り、DRYコードを記述し、これら2つの宣言を親ブロックに配置し、&を省略することをお勧めします。

6
Christoph