class="border clear"で複数指定した名前は、どう表現すればいいでしょうか？

Question

例えば、

<div class="border clear">
<p>あいうえお</p>
</div> 

で、中の<p>タグを指定したい時は、

.border clear p{
margin-top:10px;
}

と打てばいいのでしょうか？
上記でうまくいかなかったので、どう指定すれば、いいか検索のヒントだけでも教えてください。
検索ワードが思い浮かびませんでした。

Answer 1

<div class="border clear">
<p>あいうえお</p>
</div> 

まず、divの開始タグが閉じられていないのでチェックしておいてもらえると。

CSSの書き方は、下記になります、

.border.clear p{
	margin-top:10px;
}

セレクタに空白が入ると、子要素を指定してしまいます。
「.border clear p」だと「.border」クラスの中の「clear」タグの中の「p」タグになってしまいます。

また、

.border p{
	margin-top:10px;
}

でも

.clear p{
	margin-top:10px;
}

でも可能です。

すごく厳密にやりたい時だけ、「.border.clear」と連結させればOKです。

Answer 2

こうですね

.border.clear p ｛
margin-top:10px;
｝