CSS記号の意味一覧｜#・.・>・+・&を図解とコードで理解

CSSの記号の多くは、「どの要素に見た目を指定するか」を選ぶセレクタで使われます。たとえば「.」はクラス、「#」はID、「*」はすべての要素、「>」は直下の子要素、「+」「~」は後ろにある兄弟要素、「[]」は属性、「:」「::」は状態や要素の一部、「&」は入れ子（ネスト）の中の親を表します。まずは下の一覧表で意味を確認し、気になる記号はコード例で使い方を確かめてください。

この記事では、CSSで使う記号の意味を一覧表で整理したうえで、CSSの基本の書き方・読み込み方、記号ごとの使い方、つまずきやすいポイントを初心者向けに解説します。図で対象の要素を確認し、続くコード例で実際の動きを確かめましょう。

内容確認：2026年10月5日。主なセレクターの例はブラウザで表示・適用対象を検証しています。

CSSで使う記号の意味一覧表

CSSでよく使う記号を、セレクタで使うものとそれ以外に分けてまとめました。「例」の列はそのままCSSに書ける形です。

セレクタで使う記号

セレクタ以外で使う記号

同じ記号でも、書く場所によって意味が変わるものがあります。たとえば「#」はセレクタではIDですが、値の中ではカラーコードです。「*」も単独ならすべての要素、[href*="..."]の中なら部分一致を表します。

CSSとは？意味と基本の使い方

CSS（Cascading Style Sheets、カスケーディング・スタイル・シート）は、Webページの見た目を指定する言語です。HTMLで「見出し」「段落」などの中身と構造を作り、CSSで文字の色や大きさ、余白、レイアウトを指定します。

CSSの基本の書き方

CSSは「どの要素に（セレクタ）」「何を（プロパティ）」「どうする（値）」の組み合わせで書きます。

p {
  color: blue;
  font-size: 16px;
}

CSSをHTMLに読み込む3つの方法

CSSをHTMLに反映させる方法は3つあります。サイト全体で同じデザインを使い回せるため、基本は1つ目の外部ファイルを読み込む方法を使います。

<!-- 1. 外部CSSファイル（style.css）を読み込む -->
<head>
  <link rel="stylesheet" href="style.css">
</head>

<!-- 2. style要素に書く -->
<head>
  <style>
    p { color: blue; }
  </style>
</head>

<!-- 3. style属性に書く -->
<p style="color: blue;">青い文字</p>

HTMLとCSSの役割の違いをもう少し詳しく知りたい方は「HTMLとCSSの具体的な違いから学習方法・使い方まとめ」も参考にしてください。

セレクタで使う記号の意味と使い方（コード例つき）

ここからは記号ごとに、HTMLとCSSのコード例で使い方を説明します。コードはそのまま貼り付けて試せます。

「.」（ドット）：クラスセレクタ

「.」は、指定したclass名を持つ要素を選びます。classは同じページの中で何度でも使えるため、CSSで最もよく使うセレクタです。1つの要素に複数のclassを付けることもでき、.note.warningのように「.」を続けて書くと「両方のclassを持つ要素」になります。

<p class="note">クラスnoteの段落</p>
<p>classのない段落</p>
<p class="note warning">クラスを2つ持つ段落</p>

.note {
  color: green;
}
.note.warning {
  font-weight: bold;
}

1つ目と3つ目の段落が緑色になり、noteとwarningの両方を持つ3つ目だけが太字になります。2つ目の段落は変わりません。

「#」（シャープ）：IDセレクタ

「#」は、指定したid名を持つ要素を選びます。idは1つのページの中で同じ名前を1回しか使えません。ヘッダーやフッターなど、ページに1つしかない部分に使われます。

<header id="site-header">サイトのヘッダー</header>

#site-header {
  background-color: #333;
  color: #fff;
}

ヘッダーの背景が濃いグレー、文字が白になります。この例の#333や#fffはIDではなく、後で説明するカラーコードです。

なお、IDセレクタはクラスセレクタより優先順位（詳細度）が高いため、IDでスタイルを指定しすぎると後から上書きしにくくなります。見た目の指定は基本的にclassを使い、IDはページ内リンクやJavaScriptから要素を探すときに使う、と分けると管理しやすくなります。

HTMLの「#」（シャープ）はページ内リンクの意味

HTMLでは、<a href="#contact">のように「#」の後にid名を書くと、同じページ内のid="contact"の要素へ移動するリンクになります。href="#"だけの場合はページの先頭へ移動します。

<a href="#contact">お問い合わせへ移動</a>

<section id="contact">
  <h2>お問い合わせ</h2>
</section>

「*」（アスタリスク）：全称セレクタ

「*」は、すべての要素を選びます。ページ全体の設定をそろえる「リセット」によく使われます。次の例は、すべての要素と、その前後に追加される部分（::before、::after）で、幅（width）に内側の余白（padding）と枠線（border）を含めて計算するように指定しています。

*,
*::before,
*::after {
  box-sizing: border-box;
}

.card *のように書くと、「class=”card”の要素の中にあるすべての要素」になります。

「,」（カンマ）：複数のセレクタをまとめる

「,」で区切ると、複数のセレクタに同じスタイルをまとめて指定できます。

h1, h2, h3 {
  color: navy;
}

h1、h2、h3の見出しがすべて紺色になります。

半角スペースと「>」：子孫と子の違い

セレクタの間の半角スペースは「中にある要素すべて（子・孫・ひ孫…）」、「>」は「直下の子要素だけ」を表します。違いは次の例でわかります。

<div class="menu">
  <p>子要素のp</p>
  <section>
    <p>孫要素のp</p>
  </section>
</div>

/* 半角スペース：子も孫も対象 */
.menu p {
  color: red;
}
/* >：直下の子だけが対象 */
.menu > p {
  font-weight: bold;
}

2つの段落はどちらも赤くなりますが、太字になるのは.menuの直下にある「子要素のp」だけです。「孫要素のp」はsectionの中にあるため、.menu > pの対象になりません。

「+」と「~」：後ろにある兄弟要素

「+」はすぐ後ろにある兄弟要素1つだけ、「~」は後ろにある兄弟要素すべてを選びます。兄弟要素とは、同じ親要素の中に並んでいる要素のことです。

<h2>見出し</h2>
<p>1つ目の段落</p>
<p>2つ目の段落</p>
<div>区切りのdiv</div>
<p>3つ目の段落</p>

h2 + p {
  color: red;
}
h2 ~ p {
  text-decoration: underline;
}

赤くなるのはh2のすぐ後ろにある「1つ目の段落」だけです。下線は、h2より後ろにあるpすべて（1つ目・2つ目・3つ目）に付きます。「~」は間に別の要素（この例ではdiv）があっても対象になります。どちらも「前にある」要素は選べません。

「[ ]」：属性セレクタ（^=・$=・*=）

「[ ]」は、属性や属性の値で要素を選ぶセレクタです。「=」の前に記号を付けると、値の一部が一致する要素も選べます。

<a href="https://example.com/">外部リンク</a>
<a href="/media/">サイト内リンク</a>
<a href="/files/guide.pdf">PDFのリンク</a>
<a href="https://example.com/" target="_blank">新しいタブで開くリンク</a>

a[target] {
  font-weight: bold;
}
a[href^="https"] {
  color: green;
}
a[href$=".pdf"] {
  color: red;
}
a[href*="media"] {
  background-color: yellow;
}

httpsで始まる1つ目と4つ目のリンクが緑色、「media」を含む2つ目の背景が黄色、「.pdf」で終わる3つ目が赤になります。target属性を持つ4つ目は太字にもなります。

「:」：擬似クラス

「:」（コロン1つ）で始まるのは擬似クラスです。「マウスが乗っている」「最初の子要素である」など、要素の状態や位置で選びます。

<ul class="list">
  <li>1番目</li>
  <li>2番目</li>
  <li>3番目</li>
  <li>4番目</li>
</ul>
<a href="https://example.com/">リンク</a>

/* 最初のli */
.list li:first-child {
  font-weight: bold;
}
/* 偶数番目のli */
.list li:nth-child(2n) {
  background-color: #f0f0f0;
}
/* リンクの状態ごとの色 */
a:link {
  color: blue;
}
a:visited {
  color: purple;
}
a:hover {
  color: orange;
}
a:active {
  color: red;
}

1番目のliが太字、2番目と4番目の背景がグレーになります。リンクは未訪問が青、訪問済みが紫、マウスを乗せるとオレンジ、クリックしている間は赤です。リンクの4つは、後に書いたものが優先されるため、:link→:visited→:hover→:activeの順に書くのが基本です。

「::」：擬似要素

「::」（コロン2つ）で始まるのは擬似要素です。要素の最初の1文字や、要素の前後に追加する部分など、「要素の一部」を選びます。

<p class="point">ここが重要です。</p>
<p class="lead">最初の1文字だけ大きくなります。</p>

.point::before {
  content: "★ ";
  color: orange;
}
.lead::first-letter {
  font-size: 2em;
  font-weight: bold;
}

1つ目の段落の前にオレンジの「★」が付き、2つ目の段落は最初の1文字だけが大きな太字になります。::beforeと::afterは、contentプロパティを書かないと表示されません。

擬似クラス（:）と区別するため、今は擬似要素にコロンを2つ付けます。古いCSSとの互換性のため、:before、:after、:first-letter、:first-lineはコロン1つでも動きます。

「&」：ネスト（入れ子）で親セレクタを表す

「&」は、入れ子（ネスト）で書いたときの親のセレクタを表します。Sassだけでなく、現在は標準のCSSでも使えます。MDNでは2023年12月に主要ブラウザで利用可能になった機能として案内されています。古いブラウザを対象にする場合は、対応状況とネストの仕様を確認してください。

.card {
  padding: 16px;
  border: 1px solid #ccc;

  & h3 {
    color: navy;
  }

  &:hover {
    border-color: orange;
  }

  &.is-active {
    background-color: #fff8e1;
  }
}

上のCSSは、次のように1つずつ書いたのと同じ意味です。

.card {
  padding: 16px;
  border: 1px solid #ccc;
}
.card h3 {
  color: navy;
}
.card:hover {
  border-color: orange;
}
.card.is-active {
  background-color: #fff8e1;
}

& h3のように「&」の後にスペースがあると「中にある要素」、&:hoverや&.is-activeのようにスペースがないと「その要素自身の状態やclass」になります。スペースの有無で意味が変わる点に注意してください。

セレクタ以外で使う記号の意味と使い方

「$」：属性セレクタの後方一致とSassの変数

「$」には2つの意味があります。1つは、属性セレクタの中の$=で「値が〇〇で終わる」（後方一致）という意味です（上の「[ ]」の章を参照）。

もう1つは、CSSを効率よく書くためのツールSass（サス）の変数です。Sassでは「$名前: 値;」で色などを変数にしておき、何度も使い回せます。Sassで書いたコードは、変換（コンパイル）して普通のCSSにしてからブラウザで使います。

$main-color: #0066cc;

.button {
  background-color: $main-color;
  color: #fff;

  &:hover {
    opacity: 0.8;
  }
}

このSassを変換すると、次のCSSになります。

.button {
  background-color: #0066cc;
  color: #fff;
}
.button:hover {
  opacity: 0.8;
}

普通のCSSでは「$」は変数に使えません。CSSで変数のように値を使い回したいときは、次のカスタムプロパティを使います。

ハイフン2つ（--）：カスタムプロパティ（CSS変数）

名前の前にハイフンを2つ付けるとカスタムプロパティになり、var()で呼び出して使えます。:rootに書くとページ全体で使えます。

:root {
  --main-color: #0066cc;
}
.button {
  background-color: var(--main-color);
  color: #fff;
}

サイトのテーマカラーを変えたいときも、--main-colorの値を1か所書き換えるだけで済みます。

「#」：カラーコード

値の中の「#」は、色を16進数で表すカラーコードの始まりです。#RRGGBBの形で、赤・緑・青の強さを00〜ffで表します。

「@」：アットルール

「@」で始まるのはアットルールで、CSSに条件や特別な命令を与えます。よく使うのは、画面幅などの条件でスタイルを切り替える@mediaです。

/* 画面幅が600px以下のときだけ適用 */
@media (max-width: 600px) {
  .sidebar {
    display: none;
  }
}

このほか、別のCSSファイルを読み込む@import、Webフォントを指定する@font-faceなどがあります。

「!important」：指定を優先させる

値の後ろに!importantを付けると、その指定が通常の指定より優先されます。

<p class="note">この文字は赤になります</p>

p {
  color: red !important;
}
p.note {
  color: blue;
}

本来はp.noteの方が優先されますが、!importantを付けた赤が使われます。多用するとどの指定が効いているのかわかりにくくなるため、最後の手段と考えましょう。

「+」「-」「*」「/」：calc()で計算する

calc()の中では、記号で計算ができます。「+」と「-」の前後には半角スペースが必要です（calc(100%-40px)のようにスペースがないと、その指定は無効になります）。

.content {
  width: calc(100% - 40px);
}

親要素の幅から40pxを引いた幅になります。

「/* */」：コメント

/*と*/で囲んだ部分はコメントになり、表示には影響しません。CSSでは//はコメントになりません（Sassでは使えます）。

/* ヘッダーのスタイル */
.site-header {
  background-color: #333;
}

記号を組み合わせたセレクタの読み方

実際のCSSでは、記号を組み合わせたセレクタがよく出てきます。読むときは右端が「最終的にスタイルが当たる要素」で、左に向かって条件を足していくと理解しやすくなります。

.header nav > ul > li:first-child a[href^="https"] {
  color: green;
}

という条件をすべて満たすリンクだけが緑色になります。

どの指定が優先される？（詳細度）

同じ要素の同じプロパティに複数の指定が当たると、ブラウザはカスケードの規則で採用する指定を決めます。まず出所・重要度・レイヤーなどを比較し、その優先関係が同じときにセレクタの詳細度を比べます。一般的なレイヤーなしのCSSでは、詳細度が同じなら後に書いた指定が優先されます。@scopeを使う場合は、記述順の前にスコープの近さも関わります。

上の表は、同じ出所・レイヤー・重要度で比較する場合の目安です。詳細度の比較では、ID1つをクラスの個数だけで上回ることはできません。!importantは「詳細度の点数を増やす」記号ではなく、重要度の扱いを変えます。style属性も含めた詳細な規則は、MDNの詳細度の解説で確認できます。

!importantを足す前に、どの指定が採用されているかを確認すると原因を追いやすくなります。

CSSの記号でつまずきやすいポイント

レイアウトの組み方も一緒に学びたい方は「【初心者向け】CSSの2大レイアウトとは？」もあわせて読んでみてください。

英語の用語で調べながら、CSSの理解を深める

CSSを調べるときは、日本語だけでなく英語の用語も手がかりになります。たとえば「子孫」は descendant、「直下の子」は child、「擬似要素」は pseudo-elementです。MDNのセレクター一覧で、図とコードを照らし合わせてみてください。

留学を含めて学び方を比較したい方は「IT留学とは？費用・おすすめ国・選び方」も参考にしてください。

CSSの記号についてよくある質問

CSSの「#」と「.」の違いは？

「#」はid名、「.」はclass名で要素を選びます。idはページ内で1回しか使えず、classは何度でも使えます。また、「#」の方が優先順位（詳細度）が高くなります。見た目の指定には、基本的に「.」（クラス）を使います。

CSSの「*」（アスタリスク）はどういう意味？

単独の「*」は「すべての要素」を選ぶ全称セレクタです。[href*="media"]のように属性セレクタの中にあるときは「〜を含む」（部分一致）、calc()の中では掛け算の意味になります。

CSSの「>」と半角スペースの違いは？

「>」は直下の子要素だけ、半角スペースは子・孫・ひ孫など中にある要素すべてが対象です。

CSSの「&」はSassでしか使えない？

いいえ。CSSのネスト（入れ子）は2023年12月から主要なブラウザで使えるようになり、普通のCSSでも「&」を使えます。Sassでも同じように親セレクタを表す記号として使います。

CSSの「$」は何の記号？

普通のCSSでは、属性セレクタの$=（後方一致）で使います。Sassでは変数を表す記号です。CSSで変数を使いたいときは、--名前で書くカスタムプロパティを使います。

HTMLの「#」（シャープ）はどういう意味？

href="#contact"のようにリンク先に書くと、同じページ内のid="contact"の要素へ移動するページ内リンクになります。href="#"だけならページの先頭へ移動します。

まとめ：記号の意味がわかればCSSは読める

CSSの記号の多くは、スタイルを当てる要素を選ぶセレクタのためのものです。「.」はクラス、「#」はID、「*」はすべて、半角スペースと「>」は子孫と子、「+」「~」は後ろの兄弟、「[ ]」は属性、「:」「::」は状態と要素の一部、「&」はネストの親を表します。わからない記号が出てきたら一覧表に戻り、コード例を実際に動かして確かめてみてください。

HTMLの学習サイトを探している方は「HTML勉強サイトおすすめ」も参考にしてください。