CSS のグループ化とネスト


CSS グループ化およびネストされたセレクター

グループ化されたセレクター

スタイルシートには同じスタイルの要素が多数あります。 

h1
{
color:green;
}
h2
{
color:green;
}
p
{
color:green;
}

コードを最小限に抑えるには、グループ化されたセレクターを使用できます。

各セレクターはカンマで区切ります。

以下の例では、上記のコードにグループ化されたセレクターを使用します。

Instance

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title> 
<style>
h1,h2,p
{
	color:green;
}
</style>
</head>

<body>
<h1>Hello World!</h1>
<h2>Smaller heading!</h2>
<p>This is a paragraph.</p>
</body>
</html>

Run Instance»

[Run Instance] ボタンをクリックして、オンライン インスタンス

ネストされたセレクター

セレクター内でセレクターのスタイルを設定するのに適している可能性があります。

次の例では、3 つのスタイルが設定されています:

  • p{ }: すべての p 要素のスタイルを指定します

  • .marked{ }: class="marked" を持つすべての要素のスタイルを指定します

  • .marked p{ }: class="marked" 要素内のすべての p 要素のスタイルを指定します。

  • p.marked{ }: class="marked" を使用して、すべての p 要素のスタイルを指定します。

インスタンス

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title> 
<style>
p
{
	color:blue;
	text-align:center;
}
.marked
{
	background-color:red;
}
.marked p
{
	color:white;
}
</style>
</head>

<body>
<p>This paragraph has blue text, and is center aligned.</p>
<div class="marked">
<p>This paragraph has not blue text.</p>
</div>
<p>p elements inside a "marked" classed element keeps the alignment style, but has a different text color.</p>
</body>
</html>

インスタンスの実行 »

「インスタンスの実行」ボタンをクリックしてオンラインインスタンスを表示します