【CSS】実はこんなに便利！cssのセレクタ指定方法をちょっとだけ掘り起こしてみた

HTML&CSS

2012.03.06

モニターを見つめる目に優しいメガネがZoffからも出る！しかも度付きOK、フレームも選べる！気になってます。hakoishiです。

さて、今回は実は便利なcssのセレクタ指定方法をちょっとだけ掘り起こしてご紹介。
直下にある要素だけ、とかセレクタ名が部分一致したら、はたまたリンク先パスによって、とか実はかなり便利です！

特定の要素の直下の要素だけに一括でマージンを設定
特定の文言を含むセレクタ、及びその位置で対象を絞り込み指定
リンク先のパス次第でスタイルを切り分ける
特定の要素・セレクタを例外とする

特定の要素の直下の要素だけに一括でマージンを設定

#container>* {
 margin: 0 10px;
}

IE7以上対応。
親>子で、直下要素のみを対象指定。
上記例ではid="container"の直下の要素すべてにマージンが設定されます。

ユニバーサルセレクタには正直不安を感じる部分はあるのですが、ある要素の直下に並ぶ要素の種類を考えると、そんなに多くないだろう（多くても10種類くらいかな？）ということで。
右から順に処理されるので、どのみち不安ですね。
サーバー負荷の軽度なサイトでの使用に留めるなど、ご利用は計画的に。（2013/04/08 追記）

#containerの下を更にまるっと#containerInnerで囲んで、そっちにマージン設定したりせずにすみます。手間とマークアップの省エネ。

特定の文言を含むセレクタ、及びその位置で対象を絞り込み指定

div[id^="block"] { /* セレクタ名の前方一致 */
 background-color: #ddd;
}

p[class$="txt"] { /* セレクタ名の後方一致 */
 margin-left: 20px;
 color: #f00;
}

div[id*="About"] { /* セレクタ名の部分一致 */
 margin: 10px;
 border: 1px solid #f90;
}

IE7以上対応。

前方一致 ⇒ [【属性】^="【文言】"]で、【属性】が【文言】で始まる要素
後方一致 ⇒ [【属性】$="【文言】"]で、【属性】が【文言】で終わる要素
部分一致 ⇒ [【属性】*="【文言】"]で、【属性】に【文言】を含む要素

セレクタの命名規則は案件により、会社により、もしくは人により様々かと思いますが、それに乗せ易い指定方法なのでは。
例えば「block+(ページ名略称)+ナンバリング」のルールに則って、ある要素を「#blockAbout01」と命名するなら、上記の前方一致と部分一致にあてはまります。

サンプル

id="blockAbout01"内です。

id="unitAbout01"内です。

class名が「txt」で終わらないp要素。

class名が「txt」で終わるp要素。

id="unitAbout02"内です。

class名が「txt」で終わるp要素。

HTML

<div id="blockAbout01">
<h5>id="blockAbout01"内です。</h5>
<div id="unitAbout01">
<h6>id="unitAbout01"内です。</h6>
<p class="txtpr">class名が「txt」で終わらないp要素。</p>
<p class="prtxt">class名が「txt」で終わるp要素。</p>
</div>
<div id="unitAbout02">
<h6>id="unitAbout02"内です。</h6>
<p class="prtxt">class名が「txt」で終わるp要素。</p>
</div>
</div>

CSS

#more div[id^="block"] { /* id名が「block」で始まるdiv要素 */
	background-color: #ddd;
} 
#more p[class$="txt"] { /* class名が「txt」で終わるp要素 */
	margin-left: 20px !important;
	color: #f00;
}
#more div[id*="About"] { /* id名に「About」を含むdiv要素 */
	margin: 10px;
	border: 1px solid #f90;
}

リンク先のパス次第でスタイルを切り分ける

#blockLinkList a[href*="/php"] { /* パスに「/php」を含む場合 */
 background-color: #ffc;
}
#blockLinkList a[href*="/css"] { /* パスに「/css」を含む場合 */
 background-color: #fcc;
}

前項と同じ指定方法、属性セレクタを使用します。IE7以上対応。
これ、idやclass以外にも使えるんです。例えばhrefとか。文字通り「属性」セレクタというわけで。

これを利用すると、リンク先の階層によってスタイルを変える、なんてことができるわけです。
このサンプルでは、パスに「/php」「/css」が含まれる場合でスタイルを切り替えています。
パスのみで判別するので、classの付与もいりません。CMS絡む案件でも便利そう。

カテゴリによって階層を変えているならパス頭の「/(格納フォルダ名)」で切り分ける。他にも「https://」で始まる場合、「.html」「.pdf」「.xls」で終わる場合での切り分けなども考えられますね。

サンプル

<ul id="blockLinkList">
<li><a href="/category/series/php/">10日で覚えるPHPのキソ（超基礎編）</a>
</li>
<li><a href="/category/series/css/">使えるCSSテクニック Vol.01</a>
</li>
<li><a href="/category/series/css_02/">使えるCSSテクニック Vol.02</a>
</li>
<li><a href="/category/series/php_envi/">1.2.3で整えるPHP開発環境</a>
</li>
</ul>

特定の要素・セレクタを例外とする

#blockSample01>*:not(.unitTxt) { /* :not(【要素・セレクタ】)で条件に合致するものを例外とする */
 text-align: center;
}

IE9以上対応。
合致するものの方を羅列する方向はよくやりますが、こうすると逆もできます。
下記のサンプルではclass="unitTxt"の指定されている要素以外がセンタリングで表示されます。

サンプル

ここはh5です

ここは.unitTxtです。
ここは.unitTxtです。
ここは.unitTxtです。

<div id="blockSample01">

<h5>ここはh5です</h5>

<p><img src="http://dummyimage.com/150x150/869fb8/ffffff&text=dummyimg" alt="" width="150" height="150" /></p>

<p class="unitTxt">
ここは.unitTxtです。<br />
ここは.unitTxtです。<br />
ここは.unitTxtです。
</p>

</div>