属性セレクタ ※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>
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>