属性セレクタ

属性セレクタとは、特定の属性を持つ要素に適用するセレクタのことです。
※ここでは、属性名を「att」、属性値を「value」と表現しています。

E[att]（特定の属性と持つ要素に適用）

ある属性が設定されている要素だけにスタイルが適用されます。

例）p要素にtitle属性が設定されているものだけに文字色「赤」、フォントサイズ「20px」を適用する。

HTML

        <p>この段落にはtitle属性が設定されていません。</p>
        <p title="段落1">この段落にはtitle属性が設定されています。</p>
        <div><a href="#" title="リンク">リンクのタイトルを付けています。</a></div>
		<p title="段落2">この段落にはtitle属性が設定されています。</p>
    

CSS

    	<style type="text/css">
        	* {
            	margin:0;
                padding:5px;
               }
            p[title] {
            	color:red;
                font-size:20px;
               }
    	</style>
    

E[att="value"]（特定の属性（値）を持つ要素に適用）

ある要素に設定されている属性の特定の値だけにスタイルが適用されます。

例）title属性の値に「リンク」という値が指定されている要素だけに文字色「赤」、フォントサイズ「20px」、装飾なしを適用する。

HTML

    	<p>この段落にはtitle属性が設定されていません。</p>
        <p title="段落1">この段落にはtitle属性が設定されています。</p>
        <div><a href="#" title="リンク">リンクのタイトルを付けています。</a></div>
		<p title="段落2">この段落にはtitle属性が設定されています。</p>
    

CSS

    	<style type="text/css">
        	* {
            	margin:0;
                padding:5px;
               }
            p[title="リンク"] {
            	text-decoration:none;
                color:red;
                font-weight:bold;
               }
    	</style>
    

E[att^="value"]（属性値で指定した文字で始まる要素に適用）

ある属性の値が指定した文字で始まる要素だけにスタイルが適用されます。

例）p要素のtitle属性の値が「段落」で始まる要素だけに太字、背景色「薄い青紫」を適用する。

HTML

    	<p>この段落にはtitle属性が設定されていません。</p>
        <p title="段落1">この段落にはtitle属性が設定されています。</p>
        <div><a href="#" title="リンク">リンクのタイトルを付けています。</a></div>
		<p title="段落2">この段落にはtitle属性が設定されています。</p>
    

CSS

    	<style type="text/css">
        	* {
            	margin:0;
                padding:5px;
               }
            p[title^="段落"] {
            	background:#ccccff;
                font-weight:bold;
               }
    	</style>
    

E[att$="value"]（属性値で指定した文字で終わる要素に適用）

ある属性の値が指定した文字で終わる要素だけにスタイルが適用されます。

例）p要素のtitle属性の値が「2」で終わる要素だけに太字、背景色「薄い青紫」を適用する。

HTML

    	<p>この段落にはtitle属性が設定されていません。</p>
        <p title="段落1">この段落にはtitle属性が設定されています。</p>
        <div><a href="#" title="リンク">リンクのタイトルを付けています。</a></div>
		<p title="段落2">この段落にはtitle属性が設定されています。</p>
    

CSS

    	<style type="text/css">
        	* {
            	margin:0;
                padding:5px;
               }
            *[title$="2"] {
            	background:#ccccff;
                font-weight:bold;
               }
    	</style>
    

E[att*="value"]（属性値で指定した文字を含む要素に適用）

ある属性の値が指定した文字が含まれた要素だけにスタイルが適用されます。

例）属性値に「落」という文字が含まれたp要素だけに太字、背景色「薄緑」を適用する。

HTML

    	<p>この段落にはtitle属性が設定されていません。</p>
        <p title="段落1">この段落にはtitle属性が設定されています。</p>
        <div><a href="#" title="リンク">リンクのタイトルを付けています。</a></div>
		<p title="段落2">この段落にはtitle属性が設定されています。</p>
    

CSS

    	<style type="text/css">
        	* {
            	margin:0;
                padding:5px;
               }
            *[title*="落"] {
            	background:#ccff99;
                font-weight:bold;
               }
    	</style>