CSS3 属性を使った指定 - Three.jsを使って、作ってみた

今回は、CSS3の属性を使った指定について書きます。

CSS3では、セレクタに属性の指定ができるらしいので、その使い方を書いていきます。

ちなみに、セレクタというのは、「{}」の前にあるやつの事です。

h1 { color:blue; }

↑このコードで言うと、「h1」がセレクタです。

あと、属性は、↓のコードでいうと「href」のことです。

<a href="https://www.google.co.jp/">

属性は他にも「id」,「class」,「title」などがあります。

この辺をもっと詳しく知りたい方は、こちら

では、本題に入ります。

セレクタに属性の指定する方法は、セレクタの後ろに「 [] 」をつけます。
こんな感じに↓

a[href="http://www.yahoo.co.jp/"] { color: green;}

実際のプログラムで使うと、こうなります。

<!DOCTYPE html>
<html lang="ja">
<head>
	<meta charset="utf-8">
	<title>css3</title>
	<style>
		a[href="http://www.yahoo.co.jp/"] {
			color: green;
		}
	</style>
</head>
<body>
		<ul>
			<li><a href="https://www.google.co.jp/">ぐーぐる</a></li>
			<li><a href="http://www.yahoo.co.jp/">やふー</a></li>
			<li><a href="http://www.apple.com/jp/">りんご</a></li>
		</ul>
</body>
</html>

実行結果
f:id:gupuru:20140324214912p:plain

「href="http://www.yahoo.co.jp/"」だけ緑色になってます。

上の使い方以外に、他にも使い方があります。

「^」をつけると、部分一致になります。

a[href^="https"] { color: red; }

この場合ですと、「https」から始まるものを赤色に指定します。

「a[href^=」を使ったプログラム↓

<!DOCTYPE html>
<html lang="ja">
<head>
	<meta charset="utf-8">
	<title>css3</title>
	<style>
		a[href^="https"] {
			color: red;
		}

	</style>
</head>
<body>
		<ul>
			<li><a href="https://www.google.co.jp/">ぐーぐる</a></li>
			<li><a href="http://www.yahoo.co.jp/">やふー</a></li>
			<li><a href="http://www.apple.com/jp/">りんご</a></li>
                       	<li><a href="https://twitter.com/">ついったー</a></li>
		</ul>
</body>
</html>

実行結果
f:id:gupuru:20140324215459p:plain
「https」から始まっているものだけだが、赤色に変わっています。

「$」というものもあります。

こちらも部分一致です。

a[href$="jp/"] {color: red;}

「jp/」で、終わるものを指定します。

「*」というものもあります。

こちらは、含まれているものを指定します。

	a[href*="com"] {color: red;}

この場合では、「com」が含まれているものを指定できます。

まとめますと・・・

「^」・・・〜で始まるもの
「$」・・・〜で終わるもの
「*」・・・〜が含まれるもの

参考サイト
意外と知らない!?CSSセレクタ20個のおさらい｜Webpark
スタイルシート［CSS］/CSSの基本/属性を使った指定 - TAG index Webサイト