ywork2020.com

Title

要素を条件付きで選択する

目次 (INDEX)

セレクターとは

Selector とは次の意味をもつ単語です。
selector
読み: セレクター
意味: 選択者 , 選択装置 , 選ぶ人...

目次に戻る

セレクターの概要と解説

セレクターは CSS や javascript 、及び jQuery で要素を選択するための装置と言えば分かりやすいと思います。

CSS のセレクターを例にとると、HTML ドキュメントに配置された要素を単独、またはグループとして選択し、 その選択された要素のスタイルを設定することができます。

また、javascript ならば その選択された要素から命令文を実行したり、プロパティの値を取得することができます。

CSS で単純な例を挙げると、HTMLドキュメント内に a 要素 があるとします。
a 要素 は他のページや同じページ内のターゲットへのリンクを表す要素ですが、このテキストはブラウザの標準では青系の色で表示されることが多いでしょう。 しかし、デザインをオレンジ色のテキストにしたいと考えた場合に CSS のセレクターに a 要素を指定してスタイルを設定するわけです。


少し説明が長くなってしまったので、ここで少しだけ 上記のことをサンプルで表してみます。 サンプルに使用する要素は次のものです。

<a href="./html-a-tag.html" target="_blank"> a 要素のページ </a>

まず、実際にこれを CSS のコードにする場合を見てみましょう。

a{color: ##orange;}
サンプル :  a 要素のページ

それでは次に javascript の document.querySelector() を使った場合を見てみましょう。

document.querySelector("a").style = "color: ##pink;";
サンプル :  a 要素のページ

最後に jQuery の jQuery オブジェクト を使った場合を見てみましょう。

$("a").css({"color":"##red"});
サンプル :  a 要素のページ

上記までで 簡単なサンプル を見ていただきましたが、 セレクターには要素を特定するための様々な選択方法 (記述方法) が用意されています。 このページでは、まずはじめにその記述方法を CSS のセレクターを例に挙げて紹介していきたいと思います。

目次に戻る

セレクターの基本的な使い方

それでは、前章でも軽く触れましたが、基本的な要素の選択を行う記法を説明します。 まず、いくつかのサンプルコードを見ていきましょう。

h1{color: ##orange;}
h2{color: ##green;}
h3{color: ##red;}

上記の CSS は HTML の見出し要素である h1 , h2 , h3 の要素の選択を行って、それに対して文字色のスタイル設定を行っています。 このように、  要素名{プロパティ名: 設定値;}   という書き方でスタイルの設定を行うわけですが、この「要素名」の部分をセレクター と言います。

セレクター{プロパティ名: 設定値;}

それでは実際に、このページの h3 要素に対して文字色と背景色の設定を行ってみましょう。

h3{
	color: ##red;
	background-color: ##khaki;
}

セレクターの話から少しそれますが、下記のように
セレクター{ プロパティ:設定; プロパティ:設定; プロパティ:設定;}
と複数の設定項目がある場合は、 1 行にコードを記述するとコードの視認性が悪くなりますので、サンプルコードの様に複数行で記述することが一般的です。 また、 プロパティ:設定 の部分は{}でくくられたセレクターに対しての設定なので tab 文字などで インデント ( 文字下げ ) を行うことも一般的な書き方となります。

それでは次章でセレクターの書き方を細かく見ていきましょう。

目次に戻る

色々な選択の方法

このセクションでは、ページ内に配置された要素に対して どのようにセレクターで指定すれば どんな要素を選択できるのかを色々なバリエーションで紹介していきます。

「 * 」アスタリスクで全ての要素を選択する

全ての要素をセレクターに指定する場合は、「 * 」アスタリスクを指定します。 これはページのフォントや文字の大きさの基準を決めるなどで利用できます。 基本的には CSS の一番最初に記述します。

*{color: ##orange;}
要素の id 属性値で選択する

id属性の値をセレクターに指定する場合は、「 #id属性値 」 のように先頭に 「 # 」 シャープを付けます。

#idSampleP{color: ##red;}

<p id="idSampleP"> イメージ </p>

要素の class 属性値で選択する

ここでは div と p の 2 つの要素に同じ class 名を設定しています。 class 属性の値をセレクターに指定する場合は、「 .class 属性値 」 のように先頭に「 . 」 ドット (ピリオド) を付けます。

.clsSample{color: ##blue;}
<div class="clsSample"> イメージ </div>

<p class="clsSample"> イメージ </p>

複数の 要素 を選択する

要素を 「 , 」 カンマで区切れば、複数の要素や id や class でも同じスタイルに設定できます。 サンプルでは 3 つの要素を配置して、1 つのセレクターで、各要素をカンマ区切りで指定してみます。

ここでは、strong 要素と b 要素と id 属性をもつ p 要素に同じスタイルを一括で設定しています。

strong, #idSampleP1, b{color: ##orange;}
<strong> イメージ </strong>

<p id="idSampleP1"> イメージ </p>

<b> イメージ </b>

指定した親要素の中に含まれる子要素を選択する

親要素の後に半角スペースを挟み、次に子要素を指定すれば、指定した親要素の中に含まれる子要素だけを選択できます。

ここでは、id 属性をもつ p 要素の子要素である em 要素にスタイルを適用します。

#idSampleP2 em{color: ##red;}

<p id="idSampleP2"><em> イメージ </em></p>

これまでのサンプルのようにセレクターには様々な記述方法が存在します。 次のセクションでは 早見表 形式でセレクターの記述方法を掲載します。

目次に戻る

セレクターの記述方法 【早見表】

前項までで説明したセレクターの記述方法以外にも色々な記法があり、バリエーションに富んだ要素の抽出方法があります。 ここからは早見表形式で、色々な要素の選択方法を見ていきます。 これは、あくまでもサンプルとしてとらえていだだきたいと思います。 記法の組み合わせによっては、様々な使い方ができますので、これが全てではないということで参考にしていただければ幸いです。

CSS & jQ : タイプセレクター と ユニバーサルセレクター
セレクターターゲット
*全ての要素
要素選択した要素

目次に戻る

CSS & jQ : クラスセレクター と IDセレクター
セレクターターゲット
#id属性値id 属性値
.class属性値class 属性値

目次に戻る

CSS & jQ : セレクターの組み合わせサンプル
セレクターターゲット
要素,要素複数の要素
親要素□子要素
□の部分は半角スペースです
親要素の中の子要素
要素.class属性値指定要素であり、かつ class 属性値が一致する要素
親要素>直下要素要素の直下の要素
要素+兄弟要素要素の直後にある兄弟要素
要素~兄弟要素要素の後にある全ての兄弟要素

目次に戻る

CSS : 疑似クラスのサンプル
セレクターターゲット
要素:activeクリックされている時
要素:checkedチェックボックスやラジオボタンを選択した時
要素:defaultフォームの要素グループ内で既定の要素
要素:disabled無効な要素
要素:empty要素のコンテンツが空の時
要素:enabled有効な要素
要素:first-child兄弟要素の最初の要素
要素:first-of-type兄弟要素の中の最初の要素タイプ
要素:focusフォーカスされた時
要素:hoverカーソルが乗った時
要素:in-rangemin 属性と max 属性の制限範囲内にある時
要素:invalid入力内容が無効の時
要素:lang(引数)lang 属性の値に一致した要素
要素:last-child兄弟要素の最後の要素
要素:last-of-type兄弟要素の最後の要素タイプ
要素:link未訪問のリンク
親要素 :not(除外する子要素)
要素:not()
指定した条件に一致しない要素
要素:nth-child(引数)兄弟要素の A 番目
兄弟要素の A 個番目おき、、など
要素:nth-last-child(引数)兄弟要素の後ろから数えて A 番目
兄弟要素の後ろから数えて A 番目おき、、など
要素:nth-last-of-type(引数)兄弟要素タイプの後ろから数えて A 番目の
兄弟要素タイプの後ろから数えて A 番目おき、、など
要素:nth-of-type(引数)兄弟要素タイプの A 番目
兄弟要素タイプの A 個番目おき、、など
要素:only-child兄弟要素が無い要素
要素:only-of-type同じタイプの兄弟要素がない要素
要素:read-only読み取り専用の要素
要素:read-write読み書き可能な要素
要素:required入力必須の要素
:rootルート要素。 HTML では <html> がルート要素
要素:targetリンクの URL に指定した id と一致する id 値を持つ要素
要素:visited訪問済みのリンク

目次に戻る

CSS : 属性セレクターのサンプル
セレクターターゲット
要素[属性名]特定の属性を持つ要素
要素[属性名="値"]指定した値と属性を持つ要素
要素[属性名~="値"]空白区切りの値が複数あり、その中の一つが属性名で指定した値と一致する要素
要素[属性名|="値"]ハイフン ( - ) 区切りの値が複数含まれ、その中の一つが属性名で指定した値の文字列で始まる要素 (一般的には lang 属性で使用される)
要素[属性名^="値"]属性の値が指定した文字列で始まる要素
要素[属性名$="値"]属性の値が指定した文字列で終わる要素
要素[属性名*="値"]属性の値の中で指定した値の文字列を含む要素

目次に戻る

CSS: 疑似要素のサンプル
セレクターターゲット
要素::first-lineブロックレベル要素の最初の一行目を疑似的な要素で囲む
要素::first-letterブロックレベル要素の最初の一行目かつ最初の一文字を疑似的な要素で囲む
要素::before要素内の一番先頭に疑似的な要素を追加する
要素::after要素内の最後尾に疑似的な要素を追加する
CSS3 では 疑似クラス と 疑似要素 の区別に、( :: ) 二重コロン付きが導入された。

目次に戻る

jQuery セレクター

ここからは jQuery で使われるセレクターのサンプルを紹介していきます。 CSS のセレクターと重複するものもありますが、jQuery でしか使えないものもあります。

jQ : 属性セレクターのサンプル
セレクターターゲット
要素[属性名]特定の属性を持つ要素
要素[属性名="値"]指定した属性と値を持つ要素
要素[属性名!="値"]指定した属性に指定した値をもたない要素
要素[属性名^="値"]属性の値が指定した文字列で始まる要素
要素[属性名$="値"]属性の値が指定した文字列で終わる要素
要素[属性名*="値"]属性の値の中で、指定した値の文字列を含む要素
要素[属性名~="値"]空白区切りの値が複数あり、その中の一つが属性名で指定した値と一致する要素
要素[属性名|="値"]ハイフン(-)区切りの値が複数含まれ、その中の一つが属性名で指定した値の文字列で始まる要素

目次に戻る

jQ : 基本フィルターのサンプル
セレクターターゲット
:rootルート要素。 HTML では <html> がルート要素
要素:header見出し要素
要素:lang()lang 属性の (値) に指定した言語の要素
要素:targetリンクをアクティブにした時、移動先に適用
要素:animatedアニメーション中の要素
要素:first 最初の要素
要素:last最後の要素
要素:even偶数番目の要素
要素:odd偶数番目の要素
要素:eq(n)0から数えた (n) 番目の要素
要素:gt(n)0から数えた (n) 番目以前の要素は含まずに参照
要素:lt(n)0から数えた (n) 番目以降の要素は含まずに参照
要素:not([属性])属性をもたない要素

目次に戻る

jQ : 子要素フィルターのサンプル
セレクターターゲット
要素:first-child兄弟要素の最初の要素
要素:first-of-type兄弟要素グループの中の一番最初の要素
要素:last-child兄弟要素の最後の要素
要素:last-of-type兄弟要素グループの中の一番最後の要素
要素:only-child兄弟要素の無い要素
要素:only-of-type同じ兄弟要素でない要素
要素:nth-child(A)兄弟要素グループの A 番目の要素
要素:nth-child(An)兄弟要素グループの A 個おきの要素
要素:nth-child(An+B)兄弟要素グループの B 番目の要素から A 個おきの要素
要素:nth-of-type(A)兄弟要素グループの A 番目の要素
要素:nth-of-type(An)兄弟要素グループの A 個おきの要素
要素:nth-of-type(An+B)兄弟要素グループの B 番目の要素から A 個おきの要素
要素:nth-last-child(An)兄弟要素グループの中の後ろから数えて A 個おきの要素
要素:nth-lastof-type(An)兄弟要素グループの中の後ろから数えて A 個おきの要素

目次に戻る

jQ : コンテンツフィルターのサンプル
セレクターターゲット
要素:contains('text')text 内の文字列を含む要素 ( 大文字小文字の区別あり )
要素:empty内包コンテンツをもたない要素
親要素:has(子要素)子要素を持つ親要素
要素:parentテキストや要素を内包している要素

目次に戻る

jQ : フォーム関連フィルターのサンプル
セレクターターゲット
:checkedチェックされた要素
:selsected選択された要素
:disabled無効なフォーム要素
:enabled有効なフォーム要素
:focusフォーカスされている要素
:buttoninput要素button型
:checkboxinput要素checkbox型
:fileinput要素file型
:imageinput要素image型
:inputinput要素
:passwordinput要素password型
:radioinput要素radio型
:resetinput要素reset型
:submitinput要素submit型
:textinput要素text型

目次に戻る

jQ : 可視性フィルターのサンプル
セレクターターゲット
:hidden非表示要素
:visible表示要素

目次に戻る