はじめに
HTML＆CSS入門講座の第二十七弾として、CSSセレクタ入門、CSSセレクタとは？セレクタの種類や指定方法について紹介します。
この記事を読むと次の疑問について知ることができます。
- CSSセレクタとは？
- HTMLのタグと属性
- CSSセレクタの調べ方はどうするの？
- セレクタの種類にはなにがあるの？
CSSセレクタとは？
CSSは、HTMLの要素を修飾するために使われますが、HTML要素のどの部分に修飾するかなどを指定するのに利用されるのが、CSSセレクタになります。
したがって、CSSセレクタは、HTML文書で利用されるHTMLタブ名、id名、class名などが用いられます。
具体的にもう少し詳しく見ていきましょう。
HTMLのタグと属性
HTMLの要素は、開始タグと終了タグで挟まれた全体を指します。
<ul>
<li>第一日目</li>
<li>第二日目</li>
<li>最終日</li>
</ul>
</div>
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) | タグ名１を含まない要素 | 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セレクタの調べ方はどうするの？、セレクタの種類にはなにがあるの？などについて解説してきました。
この記事があなたにとって少しでもお役に立てればこれほど嬉しいことはありません。
以上です。
コメント