cssのidを複数指定できるようにしたい

実現したいこと

#user_login {
  display: inline-block;
  width: 700px;
  height: 40px;
  transition: all 0.1s ease-out;
  以下略
}

#user_login + label {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  height: 40px;
  width: 120px;
  line-height: 40px;
  color: white;
}

#user_login:focus + label {
  transform: translateY(-120%) translateX(0%);
}

#user_login:focus {
  padding: 10px;
  transition: all 0.3s ease-out;
  以下略
}

#user_pass {
  display: inline-block;
  width: 700px;
  以下略
}

#user_pass + label {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  height: 40px;
  width: 120px;
  line-height: 40px;
   以下略
}

#user_pass:focus + label {
  transform: translateY(-120%) translateX(0%);
  以下略
}

#user_pass:focus {
  padding: 10px;
  transition: all 0.3s ease-out;
  transition-delay: 0.2s;
}

このように記述しているcssで
#user_loginと#user_passがどちらも同じスタイルなので、
idの複数指定でコードを短くしたいのが実現したいことになります。
下記HTMLを載せておきます。

HTML
1<p class="text-input">
2   <input type="text" name="log" placeholder="ユーザー名またはメールアドレス" id="user_login" autocomplete="username" value="%3$s" size="20" />
3   <label for="user_login">Name</label>
4</p>
5
6<p class="text-input">
7    <input type="password" name="pwd" placeholder="パスワードを入力" id="user_pass" autocomplete="current-password" class="input" value="" size="20" />
8    <label for="user_pass">%2$s</label>
9</p>

発生している問題・エラーメッセージ

#user_login {
↓
#user_login, #user_pass {

上記のように指定するとできると思ってやってみたのですが、
思うように反映されなかったです

wordpressのプラグインの関係でidをどちらも統一することができなくて、
どなたか教えていただけますと幸いです。
よろしくお願い致します。

追記になります

#user_login, #user_pass {
  以下略
}

のように記述してみると
画像のように崩れてしまいます。

正)

誤)

HTMLの検証ツールの画像

こちらになります。

phper.k

2022/08/04 08:52

問題ないしあってるけど

tyosu

2022/08/04 09:31

追記させていただきました。画像のようにズレが生じてしまいました。。

phper.k

2022/08/04 09:45

HTML がおかしいんじゃないですかね？提示されていない部分で。

tyosu

2022/08/04 09:50

なるほどですね！ありがとうございます！みてみます！

行動規範の内容に同意します

回答1件

ベストアンサー

css
1        :where(#user_login, #user_pass) {
2            display: inline-block;
3            width: 700px;
4            height: 40px;
5            transition: all 0.1s ease-out;
6
7        }
8
9        :where(#user_login, #user_pass)+label {
10            position: absolute;
11            top: 0;
12            left: 0;
13            bottom: 0;
14            height: 40px;
15            width: 120px;
16            line-height: 40px;
17            color: white;
18        }
19
20        :where(#user_login, #user_pass):focus+label {
21            transform: translateY(-120%) translateX(0%);
22        }
23
24        :where(#user_login, #user_pass):focus {
25            padding: 10px;
26            transition: all 0.3s ease-out;
27
28        }