cssでクラス名を複数指定したい

Question

##質問
下記コードの<p class="pickup_detail">、<h3 class="product_h3">、 <p class="price">をＣＳＳにまとめて記述し、３つの要素全てに文字色などを指定していきたいと考えています。

本来であれば、３つの要素に同じクラス名を与えたら解決すると思うのですが、
まとめて記述する方法が知りたいです。

<div class="pickup_content">
  <p class="pickup_detail">{{$pickup->detail}}</p>
  <div class="product_parts">
    <h3 class="product_h3">{{$pickup->product_name}}</h3>
    <p class="price">{{$pickup->price}}</p>
  </div>
</div>

##試したこと
下記コードの様に半角スペースを開けて記述したり、カンマを入れてみたのですが意図した挙動が起こりませんでした。

.pickup_detail .product_h3 .price{

}

##補足
レベルの低い質問なのですが、調べてもなかなか解決策が出てこず今回質問させていただきました。
今回の質問に加えて、もし可能であれば皆さんがわからないことを検索するときに気をつけていることも教えていただけないでしょうか？

Answer 1

複数のクラスにまとめて指定する場合はカンマ(,)で区切ります。

.pickup_detail,.product_h3,.price{

}

参考：セレクタの種類
http://www.htmq.com/csskihon/005.shtml
複数のセレクタ　の部分ですね。
higa_yomityuさんの最初のcssのように半角スペースで区切る場合は子孫セレクタと呼ばれる形になります。
こちらもよく使われる形式なので覚えておくといいと思います。

Comments

[higa_yomityu]

子孫セレクタ初めて聞いので、ちゃんと勉強します。
使いこなせるようにします。
めちゃくちゃ良い情報ありがとうございます！！

Answer 2

下記コードの様に半角スペースを開けて記述したり、カンマを入れてみたのですが意図した挙動が起こりませんでした。

カンマ区切りは有効です。

.pickup_detail, .product_h3, .price{
  color: green;
}

ただし、詳細度のより高いCSSがあるとそちらが優先されます。

Comments

[maisumakun]

スペース区切りだと、「.pickup_detailの中にある.product_h3の中にある.price」という意味になります。