Scss　CSSセレクターの使い方完全ガイド：入れ子から継承・置換まで解説

　Scss（Sass）の「セレクターの使い方」について、初心者でもわかりやすく解説します。

　セレクターは、CSSで要素を選択するためのキーとなる部分であり、Scssでは、CSSのセレクターに加えて、いくつかの新しいセレクターを使うことができます。

受講者数No.1！初心者からプロへ導く信頼のスクール

短期間で習得可能！未経験から実践力を磨く充実のプログラム

テックアカデミー 公式ページへ ≫

今なら無料相談でAmazonギフトカードがもらえる！

セレクターの入れ子（ネスト）

Scssでは、セレクターを入れ子にすることができます。これは、HTMLの要素の入れ子構造と合わせて使うと、スタイルの記述が非常に簡潔になります。例えば、以下のようなHTMLがあったとします。

<div class="parent">
  <div class="child"></div>
</div>

この場合、親要素のスタイルを指定するには、次のように記述します。

.parent {
  background-color: #f00;
}

子要素のスタイルを指定するには、次のように記述します。

.parent .child {
  color: #fff;
}

このように、親要素と子要素をドット（.）でつなげることで、セレクターを入れ子にすることができます。

親セレクターの参照

　Scssでは、セレクターの入れ子を使うと、親セレクターを参照することができます。これにより、スタイルの記述がより簡潔になり、再利用性が高くなります。親セレクターを参照するには、アンパサンド（&）を使います。例えば、以下のようなHTMLがあったとします。

<div class="button">
  <span class="text">Click me!</span>
</div>

この場合、ボタンとテキストのスタイルを指定するには、次のように記述します。

.button {
  background-color: #f00;

  .text {
    color: #fff;
    font-size: 1.2rem;
    &:hover {
      text-decoration: underline;
    }
  }
}

このように、子要素のスタイルを親要素のスタイルに依存するように記述することで、スタイルの再利用性を高めることができます。

入れ子のセレクターを作成

入れ子のセレクターを作成する方法は、親要素と子要素のセレクターを単純にドット（.）でつなげるだけです。例えば、以下のようなHTMLがあったとします。

<div class="card">
  <div class="header">
    <h1 class="title">Title</h1>
  </div>
  <div class="content">
    <p class="text">Content</p>
  </div>
</div>

この場合、ヘッダーとタイトル、コンテンツとテキストのスタイルを指定するには、次のように記述します。

.card {
  background-color: #f00;

  .header {
    color: #fff;

    .title {
      font-size: 1.5rem;
    }
  }

  .content {
    color: #000;

    .text {
      font-size: 1rem;
    }
  }
}

このように、入れ子のセレクターを使うと、親要素と子要素の関係をわかりやすく表現できます。

連結したセレクターを作成

Scssでは、複数のセレクターを連結することができます。これにより、より具体的なセレクターを作成し、スタイルの適用範囲を限定することができます。セレクターを連結するには、セレクターをスペースで区切ります。

例えば、以下のようなHTMLがあったとします。

<div class="button primary">Click me!</div>

この場合、プライマリボタンのスタイルを指定するには、次のように記述します。

.button {
  padding: 10px;
  border: 1px solid #000;

  &.primary {
    background-color: #f00;
    color: #fff;
  }
}

このように、セレクターを連結することで、より具体的なセレクターを作成し、スタイルの適用範囲を限定することができます。

セレクターから特定のセレクターを別のセレクターに継承

Scssでは、@extendディレクティブを使って、既存のセレクターからスタイルを継承することができます。これにより、重複したスタイルの記述を減らし、スタイルの再利用性を高めることができます。

.error {
  border: 1px solid #f00;
  color: #f00;
}

.input-error {
  @extend .error;
  background-color: #fee;
}

この場合、.input-errorは、.errorのスタイルをすべて継承し、その上で背景色を指定します。

セレクターから特定のセレクターを別のセレクターに置換

Scssでは、@extendディレクティブを使って、既存のセレクターからスタイルを継承するだけでなく、既存のセレクターを別のセレクターに置換することもできます。これにより、スタイルの再利用性を高めながら、スタイルの微調整を容易にすることができます。

.error {
  border: 1px solid #f00;
  color: #f00;
}

.warning {
  @extend .error;
  border-color: #ff0;
}

2つのセレクターに一致するセレクターに継承

Scssでは、@extendディレクティブを使って、2つのセレクターに一致するセレクターに対して、スタイルを継承することができます。例えば、以下のようなCSSがあったとします。

.error {
  border: 1px solid #f00;
  color: #f00;
}

.card.error {
  background-color: #fee;
}

連結されたセレクターを分割

Scssでは、セレクターを連結した場合、それを分割することもできます。これにより、より簡潔なセレクターを作成することができます。例えば、以下のようなCSSがあったとします。

.card .header h1 {
  font-size: 1.5rem;
}

この場合、次のように記述することで、同じセレクターをより簡潔に記述することができます。

.card {
  .header {
    h1 {
      font-size: 1.5rem;
    }
  }
}

複数のセレクターを分割

複数のセレクターを分割することで、同じスタイルを適用することができます。例えば、以下のように、複数のセレクターが同じスタイルを持つ場合、これらをカンマで区切って一つのセレクターにまとめることができます。

h1, h2, h3 {
  color: blue;
  font-weight: bold;
}

このようにすることで、h1、h2、h3の全てに同じスタイルが適用されます。

また、セレクターを分割して記述することで、コードの可読性も高まります。複数のセレクターが同じスタイルを持つ場合には、必ずしもカンマで区切ってまとめる必要はありません。複数の行に分けて記述することもできます。

h1,
h2,
h3 {
  color: blue;
  font-weight: bold;
}

このようにすることで、複数のセレクターが同じスタイルを持つことが一目でわかります。

リスキリングでキャリアアップしてみませんか？

リスキリング(学び直し)は、経済産業省が推奨しており、

今だけ、最大７０％のキャッシュバックを受けることができます。

最大70％の給付金が出るおすすめのプログラミングスクール！

リスキリングで給付金が出るスクールを７つ紹介 ≫

国策で予算が決められているため申し込みが多い場合は早期に終了する可能性があります！

興味のある方はすぐに確認しましょう。

まとめ

　以上が、Scssでのセレクターの使い方の解説です。Scssのセレクターをうまく使うことで、より簡潔で読みやすいスタイルシートを作成することができます。初めは使い方が難しく感じるかもしれませんが、慣れてくると便利な機能ですので、ぜひ使ってみてください。