プロのカウンセラーがキャリアの悩みを解決!

【CSS】超入門!超分かるCSSセレクタ!

作成: 2017.02.27 更新: 2018.03.09

>>副業・フリーランスという働き方
個人で稼げるスキルを!独立まで完全サポート

もっとHTMLとCSSを上手く使いこなして色々な機能をつけたいという方は多くいると思います。
CSSセレクタについて、画像を多く用いて分かりやすく解説致します。この記事を読むことによって、いろいろな機能を使うことができ、あなたのやりたいことが実現できます。

セレクタとは

セレクタとは、CSSを適用させたいHTML要素を指定するためのものです。

そう言われてもいまいちピンと来ないと思います。

具体的に見てみましょう。

セレクタの構造

セレクタとは以下の図のようなものです。

セレクタの構造

p{color:red;}

セレクタ:なにを適用するか(p要素を適用する)

プロパティ:どう適用するか(色を変える)

値:具体的なもの(赤にする

セレクタを使いこなそう!

要素セレクタ

HTMLのページで使われている指定した要素全てに適用します。

p{color:red;}

HTMLのページにある全てのp要素が赤くなります。

全称セレクタ

HTMLのページの全ての要素に適用します。

全称セレクタ

全ての要素が赤くなります。

idセレクタ

idで指定した要素に適用します。

CSSでの書き方は、id名の前に#をつけ、#id名という形で書きます。

idセレクタ

idで指定した要素が赤くなります。

idはそのページで1度しか使えません。

idというセレクタ自体がそのページで一度しか使えない訳ではなく同じid名を2回使えないということです。

id再

上記を見ると、1と2は同じid=”test”を使っているのでNGです。

1(id=”test”)と3(id=”css”)は、id名が異なっているので使用することが可能です。

idを使うメリットとして、classやidがたくさんあって複雑になってくる場合、idを指定することにより、要素を特定しやすくなります。また、idはclassよりもCSSの優先順位が高くなります。

スクリーンショット 2017-03-04 21.13.34

上記において、2行目の記述が無いと仮定して、1行目と3行目だけであるとします。

下のものが適用され、p要素はになります。

2行目の記述があるとすると、2行目のidである#testが優先され、p要素は青になります。

classセレクタ

classで指定した要素に適用します。

CSSでの書き方は、class名の前に’.’をつけ、’.class名’という形で書きます。

スクリーンショット 2017-02-28 0.31.40

↑ class=”test”で書かれたp要素の文字が赤くなります。

idは一度しか使えませんでしたが、classは何度でも使うことができます。言い換えると、同じclass名を何度でも使用することができます。

最初はclassとidの使い分けが難しいと思います。無理にidを使う必要はなく、基本的にはclassを使いましょう。全てclassを使っても大丈夫です。

class=”test”としたpの要素が赤になります。

classとidの使い分け

classとidを学んで、2つの役割は分かりました。では、この2つ、どのようにして使い分けたら良いのでしょうか。そもそもidを使う必要はあるのでしょうか。

idを使う場所として、「header(ヘッダー)・footer(フッター)」というものがあります。これは、1ページに一つしかありません。このような場所でidを使用します。しかし、必ずidを使用するわけではなく、classでも問題ありません。

idを使うメリットとして、HTMLを見た際に、誰が見ても「この要素はidが使われているから、1つしか無いものだ」ということが分かるメリットがあります。

具体的な例として、ページ内リンクがあります。

ページ内リンクとは、「上へ戻る」のように、ボタンをクリックするとページの一番上に戻るもの。つまり、ボタンを押すことによって指定したページの位置に移動するものです。

その移動したい場所をidで指定することで、移動したい場所が明確になります。

もしidがたくさんあったとしたら、どこに移動していいのか分からなくなってしまいます。

 

複数のセレクタ

複数のセレクタに適用したいときに、「,(comma)」で区切り、以下のように書きます。

スクリーンショット 2017-02-28 0.41.32

この場合、p,h1,h2,h3の要素はになります。

子孫セレクタ

HTML
スクリーンショット 2017-02-28 0.37.48

CSS

スクリーンショット 2017-02-28 0.36.37

class=”test”の子要素であるp要素にCSSを適用したいとき、CSSは上のように書きます。

この場合、helloが赤く表示されます。

子セレクタ

CSS

スクリーンショット 2017-02-28 1.35.13

HTML

スクリーンショット 2017-02-28 1.24.32

子セレクタとは、子要素にだけ適用させます。(孫要素は適用させません。)

HTMLを見てみると、pの子要素h3の「日本人」だけが赤くなります。

親要素pの子要素spanの孫要素h3「東京」は孫なので適用されません。

隣接セレクタ

CSS

スクリーンショット 2017-02-28 1.42.07

HTML

スクリーンショット 2017-03-11 16.25.44

隣接セレクタは、兄弟要素(同じ階層にある要素)で、指定したものの直後にある要素に適用させます。

上の例でいうと、pに隣接したh3を適用させるわけだから、「こんにちは」が赤くなります。

 

疑似要素の使い方

疑似要素は、要素の中の特定したものに対してCSSを適用させます。

それには以下のものがあります。

・:first-letter

・:first-line

・:first-child

では、1つずつ見ていきましょう。

まず、前提として以下のようなCSSとHTMLがあります。

CSS

スクリーンショット 2017-02-28 9.16.03

HTML

スクリーンショット 2017-02-28 9.16.19

・:first-letter

一行目の:first-letterは最初の一文字を適用させます。

よって、下のようにhelloのhだけが赤くなります。

 

スクリーンショット 2017-03-04 19.26.19

 

・:first-line

二行目の:first-lineは最初の行を適用させます。

よって、下のように一行目のhelloが赤くなります。

スクリーンショット 2017-03-04 19.26.32

・:first-child

三行目の:first-childは最初の要素を適用させます。

よって、p要素の一番最初であるhelloが赤くなります。

スクリーンショット 2017-03-04 19.26.37

 

この記事のハッシュタグ

属性セレクタのいろいろ

属性セレクタを使うことによって、属性を指定した要素を適用することができます。

文章だとよく分からないと思うので、実際に見てみましょう。

属性の指定

CSS

スクリーンショット 2017-02-28 16.38.24

HTML

スクリーンショット 2017-02-28 16.39.02

実行結果

スクリーンショット 2017-02-28 16.42.47

これは、属性を指定してその属性をもつ要素に適用させることができます。

上記の例ですと、nameという属性を指定しました。

name属性をもっているのは、「おはよう・こんにちは・ごきげんよう」なので、この3つが赤くなります。

属性値の指定

CSS

スクリーンショット 2017-02-28 16.38.30

HTML

スクリーンショット 2017-02-28 16.39.02

実行結果

スクリーンショット 2017-02-28 16.42.59

これは、属性値を指定しています。一つ前では属性を指定していましたが、今回は属性値(属性の値)です。

name=”test”という属性値を指定しているので、これにあたるものは「おはよう」だけなので、おはよう」だけが赤くなります。

属性値の一部を指定

・最初の文字を指定

CSS

スクリーンショット 2017-02-28 16.38.34

HTML

スクリーンショット 2017-02-28 16.39.02

実行結果

スクリーンショット 2017-02-28 16.43.12

属性値の最初の文字を指定してCSSを適用させています。

name^=”test”なので、属性値の最初がtestで始まるものを赤くしています。

HTMLを見てみると、「おはよう・こんにちは」がそれに当たるので、この2つが赤くなります。

・最後の文字を指定

CSS

スクリーンショット 2017-02-28 16.38.41

HTML

スクリーンショット 2017-02-28 16.39.02

実行結果

スクリーンショット 2017-02-28 16.43.20

属性値の最後の文字を指定してCSSを適用させています。

name$=”test”なので、属性値の最後がtestで終わるものを赤くしています。

HTMLを見てみると、「おはよう・ごきげんよう」がそれに当たるので、この2つが赤くなります。

属性値を含むものを指定

HTML

スクリーンショット 2017-02-28 16.39.02

CSS

スクリーンショット 2017-02-28 16.38.48

実行結果

スクリーンショット 2017-02-28 16.43.30

指定した属性値をもつものを適用させています。

今回はname*=”test”なので、属性値にtestを含むものを赤くしています。

HTMLを見てみると、「おはよう・こんにちは・ごきげんよう」がそれに当たります。

よって、この3つが赤くなります。

 

将来の不安はスキル習得で解決

「ずっと今の仕事を続けるのは不安」「将来収入があがる職につきたい」「やりたいことがない」

いま、日本では多くの若者がそう感じています。あなた1人じゃありません。
毎月数千人の方がTECH::EXPERTの無料キャリア相談に参加しています。

プロと話してキャリア構築を少しでもクリアにしませんか?

セレクタの上書き

セレクタには、適用される優先順位というものがあります。

つまり、上書きできます。

適用される優先順位があるものとして、2つあります。

・書く順番

・classとid

それでは、1つずつみてきましょう。

書く順番

CSSは、上から順番に読まれていきます。

よって、下に書いたものが優先的に適用されていきます。

具体的に見てみましょう。

HTML

スクリーンショット 2017-03-04 20.14.35

CSS

スクリーンショット 2017-03-04 20.14.44

実行結果

スクリーンショット 2017-03-04 20.14.08

CSSを見てみると、上では赤を指定していて、下では青と指定しています。

CSSは上から読まれていて、下の方が優先されるので、文字が青くなりました。

classとid

classとidには優先順位というものがあり、idの方が優先的に適用されます。

イメージがあまりわかないと思うので、具体的に見てみましょう。

HTML

スクリーンショット 2017-03-04 20.18.12

CSS

スクリーンショット 2017-03-04 20.19.32

実行結果

スクリーンショット 2017-03-04 20.19.49

HTMLを見てみると、classとidの2つが指定されています。

CSSを見てみると、idの下にclassがあり、CSSは上から読まれるので、下にあるclassが優先されて文字は黄色になるのではないかと思われるかもしてません。

しかし、classとidが指定されていたら、idの方が優先順位が高く、idが指定した色である緑が適用されます。

まとめ

よく使う便利なセレクタ

いままでたくさんのセレクタを紹介してきました。

では実際、どんなセレクタをよく使うのかというと、「classとid」「複数セレクタ」です。

特定の要素にだけ適用させたい時に、その特定の要素にclassを当ててあげればそれで終了です。

また、複数のセレクタで共通の値がある場合は、まとめて適用させるために複数セレクタを使用します。

この2つは特によく使用するので覚えておくと良いでしょう。

今、需要の高いWebデザイナーへの転職で年収アップ

今の年収に満足していますか? もっと年収を上げたいと思っていませんか?

そんな方には今需要の高いWebデザイナーがおすすめです。

TECH::EXPERT(テック エキスパート)は未経験からのWebデザイナー転職を実現するスクール。効率よくデザインスキル身につけられる教育からあなたのキャリアを叶える転職まで最後までサポートします。
お近くの教室やオンラインでキャリア相談(カウンセリング)を実施中です。大人気ですぐ日程が埋まってしまうので、お早めの予約を!

無料キャリア相談の日程を見る

この記事を書いた人

Avatar
村山鶴倫