セレクターについて知っておこう
基本のセレクター
指定された class 属性やid属性を持つ要素を選択します。(C-2. CSS スタイルの継承)参考
属性セレクター
リンクを挿入する際に使用するaタグの場合、href属性で「遷移するURLの情報」、target属性で「リンクを開くタブ・ウインドウ情報」といった情報を持たせることができます。
|
1 2 |
/* ↓ 属性 ↓ 属性 */ <a href="https://www.techup.com" target="_blank">techUP育成サイト</a> |
要素名[属性名]を知っておこう
指定の属性がある要素に適用します。実際に表示させてみよう！
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<style> p[class]{ color:blue; } [type]{ color:red; } </style> <body > <p class="p1">ここが青色文字になる</p> <p class="p2">こちらも青色文字になる</p> <p><input type="text" id="b1" value="タイプが赤色文字になる" /></p> <p><input type="text" id="b2" value="こちらも同様赤色文字になる" /></p> </body> |
実行結果
要素名[属性名=”値”] のやり方を知っておこう
属性の値がある要素に適用、実際に表示実行させてみよう！
|
1 2 3 4 5 6 7 8 9 10 11 12 |
<style> input[type="button"]{ color:blue; } input[type="text"][name2="a2"]{ color:red; } </style> <body > <p><input type="button" name1="a1" value="青文字になるボタン" /></p> <p><input type="text" name2="a2" value="赤文字になるボタン" /></p> </body> |
属性セレクターの種類を知っておこう
属性セレクターには、完全一致,前方一致,後方一致,部分一致などの種類の属性があります。
MDN属性セレクターを参考に、確認してみてください。
セレクターの組み合わせを知ろう
グループセレクタ（,でつなぐ） 実際に表示実行させてみよう！
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<style> .sec, #p{ color: #0000ff; } </style> <div class="sec"> <h2>子の段落です</h2> <div> <p>子孫の段落です</p> <div> <p>子孫の段落です</p> </div> </div> </div> |
子孫セレクタ(親要素から順に半角スペースで区切る) 実際に表示実行させてみよう！
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<style> .sec p{ color: #0000ff; } </style> <div class="sec"> <h1>子の段落です</h1> <div> <p>子孫の段落です</p> <div> <p>子孫の段落です</p> </div> </div> </div> |
子セレクタ(>)
セレクタ同士の間に「>」区切りで並べた絞り込み指定、親と直下の要素で指定するセレクタです。
実際に表示実行させてみよう！
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
<style> .sec > p{ color: #0000ff; } </style> <div class="sec"> <h2>これはh2要素</h2> <p>子の段落です</p> <div> <p>子孫の段落です（除外されます）</p> <div> <p>子孫の段落です（除外されます）</p> </div> </div> </div> |
セレクターは多くの種類があります。利用したいデザインにあわせて使うようにセレクターの種類を確認しておきましょう。MDN CSSセレクター 参照
課題
子孫セレクタを利用した以下の内容を作成してください。
作成したファイル名をindex_2_17.htmlにして送ってください。
実行結果
ヒント
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
//HTML <div class="〇〇"> <p> // 表示したいものを記入。 </p> </div> //CSS .〇〇{ //適用させたいスタイル } .〇〇 p{ //適用させたいスタイル } |
課題・復習用検索キーワード
| 検索例 |
| 🔍HTML 改行 |
| 🔍CSS 子孫セレクタ 仕組み |
| 🔍HTML CSS 子孫セレクタ 書き方 |