Caution
お使いのブラウザはJavaScriptが実行できない状態になっております。
当サイトはWebプログラミングの情報サイトの為、
JavaScriptが実行できない環境では正しいコンテンツが提供出来ません。
JavaScriptが実行可能な状態でご閲覧頂くようお願い申し上げます。
- トップページ
- CSSプロパティ辞典
- 【CSSセレクタ】E[foo^="bar"]
【CSSセレクタ】E[foo^="bar"]
『セレクタ[属性名^=値]』で、特定の属性と値の最初の文字列が一致した要素のみに適用できます。IE6以下では動きません。
値の最初の文字列というのは、例えば『function』の場合だと『fu』や『func』や『funct』などに一致する、というイメージになります。
サンプルコード
p[title^=hoge] { color: red;} /* title属性を持ち、値の最初の文字列が『hoge』に完全一致しているp要素に適用されます。 */
p[title^=hoge1] { color: blue;} /* title属性を持ち、値の最初の文字列が『hoge1』に完全一致しているp要素全てに適用されます。 */
[title^=初音ミク] { color: green;} /* 実は日本語も使えます。 */
ブラウザでの表示結果
p[title^=hoge] { color: red;} /* title属性を持ち、値の最初の文字列が『hoge』に完全一致しているp要素に適用されます。 */
p[title^=hoge1] { color: blue;} /* title属性を持ち、値の最初の文字列が『hoge1』に完全一致しているp要素全てに適用されます。 */
[title^=初音ミク] { color: green;} /* 実は日本語も使えます。 */
<p title="hoge">ここはp要素です。title名に『hoge』と指定しています。</p> <p title="hoge1hoge fuga">ここはp要素です。title名に『hoge1hoge fuga』と指定しています。</p> <p title="初音ミクとIA">ここはp要素です。title属性に『初音ミクとIA』と指定しています。</p>
対応ブラウザ
| IE6 | IE7 | IE8 | IE9 | IE10 | IE11 | Safari | Chrome | Firefox | Opera |
|---|---|---|---|---|---|---|---|---|---|
| iPhone Safari | Android2系 標準ブラウザ | Android4系 標準ブラウザ |
|---|---|---|
記事の間違いや著作権の侵害等ございましたらお手数ですがこちらまでご連絡頂ければ幸いです。
