【初心者向け】htmlタグをcssセレクタで指定する10個の方法を解説

【初心者向け】htmlタグをcssセレクタで指定する10個の方法を解説

htmlやcssを学習していると、「セレクタ」という言葉をよく見かけますよね?

セレクタと言われても、なんのことかピンとこない方もいるでしょう。

そこで今回は、

「セレクタって何かよくわからない……」
「セレクタの色んな指定方法を知りたい」

といった方に向けて、

・セレクタとは
・セレクタの基本的な指定方法

この2点について解説します。

ぜひさいごまで読んでいただいて、セレクタの指定方法をマスターしましょう!

セレクタとは?

cssの記述は、「セレクタ」「プロパティ」「値」と、この3つで成り立っています。「htmlの要素を選択(セレクト)する」が由来です。

実際に、どこが何にあたるのか、以下のサンプルコードを例に見てみましょう。

こちらのサンプルコードの場合だと、つぎのようになります。

  • ・「h1」が「セレクタ」
  • ・「color」が「プロパティ」
  • ・「red」が「値」

このままだと、「html内にある全てのh1」に反映されてしまい、「思ったところ以外にも反映された!」なんてことが起きてしまいます。

自分の思い通りにcssを反映させるためにも、上手なセレクタの指定方法をマスターしましょう!

【初級編】セレクタの指定方法5選

まずは「初級編」として、必ず覚えておきたいセレクタの指定方法5つをサンプルコードを踏まえて詳しく解説します。
「これ知ってる!」といった方も、おさらいがてら見てみてくださいね。

「*」で全ての要素を指定する

html内の、全ての要素に反映させたい場合は「*」を使用します。

「*」の解説

MEMO
「*」でcssを指定しすぎてしまうと、コーディングの途中で混乱してしまう可能性があるので、使用する際は最低限のものだけにしましょう。

「#id名」でidを付けた要素を指定する

htmlで「id」を付けたものには「#id名」と、先頭に「#」を付けることで指定ができます。

「id」の解説

注意
ひとつのhtml内で、id名を重複させることはできないので注意しましょう。

「.class名」でclassを付けた要素を指定する

htmlで「class」を付けたものには「.class名」と、先頭に「.(ドット)」を付けることで指定ができます。

「class」の解説

MEMO
classは便利で使いやすい反面、class名が混在してコーディングしている本人もわからなくなる可能性があります。
それを回避するためにも、class名を付ける際には一定のルールを設けておくといいでしょう。

カンマで区切って複数の要素を指定する

id名やclass名、またはhtmlタグを「,(カンマ)」で区切ることで、複数の要素に同じcssの内容を反映させることができます
同じ内容のcssを記述する必要がなくなる場合があるので、率先して使っていきましょう。

「,」の解説

注意
「h1,h2,{〜}」のように、波カッコの前にカンマを付けてしまうと、cssが反映されなくなってしまうので注意しましょう。

半角スペースで区切って子孫要素を指定する

「A B{〜}」とAとBの間に「半角スペース」を入れることで、要素Aのなかにある要素Bを指定できます。

「半角スペース」の解説

注意
間違えて「全角スペース」を入れてしまうと、cssが反映されなくなってしまうので、必ず「半角スペース」であることを確認しましょう。

【中級編】セレクタの指定方法5選

ここからは「中級編」として、知っておくとさらに便利なセレクタの指定方法を解説します。
慣れるまでは少しだけ難しく感じるかもしれませんが、必ずコーディングの効率がよくなるため、ぜひマスターしましょう!

「>」を使用して直下の子要素を指定する

初級編で似たような指定方法の「半角スペースで子孫要素を指定する」だと、子要素だけではなく孫要素にまでcssが反映されてしまいます。
そこで、「>」を使うことで「直下の子要素」を指定できます。
それではサンプルコードを見てみましょう。

「>」で直下の子要素を指定する解説

半角スペースでの指定であれば、「孫要素であるh1」も赤色になってしまいますが、class名「sample」を付けた直下の子要素のみ赤色になっていますね。

「+」を使用して隣の要素を指定する

「A + B{〜}」とすると、「Aのすぐ隣のB」を指定できます。

「+」で、すぐ隣の要素を指定の解説

class名「sample」を付けた「1つめのリスト」のすぐ隣の要素である「2つめのリスト」にcssが反映されていますね。

「first-of-type」で最初の要素のみを指定する

「要素:first-of-type{〜}」とすると、「並列した要素の最初の要素のみ」を指定できます。

最初の要素のみを指定の解説

4つ並んだリストのうち、最初のリストのみにcssが反映されていますね。
また、「要素:first-child{〜}」という指定方法もあり、こちらも同じように「最初の要素のみ指定する」効果があります。

「last-of-type」で最後の要素のみを指定する

さきほどの指定方法が「最初の要素」に対して、「要素:last-of-type{〜}」とすると、「並列した要素の最後の要素のみ」を指定できます。

最後の要素のみ指定の解説

4つリストのうち、最後のリストのみが指定されていますね。さきほどと同様に、「要素:last-child{〜}」でも「最後の要素のみ」を指定できます。

MEMO
これまでの2つを使えば、「最初(最後)の要素のみmarginを0にする」なども可能なので、メニューリストなんかに使うと便利かもしれませんね。

「nth-of-type()」で○番目の要素のみを指定する

「要素:nth-of-type(){〜}」とすると、○番目の要素を指定できます。カッコのなかにはさまざまな値を入れることが可能です。
「odd」とすれば「奇数番目」、「even」とすれば「偶数番目」、ほかにも「3n」とすれば「3の倍数番目」を指定できる非常に便利なセレクタとなっています。

○番目の要素の指定の解説

サンプルコードでは「odd(奇数番目)」を入れてみましたが、しっかりと1・3・5番目のリストのみ反映されていますね。

まとめ

いかがでしたか?

今回は「htmlタグをcssセレクタで指定する10個の方法」の解説してきました。

セレクタってなんだろう?と疑問に思っていたことが解決できたのではないでしょうか。

さまざまな指定方法をマスターすると、装飾のバリエーションが増えるだけでなく、コーディングも楽しくなってきます。

ぜひセレクタの指定方法を参考にして、コーディングに生かしてみてくださいね。