SCSSのスタイルの当て方

Question

前提・実現したいこと

scssを使ってスタイルあてています。
.maiの中に &_title と &_content があるのですがこれはclassNameがmainとアンダーバーで繋がっている時に適応されるという認識であっているでしょうか？
また年齢の下記のdivだけ丸くしたいのですがどうやってやればいいでしょうか？
知識ある方教えてくださると有り難いです。よろおしくお願いいたします。

         <div class="main_content">
           <p>21</p>
         </div>

該当のソースコード

      <div class="main">
        <p class="main_title">名前</p>
        <div class="main_content">
          <p>太郎</p>
        </div>
      </div>
　　　 <div class="main">
         <p class="age">年齢</p>
         <div class="main_content">
           <p>21</p>
         </div>
      </div>
    　<div class="main">
       <p class="hobby">趣味</p>
       <div class="main_content">
         <p>サッカー</p>
       </div>
    </div>

============================
scss

.main{
  padding: 8px 0px;
  margin: 0 24px;
  &_title {
    font-style: normal;
    font-weight: 600;
    font-size: 10px;
    color: #525e6d;
    margin-bottom: 8px;
  }
  &_content {
    background: #f0f2f5;
    border-radius: 4px;
    padding: 8px;
    font-style: normal;
    font-size: 15px;
    color: #4d4452;
  }
}

Answer 1

classNameがmainとアンダーバーで繋がっている時に適応されるという認識であっているでしょうか？

OKです！scssの機能です。

年齢の下記のdivだけ丸くしたい

次のように「隣接セレクタ」を使えばできるでしょう。

.age + div {
    border-radius: 4px;
}

ちなみにこれはCSS元々の機能です。
隣接兄弟結合子 - CSS: カスケーディングスタイルシート | MDN

Comments

[kakedashidesu]

ありがとうございます！！
Vue.js使っているところでも同じようなスタイルの当て方で困っているのですがそちらは違う質問として投稿します。
とても勉強になりました！！！ありがとうございます

[kakedashidesu]

すいません age + div {}　というのは age に divのスタイルを適応させるということでしょうか？
divに他のスタイルがあった場合どうなるのでしょうか？