CSSのビギナーが最初の頃に迷いがちなセレクターの記載方法を一覧にしてまとめてみました。
学び始めには他の色んな情報もたくさん入り乱れるために、単純なセレクター記載方法でさえも頭がごちゃごちゃになっていちいち振り返って調べ直すのも面倒ですよね。
このサイトでは、セレクターの基本的な使い方をまとめていますので、困ったときに振り返ってもらえればと思います。
順不同で見れるようにしてありますので、ぜひ参考にしてください。
[rtoc_mokuji title=”Contents” title_display=”left” heading=”h4″ list_h2_type=”round” list_h3_type=”round” display=”close” frame_design=”frame4″ animation=”slide”]
CSS セレクターの基本的なことを一覧にしてみた #5
要素型セレクター/タイプセレクター
h1やdiv、p、headerなどの要素を指定してスタイルを当てていくパターンで、最も基本的なパターンですね。
h1に対して文字色を変えたい場合の例は以下のように記述します。
HTMLは特に何もいじらずに、CSSの中だけで、h1に対して文字色を変えるプロパティ「color: red;」を指定するだけでOKです。
クラスセレクター
クラスセレクターはHTMLの要素に、識別子としてclass属性をつけておくパターンです。
同じく、h1にskyblueの文字色を当てるパターンを見てみましょう。
この場合、HTMLのh1に以下の要領でclass属性を入れます。
- <h1 class=“title”>クラスセレクター</h1>
<h1>の開始タグの中を、
「h1」 + 「半角スペース」 + 「class=”任意のキーワード”」
とするだけですね。
任意のキーワードは自分で指定します。この例の場合は「title」としました。
これを前提に、次はCSSに以下のように記述します。
- .title {
- color: skyblue;
- }
自分でつけた「title」というクラス属性の前に「.」（ピリオド）を加えて指定すればOKです。
全体としては以下のようになります。
クラスセレクターは複数設定可能
classは複数設定することが可能です。
その場合、HTMLのh1に以下の要領でclass属性を入れます。
- <h1 class=“title info”>クラスセレクター</h1>
上記の例は、h1に対して「title」と「info」という2つのclassをつけました。
両者の間を半角スペースで区切って入力します。
この場合、CSSで「.title」としても「.info」としても、どちらで指定してもh1にスタイルを当てることができます。
idセレクター
idセレクターは、クラスセレクターと同じように、HTMLの要素に識別子として「#」をつけるパターンです。
同じく、h1にgreenの文字色を当てるパターンを見てみましょう。
HTMLのh1に以下の要領でid属性を入れます。
- <h1 id=“title”>idセレクター</h1>
これを前提に、CSSに以下のように記述します。
- #title {
- color: green;
- }
自分でつけた「title」というクラス属性の前に「#」（シャープ）を加えて指定します。
全体としては以下のようになります。
class属性とid属性の違い
id属性は一つのページ（document）内で、同じ名前の値を複数使うことができません。
例えば、上記の例でいくと、<h1>に「id=”title”」を付けて、さらに<p>にも同じ「id=”title”」を付けることはできません。
また、id属性には半角スペースを含められません。
そのため、class属性のように複数の値を指定することができません。
例えば、「id=”title info”」 のように指定することができないということですね。
慣れてくると、このような両者の性質の違いを上手く使って、class属性の場合は柔軟に、id属性の場合は厳密に全体のスタイル調整を進めていくことが可能になります。
また、idは詳細度が上位に位置することも抑えながら、その性質をうまく利用して使っていくことになります。
Point
id属性は一つのdocument内で同じ名前を複数使うことができない。
id属性には半角スペースを含められない。
全称セレクター
全称セレクターは、全ての要素にスタイルを当てることができるセレクターです。
ユニバーサルセレクターとも呼ばれます。
使い方は「*」（アスタリスク）を使えばOKです。
具体例として、全てのフォントサイズを10pxにするパターンを、以下のとおり見てみましょう。
ユニバーサルセレクターを使うケースはあまりありませんが、特定のsection内だけに同じスタイルを当てたい場合などに使うといったケースが想定されます。
例えば、特定の<article>に過去の記事を引用して載せる場合などに、「article * {color: gray;}」といった使い方をすれば便利ですね。
属性セレクター
属性セレクターは、要素に当てた属性から文字列を引っ張り出してスタイルを当てる方法です。
例えば、以下のような<a>タグの中にあるhref属性などが複数あるケースを想定したとします。
- <ul>
- <li><a href=“https://www.fuwafuwa-af.com” target=“_blank”>AI Blog</a></li>
- <li><a href=“https://www.instagram.com/laurin.f.hills/?hl=ja” target=“_blank”>instagram</a></li>
- <li><a href=“https://www.google.co.jp”>Google</a></li>
- <li><a href=“https://www.yahoo.co.jp”>Yahoo!</a></li>
- </ul>
この場合に、
- [target] {
font-weight: bold;
}
とすると、属性が「target」の要素に対して、太字の文字スタイルを当てることができます。
上の例でいくと、2行目と3行目がそれに該当しますね。
具体的には以下のとおりです。
もしくは、属性と値の両方を指定して、該当する要素にスタイルを 当てることもできます。
その場合は、
- [href = “https://www.google.co.jp”] {
font-weight: bold;
}
といったように指定すれば、Googleだけが太字に変わります。
その他、以下のように記号を使い分けて値に応じた要素にスタイルを当てていくことが可能です。
- [属性^= “値“] →前方一致
- [属性$= “値“] →後方一致
- [属性*= “値“] →部分一致
「$」マークを使った後方一致の場合のパターンの具体例を上げておきます。
- [href $= “co.jp”] {
font-weight: bold;
}
と記述すると、href属性の中が「co.jp」で後方一致する要素、上の例に当てはめると「Google」と「Yahoo!」だけに太字を当てられることになりますね。
属性セレクター一覧
属性セレクターの使い方を一覧にすると以下のとおりです。
主な属性セレクター一覧
- [属性] → 存在の有無
- [属性= “値“] → 完全一致
- [属性^= “値“] → 前方一致
- [属性$= “値“] → 後方一致
- [属性*= “値“] → 部分一致
セレクターの組み合わせ
セレクターは、複数を組み合わせて使用することができます。
セレクターを組み合わせた場合、それらは「セレクターリスト」と呼ばれます。
組み合わせ方は色々あり、よく使うのでそれぞれの意味を正確に理解できるようにしておきましょう。
具体的には以下のとおりです。
- .info, h1
- /* ↑「,」（カンマ）で区切った場合 */
- /* 「.info」または「h1」 */
- /* 2つ以上指定可能 */
- h1.info
- /* ↑2つのセレクターを並べた場合 */
- /* 「h1」かつ「.info」 */
- /* 要素型セレクター同志では使えない */
- main > h1
- /* ↑「>」を使った場合 */
- /* 「main」の直下にある「h1」 */
- main h1
- /* ↑半角スペースで区切った場合 */
- /* 「main」の中にある「h1」全て */
- p + p
- /* ↑「+」で区切った場合 */
- /* 「p」の直後にある「p」 */
紛らわしいですが、いずれも使用頻度が高いため、徐々に正確に使いこなせるように意識しておくと良いです。
まとめ
以上、セレクターに特化した形でまとめてみましたが、その他にも、CSSの基本事項を項目ごとにまとめた記事がありますので、そちらも是非参考にしてみて下さい。
皆さんのお役に立てれば幸いです。
自宅で学べるオンラインスタイルの「TECH CAMP」で無料カウンセリングやってます！
併せて読みたい