[WEBデザイン] CSSセレクタの便利な使い方

みなさんCSS3のセレクタは効率的に利用できていますか?

今回は使ったら便利だけど案外知られていないCSSセレクタの使い方をデモサイトを使って見ていきましょう。

ちょっとしたことかもしれませんが、今まで何行も書いていたCSSがキュッと凝縮されるかもしれませんよ。

交互にスタイルを与える

nth-of-type(‘odd’ or ‘even’){}

下のようなメニューの背景色を交互に変えます。

HTMLソース

<ul id="menu">
	<a href=""><li>メニュー1</li></a>
	<a href=""><li>メニュー2</li></a>
	<a href=""><li>メニュー3</li></a>
	<a href=""><li>メニュー4</li></a>
	<a href=""><li>メニュー5</li></a>
</ul>

追加CSS

#menu > a:nth-of-type(odd){
	background: #555;
}

nth-of-type(odd)セレクタは指定されたタグの奇数番目の要素にだけスタイルを割り当てます。

nth-of-type(even)は反対に奇数番目の要素にスタイルを割り当てます。

あるジャンルの画像だけを表示(消去)する

img[alt*=”X”]{}

下の画像から猫の画像だけを削除します。

HTMLソース

<div class="animal-photo">
	<img src="demo/img/1-1.jpg" alt="犬 ダックス">
	<img src="demo/img/2-1.jpg" alt="ブサカワ猫">
	<img src="demo/img/1-2.jpg" alt="犬 飛ぶチワワ">
	<img src="demo/img/1-3.jpg" alt="犬 ポメラニアン">
	<img src="demo/img/2-3.jpg" alt="眠る猫">
	<img src="demo/img/2-4.jpg" alt="見つめる猫">
	<img src="demo/img/1-4.jpg" alt="犬 フレンチブルドッグ">
	<img src="demo/img/2-2.jpg" alt="怒る猫">
</div>

追加CSS

.animal-photo img[alt*="猫"]{
	display: none;
}

こちらを実行するには、あらかじめimgタグにalt属性で「犬」や「猫」などのキーワードを入れておく必要があります。

img[alt*=”猫”]とすることで、alt属性に「猫」が入っているimgタグにだけcssを割り当てることができます。

空の要素にだけ特定の文字を入れる

要素:empty::before{}

下のテーブルの中で空になっている欄に指定のテキストを入れます。

HTMLソース

<table border="3">
	<tbody>
		<tr>
			<td colspan="2">戦闘力</td>
		</tr>

		<tr>
			<td>コリスケ</td><td>2,300,000</td>
		</tr>

		<tr>
			<td>フリーザさま</td><td>530,000</td>
		</tr>

		<tr>
			<td>ザーボンさん</td><td></td>
		</tr>

		<tr>
			<td>ドドリアさん</td><td></td>
		</tr>
	</tbody>
</table>

追加CSS

td:empty::before{
	content: '不明';
}

要素:empty{}を使うことで指定された要素の中が空のタグのみにスタイルを割り当てることができます。

さらにbeforeで疑似要素のcontentを作り出してテキストを挿入しています。(beforeをafterに変えても同じ結果になります)

まとめ

CSS3のセレクタには意外と知られていない使い方が存在します。

ちょっとしたことかもしれませんが、うまく使えばCSSの記述量を減らせたり、コーディングのスピードアップにも繋がるので、早いうちにマスターしておくことをオススメします。

どのようなセレクタがあるかを見てみて、自分なりの使い方にアレンジしたら面白いと思います。

CSS3のセレクタ全42種 まとめておさらい使い方リファレンス

カテゴリーCSS

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です