CSS

CSSセレクターの書き方【3つの基本形の次に覚えたい4つの型】

どうも、つよぽんです!

今回の記事は次のような方に向けて書きました。

想定読者
  • CSSの3つの基本セレクター以外のセレクターの書き方を知りたい方
  • CSSのスタイル定義をもっと柔軟したい方

今回は前回話した「CSSセレクターの書き方【まずは覚えたい3つの基本形】」の続きの話になります。

前回記事と合わせて読むことでより深いCSSセレクターの知識を得ることが出来ます。

あわせて読みたい
CSSセレクターの書き方【まずは覚えたい3つの基本形】CSSでスタイルを定義するときに使うセレクターについて解説します。セレクターの書き方はたくさんあります。まずは基本となる「要素型セレクター」「クラスセレクター」「IDセレクター」の3つを覚えましょう。...

前回の記事では、「要素型セレクター」「クラスセレクター」「IDセレクター」という3つの基本形を解説しました。

今回は3つの基本形以外によく見かける4つのセレクターの書き方の説明をしていきます。

今回の記事は以下の学習コンテンツ記事内のスライドを詳しく解説した記事となります。以下の記事と合わせて読むことでより理解度を深めていただけるかと思います。

あわせて読みたい
CSSの3つの基本セレクター以外に見かける4つの書き方を覚える前回記事の学習コンテンツでCSSの3つの基本セレクターを学習しました。今回はその3つの基本セレクター以外でもよく見かける4つのセレクターについて解説します。難しそうな名前が出てきますが、名前を覚える必要はなく「こんな指定方法もあるんだ」と理解することが大切です。...

今回の内容は以下のとおりです。

今回の内容
  • 全称セレクター
  • 子孫結合子
  • 隣接兄弟結合子
  • 属性セレクター

また、上記4つの言葉を覚えることが重要なのではなく、「書き方を覚える」ことのほうが大切です。

「こういう書き方もできるんだなー」という気持ちで読んでいただけたらと思います。

 

全称セレクター

全称セレクターとは、全ての要素に対して一括でスタイルの定義を行うセレクターとなります。

全称セレクターを使うには「*(アスタリスク)」を使います。

以下の画像は全称セレクターの構文を表したものになります。

全称セレクターの書き方全称セレクターの書き方

実際に全称セレクターを使って動作を確認してみましょう。

下の画像は全称セレクターを使って全ての要素に赤いボーダーをセットしている画像になります。(画像右下にCSSの定義がある。)

全称セレクターを使ったサンプル全称セレクターを使ったサンプル

上の画像のコードが読みづらい場合は、以下のリンクに飛ぶことで直接コードを確認することが出来ます。

codepen: 全称セレクターのサンプル

このように全称セレクターを使うことで、個別に「h1」「p」「ul」など1つ1つの要素に同じスタイル定義をしないで済みます。

全称セレクターを使う場面は、「ブラウザによって異なるデフォルトのスタイル定義をリセットする」ときに使われます。(marginやpaddingを0にするなど。)

ブラウザごとのCSSのデフォルトのスタイル定義をリセットすることにより、微妙な差分をなくすことができます。

子孫結合子

子孫結合子とは、特定の要素(A要素)の中に含まれる別の要素(B要素)に対してのみスタイルを反映する書き方になります。

子孫結合子を使うには、「p span」といった感じで「A要素 B要素」のように要素と要素をスペース区切りで記述します。

以下の画像は子孫結合子の構文を表した画像です。

子孫結合子の書き方子孫結合子の書き方

それでは、次の画像で子孫結合子を使っているコードを確認してみましょう。

以下画像の右下赤枠内のCSS定義を見ると「p span」の子孫結合子を使っています。

これにより、p要素の中のspan要素の中の文字が赤色になります。(他のspan要素の文字はp要素に含まれていないため文字が赤くなっていない。)

子孫結合子を使ったサンプル子孫結合子を使ったサンプル

上の画像のコードが読みづらい場合は、以下のリンクに飛ぶことで直接コードを確認することが出来ます。

codepen: 子孫結合子のサンプル

このように、同じ要素でも、子孫結合子で「どのspan要素に対してなのか」を指定することによって、条件に合う要素のスタイルだけ変更することが可能となります。

隣接兄弟結合子

隣接兄弟結合子とは、同じ親要素を持ち、特定の要素(A要素)の次に来る別の要素(B要素)に対してのみスタイルを反映する書き方になります。

隣接兄弟結合子を使うには、「div + p」といった感じで「A要素 + B要素」のように要素と要素を「+」区切りで記述します。

以下の画像は隣接兄弟結合子の構文を表した画像です。

隣接兄弟結合子の書き方隣接兄弟結合子の書き方

それでは、次の画像で隣接兄弟結合子を使っているコードを確認してみましょう。

以下画像の右下赤枠内のCSS定義を見ると「div + p」の隣接兄弟結合子を使っています。

これにより、同じ親要素を持ち、div要素の次に来るp要素の中の文字が赤色になります。(1つ目の赤文字は共通の親要素「div」を持つ。2つ目の赤文字は共通の親要素「body」を持つ。)

隣接兄弟結合子を使ったサンプル隣接兄弟結合子を使ったサンプル

上の画像のコードが読みづらい場合は、以下のリンクに飛ぶことで直接コードを確認することが出来ます。

codepen: 隣接兄弟結合子のサンプル

ひとつ前の項目で紹介した「子孫結合子」と同じように、「隣接兄弟結合子」も複数の要素を組み合わせて、特定の要素にのみスタイルを反映させることが可能となります。

属性セレクター

属性セレクターとは、要素要素の属性」を使った書き方となり、要素名と属性の値が一致する要素にのみスタイルを反映させることができます。

属性セレクターを使うには、「a[title]」「a[href=”https://tsuyopon.xyz”]」といった感じで「要素[属性]」のように記述します。

以下の画像は属性セレクターの構文を表した画像です。

属性セレクターの書き方属性セレクターの書き方

それでは、次の画像で属性セレクターを使っているコードを確認してみましょう。

以下画像の右下のCSS定義を見ると次のように属性セレクターを定義しています。

  1. a[title]
  2. a[href=”https://example.org”]
  3. a[href*=”example”]
  4. a[href$=”.org”]

上記4つの属性セレクターの意味は上の画像の「属性セレクターの構文」の中で説明しているのでそちらを参照していただけたらと思います。

下の画像内のHTMLでは「p要素の中にa要素を記述」と言った感じで、全て同じ要素を使っていますが、属性値の条件に応じて異なるスタイルが反映されているのがわかります。

属性セレクターを使ったサンプル属性セレクターを使ったサンプル

上の画像のコードが読みづらい場合は、以下のリンクに飛ぶことで直接コードを確認することが出来ます。

codepen: 属性セレクターのサンプル

今回はa要素を例に使いましたが、input要素などのtype属性の値によって機能が変わったり見た目が変わるものに対して属性セレクターを使うと、特定の機能にだけ特定のスタイルを反映させることができるので便利です。

まとめ

今回の話をまとめると次のとおりです。

今回のまとめ
  • 全ての要素に共通のスタイルを一括で反映させたいときは「全称セレクター」を使う
  • 要素の組み合わせによって、特定の要素にのみスタイルを反映させたい場合は「子孫結合子」「隣接兄弟結合子」を使う
  • 1つの要素でも属性の値に応じて、特定の要素にのみスタイルを反映させたいときは「属性セレクター」を使う

今回の内容は以下の記事内のスライドの補足資料として作成しました。スライドの全部を確認したい方は以下の記事も参照して頂けたらと思います。

あわせて読みたい
CSSの3つの基本セレクター以外に見かける4つの書き方を覚える前回記事の学習コンテンツでCSSの3つの基本セレクターを学習しました。今回はその3つの基本セレクター以外でもよく見かける4つのセレクターについて解説します。難しそうな名前が出てきますが、名前を覚える必要はなく「こんな指定方法もあるんだ」と理解することが大切です。...
【3つの特典付き】Webエンジニアに必要な基礎スキルを体系的に効率良く身につけたいですか?

LINE登録で無料特典を受け取る

次のような方向けに、学習をサポートするコンテンツを無料プレゼントしています。

  • Webエンジニアになりたいけど何から学習を始めれば良いかわからない
  • 今まで独学で頑張ってきたけど、独学に限界を感じてきた
  • プログラミングは出来るけど、大きめのコードが書けない

「プレゼント詳細が知りたい」「プレゼントを受け取りたい」といった方は、以下のボタンをクリックして詳細ページをご確認ください。

無料特典を受け取る

 

COMMENT

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です