CSSで同じ要素の子要素を複数指定する方法

Question

HTMLで次の構造があったとします。

<div id="pr"> <p>hello</p> <b>world</b> </div>

この時<p>と<b>に対して同じスタイルを適応しようとします。

#pr p, #pr b {
color: red;
}

もう少し賢い書き方はないのでしょうか？
回答要路シクお願いいたします

Answer 1

私も同じ事を質問したのですが、完全にそうするには、SCSSしかないようです。

CSSで#wrapper img,#wrapper pというような途中までの指定タグが同じで複数タグを指定する場合のスマートな書き方はありますか？

無理矢理CSSでやるのでしたら、除外するものが少ない場合、
CSS

#pr>*:not(.jogai){
	color:red;	
}

で余計なpタグやほかのタグを除いて指定すればいいと思います。
HTML

<div id="pr"> 
  <p>hello</p>
　<p class="jogai">hi!</p>
　<b>world</b> 
  <div class="jogai">ok!</div>
  <b class="jogai">yatta!</b>
  </div> 

除外するものが多い場合は、普通にclassで指定するのが効率が良いと思います。
CSS

.iro-aka{
color:red;
}

HTML

<div id="pr"> 
  <p class="iro-aka">hello</p> 
  <b class="iro-aka">world</b> 
</div> 

もし、pタグとbタグしかなく、順番がpタグとbタグ共に一番目なら、こちらが使えると思います。
IE11しか確認してませんが、できます。
CSS

#pr>*:nth-of-type(1){
	color:red;	
}

HTML

<div id="pr"> 
  <p>hello</p> 
  <b>world</b> 
</div> 

でもあまり、効率がいいとは思いません。
参考までにどうぞ。
_(アンダーバー)はgoogleで推奨していないので-(ハイフン）に修正しました。

Answer 2

直下セレクタと全称セレクタで、ごそっと指定するというのはどうでしょうか。
賢いかというと微妙な書き方だとは思いますが…一つのアイデアとして。

#pr >* {
 color: red; 
}

Answer 3

#pr{ color:red; }

とりあえずこれで#prの中にある要素の文字は全て赤くなりますが…。

Comments

[Cf_cwd]

<div id="pr">
texttext
<p>TEXTTEXT</p>
<b>TEXTTEXT</b>
</div>
のようなパターンでtexttextの色も変わってしまうかと

Answer 4

今のところCSSではないですね。
sass（scss）を導入してみてはどうでしょうか。

http://sass-lang.com/