質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
87.20%
CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

解決済

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

tyosu
tyosu

総合スコア22

CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

1回答

0リアクション

0クリップ

186閲覧

投稿2022/08/04 08:35

編集2022/08/04 09:49

実現したいこと

#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

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

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

#user_login { ↓ #user_login, #user_pass {

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

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

追記になります

#user_login, #user_pass { 以下略 }

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

正)
イメージ説明

誤)
イメージ説明

HTMLの検証ツールの画像

イメージ説明

こちらになります。

以下のような質問にはリアクションをつけましょう

  • 質問内容が明確
  • 自分も答えを知りたい
  • 質問者以外のユーザにも役立つ

リアクションが多い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

気になる質問をクリップする

クリップした質問は、後からいつでもマイページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

下記のような質問は推奨されていません。

  • 間違っている
  • 質問になっていない投稿
  • スパムや攻撃的な表現を用いた投稿

適切な質問に修正を依頼しましょう。

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

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

まだ回答がついていません

会員登録して回答してみよう

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
87.20%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問

同じタグがついた質問を見る

CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。