CSS – セレクタになりうるHTML要素と属性

要素とか属性とかいう言葉は日常生活の特殊なシーンでなんとなく聞くこともありますが、セレクタという言葉になると耳にする機会は俄然少なくなります。

MT車のギアチェンジを行うためのシフトレバーはAT車ではセレクター(セレクトレバー)と呼ぶそうですがあまり聞かないですね。

WEBシステムの世界では、セレクタはオブジェクトの性格を定義するプロパティや、処理を行うメソッドとの仲介屋みたいな重要な機能を担っており、WEBサイトがブラウザ上でDOMにより要素単位でオブジェクト化されるタイミングで、要素セレクタや属性セレクタは、CSSやjQuery上で、プロパティによって値が代入されたり、メソッドによって処理されたりします。

バリ島の不動産屋とセレクタの関係

セレクタを説明するにはバリ島の不動産屋をイメージするとわかりやすいと思います。

バリ島(body要素)には、クタエリア(header要素)、ヌサドゥアエリア(nav要素)、デンパサールエリア(article要素)、ウブドゥエリア(footer要素)みたいにそれぞれエリアごとに不動産屋がありますが、各不動産屋のオフィスから遠いエリアへ行くには交通費等のコストがかかるため、だいたい専門外のエリアには手を出したがりません。

bodyタグ内を「ヘッダー領域」「サイドバー領域」「コンテンツ領域」「フッター領域」の4ブロックに区切るのがセクション要素であり、CSS上でそこに属するブロックレベル要素(perumahan 集合住宅)やインライン要素(VillaやCondominium)ごとに分類(プロパティに値を設定)し管理するのがセレクタ(不動産屋)の役割です。

オーナーは、不動産屋で自分の所有物件についての情報を専用フォーム(CSS)の「土地面積」「建物面積」「希望価格」等の項目(プロパティ)にデータ(値)を記入し、その情報を元に不動産屋が自社の物件管理機能付きWEBサイト(jQuery)上にストックとして登録します。

一方で賃貸や購入希望者は「バリ島 不動産」でググッて、不動産屋のWEBサイト(jQuery)に到達すると、エリア、価格等の条件で絞込み検索(メソッド実行)を行い、希望する物件を探します。

セレクタとはずばり、それがCSSではスタイルを適用する対象を示し、jQueryではメソッドやイベント発生時の処理対象になるものです。

要素セレクタと属性セレクタ

セレクタはWEB上のオブジェクトに対して、装飾(CSSにてプロパティに値を設定)したり処理を実行(メソッドやイベント)したりするための仲介役ですが、セレクタになる資格のあるものはHTML要素またはHTML属性になります。

  1. 要素セレクタはそのまま記述「$(‘p’)」
  2. 属性セレクタ
    idは「$(‘#yama’)」、classは「$(‘.zou’)」
    その他の属性は大括弧$(a[‘href=”https://www.indonesia-japan.com”]’)で囲む。
  3. ブランクは「それ以下の子要素」、カンマは「複数の要素」、プラス(+)は「隣接要素」、不等号(>)は「直下の子要素」

セレクタが処理するメソッドにはプロパティに値を設定する役割と値を取得する役割がありますが、記述上の違いはプロパティと値をセットで書くか、プロパティのみを書くかです。

  • 値を設定 : $(‘p’).css(‘color’, red);
  • 値を取得 : console.log$(‘p’).css(‘color’);

こんな投稿も読まれています