Search

基本属性セレクタ

  1. 属性セレクタ ※CSS3更新〔指定した属性名および属性値を持つ要素にスタイルを適用。〕
  2. E[foo]〔foo属性を有するE要素〕
  3. E[foo="bar"]〔foo属性の値が"bar"のE要素〕
  4. E[foo~="bar"]〔foo属性の値に"bar"が含まれるE要素〕
  5. E[foo^="bar"]〔foo属性の値が"bar"で始まるE要素〕
  6. E[foo$="bar"]〔foo属性の値が"bar"で終わるE要素〕
  7. E[foo*="bar"]〔foo属性の値に"bar"という部分文字列が含まれているE要素〕
  8. E[foo|="en"]〔foo属性の値が「en」で始まるハイフン区切りの値があるE要素〕

属性セレクタ ※CSS3更新
指定した属性名および属性値を持つ要素にスタイルを適用。

unknown

指定した属性名と属性値の条件にマッチする要素にのみスタイルを適用することができます。
セレクタと[の間に半角スペースなどを含めないように注意してください。 

○　a[href] { ... }
×　a [href] { ... }

IE6未対応。

E[foo]
foo属性を有するE要素

unknown

E[foo]

属性値に関係なく、要素（E）に属性名（foo）が指定されている場合に適用されます。 

<style type="text/css">
a.lnk { color:red; }
a.lnk[title] { color:blue; }
</style>

<p><a class="lnk" href="http://google.co.jp/" title="Google">Google検索</a></p>
<p><a class="lnk" href="http://www.yahoo.co.jp/">Yahoo検索</a></p>

Google検索

Yahoo検索

E[foo="bar"]
foo属性の値が"bar"のE要素

unknown

E[foo="bar"]

要素（E）に属性名（foo）が指定されており、その属性値が「bar」の場合に適用されます。 属性値には日本語も指定可能です。 

<style type="text/css">
/* extrenalクラスが指定されているa要素 */
a[class="external"] { color:blue; background:transparent url(/content/img/icon/gray/external.gif) no-repeat right 2px; padding-right:20px; }
</style>

<p><a class="external" href="http://google.co.jp/" title="Google">Google検索</a></p>

Google検索

<style type="text/css">
input[value="back"]{ border:1px solid #ccc; background-color:yellow; }
input[value="進む"]{ border:1px solid #ccc; background-color:orange; }
</style>

<!-- 戻るボタン -->
<input type="button" value="back" onclick="history.back()" />
<!-- 進むボタン -->
<input type="button" value="進む" onclick="history.forward()" />

E[foo~="bar"]
foo属性の値に"bar"が含まれるE要素

unknown

E[foo~="bar"]

属性値の値が、半角スペース区切りで複数指定されている場合に条件している際に使用します。 要素（E）に属性名（foo）が指定されており、数指定されている属性値の中に「bar」がある場合に適用されます。 

<style type="text/css">
#d_foobar2,
#d_foobar2 li {
	list-style:none;
}
#d_foobar2 a {
	background-color:#fff;
	background-position:right center;
	background-repeat:no-repeat;
	padding-right:20px;
}

#d_foobar2 a[class~="search"] { background-image: url(/content/img/icon/gray/external.gif); }
#d_foobar2 a.link { text-decoration:none; color:blue; }
</style>

<ul id="d_foobar2">
	<li><a class="link search" href="http://www.bing.com/" title="Bing">Bing検索</a></li>
	<li><a class="link search" href="http://google.co.jp/" title="Google">Google検索</a></li>
	<li><a class="link" href="index.php">当サイトのトップページへ</a></li>
</ul>

E[foo^="bar"]
foo属性の値が"bar"で始まるE要素

unknown

E[foo^="bar"]

要素（E）に属性名（foo）が指定されており、属性値の先頭が「bar」で始まる場合に適用されます。 

<style type="text/css">
#d_foobar3,
#d_foobar3 li {
	list-style:none;
}
#d_foobar3 a {
	background-color:#fff;
	background-position:right center;
	background-repeat:no-repeat;
	padding-right:20px;
}

#d_foobar3 a[href^="http"] { background-image: url(/content/img/icon/gray/external.gif); }
</style>

<ul id="d_foobar3">
	<li><a href="http://www.bing.com/" title="Bing">Bing検索</a></li>
	<li><a href="http://google.co.jp/" title="Google">Google検索</a></li>
	<li><a href="index.php">当サイトのトップページへ</a></li>
</ul>

E[foo$="bar"]
foo属性の値が"bar"で終わるE要素

unknown

E[foo$="bar"]

要素（E）に属性名（foo）が指定されており、その属性値の末尾が「bar」で終わる場合に適用されます。 

<style type="text/css">
#d_foobar4,
#d_foobar4 li {
	list-style:none;
}
#d_foobar4 a {
	background-color:#fff;
	background-position:left center;
	background-repeat:no-repeat;
	padding-left:20px;
}
#d_foobar4 a[href$=".rdf"] { background-image:url(/content/img/icon/file/icon_feed.gif); }

#d_foobar4 a[href$=".png"],
#d_foobar4 a[href$=".jpg"],
#d_foobar4 a[href$=".gif"] { background-image:url(/content/img/icon/file/icon_image.gif); }

#d_foobar4 a[href$=".xml"] { background-image:url(/content/img/icon/file/icon_xml.gif); }
#d_foobar4 a[href$=".pdf"] { background-image:url(/content/img/icon/file/icon_pdf.gif); }
#d_foobar4 a[href$=".xls"] { background-image:url(/content/img/icon/file/icon_xls.gif); }
#d_foobar4 a[href$=".zip"] { background-image:url(/content/img/icon/file/icon_zip.gif); }
</style>

<ul id="d_foobar4">
	<li><a href="/content/demo/sample.xml">XMLファイル</a></li>
	<li><a href="/content/demo/sample.rdf">RDFファイル</a></li>
	<li><a href="/content/demo/sample.jpg">JPGファイル</a></li>
	<li><a href="/content/demo/sample.gif">GIFファイル</a></li>
	<li><a href="/content/demo/sample.pdf">PDFファイル</a></li>
	<li><a href="/content/demo/sample.xls">Excelファイル</a></li>
	<li><a href="/content/demo/sample.zip">ZIPファイル</a></li>
</ul>

E[foo*="bar"]
foo属性の値に"bar"という部分文字列が含まれているE要素

unknown

E[foo*="bar"]

要素（E）に属性名（foo）が指定されており、その属性値の文字列内に「bar」が含まれている場合に適用されます。 

<style type="text/css">
#foobar5,
#foobar5 li {
	list-style:none;
}
#foobar5 a {
	background-color:#fff;
	background-position:left center;
	background-repeat:no-repeat;
	padding-left:20px;
}

#foobar5 a[class*="search"] { background-image:url(/content/img/icon/color/search.gif); }
</style>

<ul id="foobar5">
	<li><a class="bingsearch" href="http://www.bing.com/" title="Bing">Bing検索</a></li>
	<li><a class="googlesearch" href="http://google.co.jp/" title="Google">Google検索</a></li>
	<li><a class="mylink" href="index.php">当サイトのトップページへ</a></li>
</ul>

E[foo|="en"]
foo属性の値が「en」で始まるハイフン区切りの値があるE要素

unknown

E[foo|="bar"]

要素に指定した属性名が指定されており、なおかつその属性名のハイフン区切りで指定されている属性値に、指定した属性値が前方一致する場合に適用。 

<style type="text/css">
a.sample-pdf { background-image:url(/content/img/icon/file/icon_pdf.gif); }
a.sample-xls { background-image:url(/content/img/icon/file/icon_xls.gif); }
a[class|="sample"]{ border:1px solid #ccc; padding:5px 10px; background-color:#f7f7f7; background-position:left center; background-repeat:no-repeat; padding-left:20px; }
a[class|="sample"]:hover{ background-color:#ffffcc; }
</style>

<p>
	<a href="/content/demo/sample.pdf" class="sample-pdf">PDFファイルのダウンロード</a>　
	<a href="/content/demo/sample.xls" class="sample-xls">Excelファイルのダウンロード</a>
</p>

PDFファイルのダウンロード　 Excelファイルのダウンロード

関連コンテンツ

Q. このサイトの情報はお役に立ちましたでしょうか？

投票する 投票結果を見る

管理人に【web拍手】を送るweb拍手（1行メッセージも送れます♪）

TOP / ご利用上の注意点 / リンクについて / RSS

Valid: HTML検証, CSS検証, RSS検証

Thanks: Material Design 420 free icons

©2024 PHP & JavaScript Room All Rights Reserved.

pagetop

polarized women