Channelユーザーグループ開発リポジトリリリースノートコードホスティング開発者ブログhifive開発情報ヘルプHelp本サイトについてFAQ本ウェブサイトでは、利便性及び品質の維持・向上を目的に、クッキーを使用しております。本ウェブサイトにおけるクッキーの使用についてはプライバシーポリシーをご参照いただき、クッキーの使用にご同意頂ける場合は「同意する」ボタンを押してください。同意いただけない場合は、ブラウザのクッキーの設定を無効化してください。クイズ参考セレクタとはセレクタ(CSSセレクタ)は、CSSにおいてスタイルを適用する要素を選択するための条件式です。元々はCSS用に作られた仕組みですが、現在では、プログラム(JavaScript)から特定のDOM要素を対象にして処理を行いたい場合に「(HTML文書内から)処理対象とする要素を選択する」目的でも使われます。hifiveでは、イベントハンドラを記述する際、「どの要素でイベントが起きたらハンドラを実行するか?」を絞り込むために使用します。(例:マウスクリックのイベントが起きたとき、クリックされた要素が、指定されたセレクタの条件にマッチするか?をチェックして関数を実行するかどうかを決定しています。「div」は任意の<div>要素を選択します。foo属性の値がxxxである要素を選択します。type="button">を選択します。id属性値を条件にして選択を行います。id="myId">」のように、id属性の値がmyIdになっている要素を選択します。CSSクラス(class属性の値)を指定します。contents">」のように、class属性の値にmyClassが含まれている要素を選択します(例のように、myClass以外の値が含まれていてもよい)。全ての要素を選択します。次に説明する“子孫セレクタ”などと組み合わせて「特定の要素以下の全ての要素にスタイルを適用する」ような場合によく使います。aなど)が入ります条件を組み合わせる複数の条件を組み合わせる(AND条件=指定されたすべての条件を満たす要素だけを選択する)ことも可能です。その要素が満たすべき条件を全て繋げて(途中にスペースや改行を入れずに)記述します。例:id属性の値がitemsで、class属性にsearchResultとtopの2つが含まれているdiv要素を選択する⇒答え:div#items.searchResult.top注:idの条件とクラスの条件はどの順で書いてもよいが、要素の条件は必ず先頭に書かなければならないまた、HTML文書の木構造に基づいて「特定の構造を持つ要素だけを選択する」こともできます。E要素の子孫のF要素を選択します。a」は任意のdiv要素の子孫のa要素を選択します。li)「E要素の子孫のF要素の子孫のG要素」を選択します。E要素の直接の子供であるF要素を選択します。子孫セレクタと同様、構造は多段で指定することができます。条件を組み合わせることもできます。a.itemLink」というセレクタの場合、「idがcontentsであるdiv要素の直下の、class属性にitemLinkを持つa要素」が選択されます。)「子」と「子孫」の違い例えば、以下のようなHTMLコードがあったとします。href=".">リンク2</a>」の両方の要素が選択されます。href=".">リンク1</a>」だけが選択されます。href=".">リンク2</a>」はp要素の下にあるので、最初のdiv要素の直接の子要素ではないからです。a」のように書くことができます。