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

Question

どう検索していいか分からなかったので質問します。
CSSやCSS3どちらでも構いませんが、

#wrapper img,#wrapper p{
margin-top:30px;
}

この複数のタグをスマートに書く方法は存在しますか？
存在する場合、何と検索すればいいか教えてください。

具体的に書くと例えば、
#wrapper img&pという書き方で＝#wrapper img,#wrapper pと同じ意味になる書き方です。

Answer 1

:matches()でできるようになりますが、まだ実装がありません。
:any
https://developer.mozilla.org/ja/docs/Web/CSS/:any
https://caniuse.com/#feat=css-matches-pseudo

SCSSなら入れ子のように書けます。

#wapper {
  img, p {
    margin-top: 30px;
  }
}

Comments

[x_x]

wapper から wrapper になったようですが追いついていません。読みかえてください。

[EBOOT.PBP]

ありがとうございます。
SCSSについて調べましたが、ファイルの拡張子を.scssにしなければならないみたいですね。
今はSCSSが主流と書いていますが、正直初心者が手を出していいものか疑問です。

Answer 2

直接CSSで書けるわけではないですが、lessやScssでは、定義のネストが行なえます（どこかでCSSにコンパイルする必要はあります）。

// lessでもscssでも通る

#wapper{
  img, p{
    margin-top:30px;
  }
}

Comments

[maisumakun]

本題ではないですが、元のコードの中括弧が全角になっていました。

[EBOOT.PBP]

指摘ありがとうございます。
修正しました。