Using SCSS, How can I give CSS style to a specific element among the elements with the same node pos-CodePudding

First, please check my code.

      <div className={styles.settingInfo}>
        <header>
          <h1>User ID</h1>
          <p>this is for user ID</p>

          <h1>Username</h1>
          <p>this is for username</p>
        </header>
        <div>
          <button type='button'>change</button>
        </div>
      </div>

With this code, what I'm trying to do is giving (h1)username(/h1) tag a margin-top:10px without giving className.

.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;
  }
}

I set the SCSS file like this, and was finding out how can I give a specific h1 tag a style without using className.

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!

CodePudding user response：

My suggestion is to just add a class but if you want to do this without it then you can use nth-child selector like so:

header h1:nth-child(3) {
    margin-top: 10px;
}

You can select the first h1 using nth-child(1) in the same manner.