CSSセレクタ入門、CSSセレクタとは?セレクタの種類や指定方法を解説|HTML&CSS入門講座(27)

HTML&CSS
この記事は約6分で読めます。

はじめに

 HTML&CSS入門講座の第二十七弾として、CSSセレクタ入門、CSSセレクタとは?セレクタの種類や指定方法について紹介します。

 この記事を読むと次の疑問について知ることができます。

  • CSSセレクタとは?
    • HTMLのタグと属性
  • CSSセレクタの調べ方はどうするの?
  • セレクタの種類にはなにがあるの?
 HTML&CSS入門講座(26)では、Google Fonts 使い方を 初心者向けに解説、Cocoonやパソコンでの利用について解説してきました。
 
 ここでは、CSSセレクタ入門、CSSセレクタとは?セレクタの種類や指定方法について深堀していきます。

CSSセレクタとは?

 CSSは、HTMLの要素を修飾するために使われますが、HTML要素のどの部分に修飾するかなどを指定するのに利用されるのが、CSSセレクタになります。

 したがって、CSSセレクタは、HTML文書で利用されるHTMLタブ名、id名、class名などが用いられます。

 具体的にもう少し詳しく見ていきましょう。

HTMLのタグと属性

 HTMLの要素は、開始タグと終了タグで挟まれた全体を指します。

<p>今日の天気は雨でした。</p>
 上述のHTML文は、『<p>~</p>』までが要素であり、<p>が開始タグ、</p>が終了タグとなります。
 
 この場合のCSSセレクタは、タグ名である「p」となります。
 
また、次のようなHTML文を考えてみましょう。
 
<div>
  <ul>
    <li>第一日目</li>
    <li>第二日目</li>
    <li>最終日</li>
  </ul>
</div>
 <div>~</div>の要素(親要素)内に<ul>~</ul>リスト(子要素)があり、さらにその下に各リストの項目<li>~</li>(孫要素)が3つあると言うように、入れ子構造の階層構造を持つことができます。
 
 この場合は、CSSセレクタは、親要素に対するCSSセレクタは「div」、子要素に対するCSSセレクタは、「div>ul」、孫要素に対するCSSセレクタは、「div>ul>li」となります。
 
 また、HTMLタグには属性を持つことができます。
 
<a herf="https://yanai-ke.com" target="_blank">定年後のスローライフブログ</a>
 上述のHTML文は、「定年後のスローライフブログ:https://yanai-ke.com」に飛ぶリンクタグですが、この中で、「herf」や「target」は「属性」であり、それぞれに対応した「https://yanai-ke.com」や「_blank」は属性値です。
 
 この場合のCSSセレクタは、a[herf]、a[target]などで属性を指定できます。

CSSセレクタの調べ方

 要素のCSSセレクタがどうなっているかわからない場合は、Chromeのデベロッパーツールを用いて調べることができます。

 調べたいページをChromeブラウザーで開き、デベロッパーツールを(F12、表示させたページで右クリくしてでるメニューで「検証」をクリック)呼び出し、調べたい要素をクリックして、右の「Elements」に選んだ要素を表示させ(青く表示)、その部分で右クリックして、「Copy」⇒「copy selector」をクリックすることにより、その要素のCSSセレクタを取得することができます。

 下の画像は、Yahoo!のトップページのYahoo!JapannoタイトルのCSSセレクタをコピーできます。

セレクタの種類

 それでは、CSSセレクタの種類にはどのようなものがあるか、表にまとめてみました。

セレクタ対象
タグ名タグで挟まれた要素p{color:red}
.class名class名を付けた要素.classname{color:red}
#id名id名を付けた要素#idname{color:red}
全ての要素*{color:red}
>直下の階層の子要素div>h3{color:red}
~指定した要素以降の兄弟要素h2~p{color:red}
タグ名 タグ名直下の子孫要素div ul{color:red}
タグ名+タグ名隣接する兄弟要素h2+a{color:red}
タグ名:first-of-type同じ要素の中での最初の要素p:first-of-type{color:red}
タグ名::last-of-type同じ要素の中で最後の要素p:last-of-type{color:red}
タグ名:nth-of-type(n)同じ要素のn番目の子要素p:nth-of-type(n) {color:red}
タグ名:nth-last-of-type(n)同じ要素の後ろからn番目の子要素p:nth-last-of-type(n) {color:red}
タグ名:nth-of-type(odd)同じ要素の奇数の子要素p:nth-of-type(odd) {color:red}
タグ名:nth-of-type(even)同じ要素の偶数の子要素p:nth-of-type(even) {color:red}
タグ名[属性名]属性を持つ要素a[herf]{color:red}
タグ名[属性名₌”属性値”]属性身と属性値の両方が一致する要素a[target="_blank"]{color:red}
タグ名[属性名*=”~”]属性名の属性値に一部一致する~を持つ要素a[herf*=".com"]{color:red}
タグ名:not(タグ名1)タグ名1を含まない要素p:not(.class){color:red}
タグ名:empty空の要素がある場合に適用ul:empty{display:none}
a:link未訪問のリンクa:link{color:red}
a:visited訪問済みのリンクa:visited{color:red}
a:hoverカーソルが乗っている状態のリンクa:hover{color:red}
a:activeクリック状態のリンクa:active{color:red}
:focusフォーカスされている要素input:focus{backgrand:yellow}
:lang特定の言語を指定した要素p:lang(en) {color:red}
タグ名::first-line文章の一行目p::first-line {color:red}
タグ名::first-letter文章の1文字目p::first-letter {color:red}
タグ名::before要素の前に追加する疑似要素h2::before{content"追加内容"}
タグ名::after要素の後に追加する疑似要素h2:after{content"追加内容"}

おわりに

 如何だったでしょうか?

 CSSセレクタとは?、HTMLのタグと属性、CSSセレクタの調べ方はどうするの?、セレクタの種類にはなにがあるの?などについて解説してきました。

 この記事があなたにとって少しでもお役に立てればこれほど嬉しいことはありません。

以上です。

コメント

タイトルとURLをコピーしました