とぅーごの授業ノート

未経験からプログラミング講師に挑戦！プログラミング・読書などを中心に学習の記録を読者の方のお役に立てるように発信しています。

MENU

ドットインストール 詳解CSS セレクター編 【CSSに慣れてきた中級者むけ】

ドットインストール プログラミング

f:id:togo_blog:20200502085646p:plain

ドットインストールまとめ記事、今回は「詳解CSS セレクター編」です。

 

【この記事はこんな方におすすめ】

以下のような方に向けてかいてます。

  • HTML/CSSの基本を勉強し終えた方
  • プログラミングの基礎学習を始めて数週間~1ヶ月の方
  • ドットインストールを使ってプログラミング学習をしている方

→セレクタについて復習する際に本記事をご活用ください！項目別に140文字程度にまとめております。目次から見たい項目だけ見てささっとブラウザバックしてもらって大丈夫です！

ただしこの記事はCSSのコードを一度も書いたことがない人には向かないです。先にCSSの基本を復習されることをおすすめします。

 

↓よろしければ私の記事もご活用ください。簡単にまとめてます。↓

 

togo-blog.hatenablog.jp

 

 

また、各レッスンのまとめが完結したら記事内に登場する技術を使ったWEBサイトを作って公開します。レッスンの内容で実際どのくらいのレベルのWEBサイトになるのかがわかりやすいようになっております。

 

そういった情報を見逃したくない方はぜひ読者登録してお待ちください！

 

 

【クラスセレクタ】

・要素にclass属性をつけるとclass属性の値ごとにcssをつけて複数の要素にまとめてcssを適用できる。その際①②のように”.(属性の値)”とする
・class属性の値は半角スペースで区切ることで複数設定できる。セレクタも複数設定できる

f:id:togo_blog:20200508200955p:plain

 

【idセレクタ】

・id属性をもつ要素(①)にcssを適用するには②のように”#(属性の値”とする
・id属性は同じページ内で同じ値を複数使うことができない。使うと③のように波下線で示してくれる
・*は全称セレクタといい、全ての要素にcssを適用する…④

f:id:togo_blog:20200508201045p:plain

 

【属性セレクタ】

セレクタの指定の仕方によりcssの適用範囲が異なる
①[属性名]
指定した属性を含む要素
②[属性名＝値]
指定した属性名が指定した値に完全一致する要素
③[属性名^=値]
前方一致
④[属性名$=値]
後方一致
⑤[属性名*=値]
部分一致

f:id:togo_blog:20200508201116p:plain

 

【擬似要素】

・要素の特定の部分をスタイリングすることができるものを擬似要素という。
・”before::””after::”(①,②)はcontentプロパティを伴いそれぞれ要素の前後に値を追加する
・attr(data-)とすれば追加する内容を要素ごとに変えることができる…③④

f:id:togo_blog:20200508201257p:plain

 

【hover,cursor】

①hover
擬似クラス。カーソルがボタンの上に乗った時のスタイルを指定。ここではopacity(透明度)を0.8(少し薄く)している…②
③cursor
ボタンの上にカーソルが乗るとカーソルが指の形になる

※擬似クラスは擬似要素と違い”:”は1つのみ

f:id:togo_blog:20200508201325p:plain

 

【nth-child】

擬似クラス。()内の表記によりスタイルを適用する要素が変わる
①数字：(指定した数字)番目
②kn(kは自然数)：kの倍数番目
③odd：奇数番目
④even：偶数番目
【first-child,last-child】
それぞれ最初、最後の要素にスタイルを適用…⑤⑥

f:id:togo_blog:20200508201426p:plain

 

【nth-of-type】

・擬似クラス
・nth-childの要素の種類も考慮したい時ver.
⓪のように要素が入り組んでいる時に使える
・使用するときは”(要素名):nth-of-type()”と記述する…①
・nth-childと同様の数字の指定方法、およびfirst,lastも使える…②③

f:id:togo_blog:20200508201500p:plain

 

【:empty…①】

・空の要素にスタイルを適用
・空の要素とは空白も改行もされていない、もしくはコメントのみが入っている要素のこと…②
【:not()】
・()内にセレクタをとり、指定したセレクタ以外の要素にスタイルを適用…③

f:id:togo_blog:20200508201537p:plain

 

【詳細度】

cssのセレクタ表記による優先度のこと
・id、クラス/属性/擬似クラス、要素/擬似要素の順番に数をカウント、比較し数字が大きい順に高くなる…①~⑤
・style属性：どのセレクタよりも優先度が高い…⑥
・!important：style属性より優先度が高い。複数ある場合後に書いたものが優先…⑦⑧

f:id:togo_blog:20200508201621p:plain

 

 

【復習】

最後に記憶に定着するように復習します。

今回はCSSのセレクタについて扱いました。内容は大きく分けて3つでした。

 

1.基本的なセレクタの種類

  • クラスセレクタ…複数の要素にclass属性を指定してまとめてcssを適用できる
  • idセレクタ…使い方はクラスセレクタに似ているが1ページ内で繰り返し用いることができない
  • 属性セレクタ…指定した属性を含む要素にcssを適用。属性値も指定することができ、前方一致や後方一致が使えるのでhref属性のURLなどに有用
  • 全称セレクタ…すべての要素にcssを適用

2.擬似要素と擬似クラスについて

★擬似要素

"::"を伴い、要素の特定の部分をスタイリングする。

  • "::before/after"…それぞれ要素の前後にスタイルを適用
★擬似クラス

":"を伴い、指定した要素が特定の状態の時にcssを適用する。

  • ":hover"…要素にカーソルが乗った時のスタイルを指定。
  • ":empty"…空の要素にスタイルを適用。
  • ":not"…指定したセレクタ以外の要素にスタイルを適用
  • nth-child…親要素内の複数ある要素(種類は不問)の特定の順番のものにスタイルを適用する
  • nth-of-type…要素の種類も限定して特定の順番の要素にスタイルを適用できる。
★詳細度

cssのセレクタ表記による優先度のこと

  • ①id、②クラス/属性/擬似クラス、③要素/擬似要素をそれぞれカウント。それぞれ数が大きい順。優先度は①＞②＞③
  • style属性：どのセレクタよりも優先度が高い
  • !important：style属性より優先度が高い。複数ある場合後に書いたものが優先

 

それぞれ非常に難しい内容ですが、覚えるのではなく調べて使えるようにします。

またWEBサイトに反映し次第記事に追記します。

 

 

普段はTwitterでプログラミング・読書・教育等について発信しています。

この記事が参考になった方はぜひフォローよろしくお願いします！