CSSのセレクターが理解するには、HTMLのタグの構造を理解しなければいけません。
でも、セレクターが分かれば、その後学習する
JavascriptのDOM操作が非常にわかりやすくなるでしょう。
という事で、今回は、CSSのセレクターを徹底的に理解できる内容をレクチャーします。
CSSのセレクターの概要
CSSは、HTMLのタグに対して、
装飾や特性の切り替えを行う処理です。
実際にどのタグに対して命令を適用させるかという、タグの指定をするのにセレクターを使って行います。
このセレクターが理解できたら、その後CSSは簡易に思えるでしょう。
でも、難しいポイント満載のセレクターなので、多くの人がつまづいてしまいます。
基礎も含めてちゃんと理解しておきましょう。
CSSのセレクターの種類
- タイプセレクター
- IDセレクター
- クラスセレクター
- 子孫セレクター
- 属性セレクター
- 擬似クラスセレクター
- 疑似要素セレクター
1. タイプセレクター
タイプセレクターは「タイプ」という名前ですが、「HTMLタグ」の事です。
<p>sample-title</p>
このHTMLに対して、
p {
color: red;
}
このように指定すると、Pタグに対して、文字色を赤に変更する命令になります。
2. IDセレクター
IDセレクターは、ID属性が設定されている、HTMLタグが選択されます。
<p id='header'>sample-title</p>
#header {
background-color: blue;
}
ちなみに、id属性は、ページ内では、同じ値は他では使えないというルールがあります。
CSSでのIDセレクターは、問題なく機能してしまいますが、HTMLバリデーションエラーとして、w3c規定では、エラー扱いになります。
Javascriptで操作をする時には、不具合につながるので、複数セットする値の場合は、class属性で書き込むようにしましょう。
3. クラスセレクター
クラスセレクターは、指定されたclass属性の値を持っているHTMLタグを全て選択します。
<p class='highlight'>sample-title</p>
.highlight {
font-weight: bold;
}
一番スタンダードな使い方なので、覚えやすいでしょう。
4. 子孫セレクター
子孫セレクターは、HTMLのDOM構造の下階層に向かって選択をします。
<div>
<ul>
<li><a class='step-1' href='#step-1'>STEP_1</a></li>
<li><a class='step-2' href='#step-2'>STEP_2</a></li>
<li><a class='step-3' href='#step-3'>STEP_3</a></li>
</ul>
</div>
子供選択
ul > li {
list-style: none;
}
ulタグの直下にある子要素のliタグのみ選択されます。
隣接兄弟選択
li.step-1 + li.step-2{
font-weight:bold;
}
liタグのstep-1というクラスのすぐとなりに隣接する、step-2のクラス属性（.step-1の直後に.step-2がある場合）が選択されます。
一般兄弟選択
li.step-1 ~ li.step-3{
font-weight:bold;
}
liタグのstep-1というクラスと同じ階層で、後ろに書かれている、.step-3が選択されます。
上記サンプルのように、複数のセレクターをつなげて使う方法を「結合」という風にも呼ばれます。
参考書などに書かれていることも多いので、覚えておきましょう。
5. 属性セレクター
属性セレクターは、HTMLタグに書かれている属性（または、javascriptで書き換えられた属性）を判別して、選択することができます。
<a href="http://example.com">Example</a>
<a href="http://myntinc.com">Myntinc</a>
a[href="http://example.com"] {
color: green;
}
サンプルコードは、href属性が"http://example.com"という文字列を設定されているタグが選択されます。
6. 擬似クラスセレクター
<a href='https://google.com'>Google検索</a>
visited : 既に訪れたことがあるリンク
a:visited {
color: purple;
}
hover : 要素の上にマウスが乗った時
a:hover {
color: purple;
}
empty : 要素の中身が空の時
a:empty {
color: purple;
}
実際にセットしたcssの挙動を、自分でコードを書いて確認してみよう！
7. 疑似要素セレクター
サンプル要素
div::before {
content: 'beforet-selector';
color:red;
}
要素の後ろに擬似要素を作る
div::after {
content: 'after-selector';
color:blue;
}
上記の組み合わせ
CSSは、上記のセレクターを組み合わせることで、ほぼ全ての要素を選択することが可能になります。
そして、今回紹介したセレクターは、まだまだ氷山の一角で、もっと便利に使えるセレクターはたくさんあります。
以下のリンク集を参考に、知らないセレクターを自分で書いて実験してみると、簡単に習得できるでしょう。
リンク集
CSSセレクタのチートシート｜37パターンを一覧で解説
図解でわかりやすくセレクターを解説しています。
CSS Selector Reference
全てじゃないですが、CSSセレクターの一覧が掲載されています。
0 件のコメント:
コメントを投稿