title: Using SCSS, How can I give CSS style to a specific element among the elements with the same node position?
body: <p>First, please check my code.</p>
  <pre class="lang-js prettyprint-override"><code>      &lt;div className={styles.settingInfo}&gt;
          &lt;header&gt;
            &lt;h1&gt;User ID&lt;/h1&gt;
            &lt;p&gt;this is for user ID&lt;/p&gt;
  
            &lt;h1&gt;Username&lt;/h1&gt;
            &lt;p&gt;this is for username&lt;/p&gt;
          &lt;/header&gt;
          &lt;div&gt;
            &lt;button type='button'&gt;change&lt;/button&gt;
          &lt;/div&gt;
        &lt;/div&gt;
  </code></pre>
  <p>With this code, what I'm trying to do is <strong>giving (h1)username(/h1) tag a margin-top:10px without giving className.</strong></p>
  <pre class="lang-css prettyprint-override"><code>.settingInfo {
    @include flexFullWidth;
    height: 40%;
  
    header {
      @include headerStyle;
  
      h1 {
        color: colors.$BIG_TITLE;
        letter-spacing: 1px;
      }
    }
  
    div {
      width: 35%;
      padding-top: 20px;
      border: 1px solid red;
    }
  }
  </code></pre>
  <p>I set the SCSS file like this, and was finding out how can I give a specific h1 tag a style without using className.</p>
  <p>I know we can easily solve the problem giving just a className, but just want to figure out how can work on this differently. Thank you!</p>