web-dev-qa-db-ja.com

別の要素の前に来る要素を選択するためのCSSセレクター？

私は自分のウェブサイトのログインページで作業しており、テキストボックスにフォーカスが移ったときに入力ボックスbeforeに来るラベルを太字にしたいと思います。現在、次のマークアップがあります。

<label for="username">Username:</label>
<input type="textbox" id="username" />

<label for="password">Password:</label>
<input type="textbox" id="password" />

隣接するセレクターを使用してラベルを選択できますafterテキストボックスですが、その前の要素を選択できません。このCSSセレクタールールを使用できますが、その後にラベルを選択するだけなので、ユーザー名テキストボックスにフォーカスが移ると、パスワードラベルが太字になります。

input:focus + label {font-weight: bold}

この作品を作るためにできることはありますか？ JavaScriptを使用して簡単にこれを行うことができることは知っていますが、可能であれば純粋にCSSベースのソリューションを使用したいと思います。それを行う方法がわかりません。

csscss-selectors
64
Dan Herbert

inputがlabelの前にある場合は、「隣接する兄弟セレクター」を使用できます。 inputの前にlabelを置き、labelの前にinputを置くようにレイアウトを変更します。次に例を示します。

<head runat="server">
    <title></title>
    <style type="text/css">
    input:focus + label {font-weight: bold}
    </style>
</head>
<body>
    <form id="form1" runat="server">
    <div style="direction:rtl">
        <input type="text" id="username" />
        <label for="username">Username:</label>
    </div>
    <div style="direction:rtl">
        <input type="password" id="password" />
        <label for="password">Password:</label>
    </div>
    </form>
</body>

（それは一種のハックです、私は個人的にjavascriptを使用してこれを行います）

input:focus + label {font-weight: bold}
<form id="form1" runat="server">
  <div style="direction:rtl">
    <input type="text" id="username" />
    <label for="username">Username:</label>
  </div>
  <div style="direction:rtl">
    <input type="password" id="password" />
    <label for="password">Password:</label>
  </div>
</form>
24
Matt Brunell

CSS Selectors 4 Spec は、!を使用してセレクターの「サブジェクト」を定義するための構文を提供します。 2016年初頭の時点で、これはどのブラウザでも使用できません。ブラウザーがこの構文を実装したら、純粋なCSSを使用してこれを行う正しい方法になるため、これを含めています。

質問のマークアップを考える

<label for="username">Username:</label>
<input type="textbox" id="username" />

<label for="password">Password:</label>
<input type="textbox" id="password" />

このCSSはトリックを行います。

label:has(+ input:focus) {font-weight: bold}

もちろん、これはブラウザーが実際にサブジェクトセレクターを実装し、この構文が:focus擬似クラスでどのように機能するかに関連するバグがないことを前提としています。

36
Dan Herbert

CSSを使用して以前の要素を提供するセレクタはありません。

目的を処理するには、javascriptを使用する必要があります。

8
JayTee

このセレクターを使用します。

label[for=username]
{
font-weight: bold
}

これにより、属性「for」に値「username」を持つラベルが選択されます。

5
user434917

入力要素を右にフローティングすると、direction：rtlで取得するラベルテキスト内の「ユーザー名」と「：」の順序を変更せずに、正しい要素の順序を実現します。

<style type="text/css">
    form {text-align: right;}
    input:focus + label {font-weight: bold}
    input {float:right; clear:right;}
</style>
<form>
    <div>
        <input type="text" id="username" />
        <label for="username">Username:</label>
    </div>
    <div>
        <input type="password" id="password" />
        <label for="password">Password:</label>
    </div>
</form>
5
Ole Helgesen