at 8 AM, JP.CSS3 Reference. - Study at 8am.

スタイルシートの最新仕様 'CSS3' について学習します。

Selectors Level 3

指定した属性の要素を選択します。

Contents:

本家のサイトで勉強する


E[foo]

指定した属性が存在する要素を選択します(属性値は問いません)。

Example 1-1:

data-name属性が指定されているbutton要素のスタイルを変更します。

Demo: 結果を別のタブで表示

Code:

HTML
<button type="button" data-name="fukui" class="btn btn-default">福井</button>
<button type="button" data-name="shin-fukui" class="btn btn-default">新福井</button>
<button type="button" data-name="fukui-guchi" class="btn btn-default">福井口</button>
<button type="button" data-name="echizen-kaihotsu" class="btn btn-default">越前開発</button>
<button type="button" data-name="echizenshinbo" class="btn btn-default">越前新保</button>
<button type="button" data-name="oiwakeguchi" class="btn btn-default">追分口</button>
<button type="button" data-name="higashifujishima" class="btn btn-default">東藤島</button>
<button type="button" data-name="echizen-shimabashi" class="btn btn-default">越前島橋</button>
<button type="button" data-name="kannonmachi" class="btn btn-default">観音町</button>
<button type="button" data-name="matsuoka" class="btn btn-default">松岡</button>
<button type="button" data-name="shiizakai" class="btn btn-default">志比堺</button>
<button type="button" data-name="eiheijiguchi" class="btn btn-default">永平寺口</button>
CSS
button[data-name] {
    color:red;
}

E[foo="bar"]

指定した属性値と一致する要素を選択します。

Example 2-1:

data-name属性が"echizenshinbo"のbutton要素のみスタイルを変更します。

Demo: 結果を別のタブで表示

Code:

HTML
<button type="button" data-name="fukui" class="btn btn-default">福井</button>
<button type="button" data-name="shin-fukui" class="btn btn-default">新福井</button>
<button type="button" data-name="fukui-guchi" class="btn btn-default">福井口</button>
<button type="button" data-name="echizen-kaihotsu" class="btn btn-default">越前開発</button>
<button type="button" data-name="echizenshinbo" class="btn btn-default">越前新保</button>
<button type="button" data-name="oiwakeguchi" class="btn btn-default">追分口</button>
<button type="button" data-name="higashifujishima" class="btn btn-default">東藤島</button>
<button type="button" data-name="echizen-shimabashi" class="btn btn-default">越前島橋</button>
<button type="button" data-name="kannonmachi" class="btn btn-default">観音町</button>
<button type="button" data-name="matsuoka" class="btn btn-default">松岡</button>
<button type="button" data-name="shiizakai" class="btn btn-default">志比堺</button>
<button type="button" data-name="eiheijiguchi" class="btn btn-default">永平寺口</button>
CSS
button[data-name=echizenshinbo] {
    color:red;
}

E[foo~="bar"]

属性値がスペースで区切られた複数の値の時に、そのうちの1つが一致する要素を選択します。


E[foo|="en"]

lang属性がen-USのように[言語コード + 国コード]で指定されている場合に、言語コードの部分のみを参照して選択する時に役に立つセレクタです。

Example 4-1:

lang属性に"ja-*"(日本語)が指定されているli要素のみスタイルを変更します。

Demo: 結果を別のタブで表示

Code:

HTML
<ul class="list-group">
	<li lang="en-US" class="list-group-item">Welcome</li>
	<li lang="nn-NO" class="list-group-item">Velkommen</li>
	<li lang="nl-NL" class="list-group-item">Welkom</li>
	<li lang="zh-TW" class="list-group-item">歡迎</li>
	<li lang="fr-FR" class="list-group-item">Bienvenue</li>
	<li lang="de-DE" class="list-group-item">Willkommen</li>
	<li lang="ja-JP" class="list-group-item">ようこそ</li>
	<li lang="it-IT" class="list-group-item">Benvenuto</li>
</ul>
CSS
li[lang|="ja"] {
    background-color:pink;
}