15.
idとclassセレクタ
idセレクタ
idセレクタの基本
idセレクタは、# で id名を指定します。
id=latest-postsのセレクタは、つぎのようになります。
style.css
idセレクタの子孫要素
idセレクタの子孫要素を指定するには、半角スペースで区切って子孫セレクタを指定できます。
id=latest-postsの子孫要素であるulのセレクタ、つぎのようになります。
style.css
index.html
list-style
list-styleはマーカを一括設定
list-styleは、リスト先頭のマーカーを一括設定するCSSプロパティです。2つ目以降の値は省略できます。
個別の設定
各設定は個別に設定もできます。
マーカーを非表示
リストのマーカーを非表示にするには、list-style-typeの値をnoneに設定します。
style.css
リスト表示の中黒が消えました。
結果

その他の設定
list-styleのその他の設定は、MDN:list-styleなどを参考にしてください。
classセレクタ
classセレクタの基本
classセレクタは、.(ピリオド)でクラス名を指定します。
クラス名がdate-labelのセレクタは、つぎのようになります。
style.html
index.html
background
背景の設定
backgroundは、HTML要素の背景を一括で設定するCSSプロパティです。
例えば、背景色を設定するには以下のようになります。
backgroundプロパティは背景色だけでなく、画像や位置なども設定できます。backgroundの詳細設定は、W3CのMDN: backgroundなどを参考にしてください。
背景色のみの設定
背景色だけ設定したい場合は、background-colorも利用できます。
classの設定
日付部分のspanタグに、背景色、フォントカラー、フォントサイズを設定します。また、newクラスも追加してフォントカラー、フォントサイズを設定します。
style.css
指定したクラスにスタイルが反映されました。
結果

演習
問題1
id名が「title」のセレクタはどれですか?
- #title
- .title
- title
- id title
問題2
クラス名が「title」のセレクタはどれですか?
- #title
- .title
- title
- id title
問題3
liタグのマーカーを非表示にするCSSはどれですか?
- ul: none;
- li: none;
- list-style: square;
- list-style: none;
問題4
背景色を設定するプロパティはどれですか?
- background
- color
- font-color
- list-style