質問

例えば、次のようなものがあるとします。

<div class="parent">
    <input class="childInput" type="text" />
    <div class="sibling"></div>
</div>

子供がフォーカスを受けた時に、親兄弟の見た目を変えたい。このようなことを行うためのCSSトリックはありますか？

編集してください。

質問の理由は以下の通りです。

私は編集可能なテキストフィールドを必要とするAngularアプリを作成しています。クリックされるまではラベルのように見え、クリックされた時点では通常のテキスト入力のように見える必要があります。この効果を得るために :focus に基づいてテキストフィールドをスタイリングしましたが、テキストはテキスト入力の境界で切り取られてしまいます。また、ng-show, ng-hide, ng-blur, ng-keypress, ng-click を使って、ぼかし、キープレス、クリックに基づいてラベルとテキスト入力を切り替えました。ラベルの ng-click="setEdit(this, $event)" が ng-show と ng-hide で使用する edit boolean を true に変更した後、jQuery 呼び出しを使用してテキスト入力を .select() しています。しかし、ng-clickが完了するまで、すべてが$digest'dされるので、テキスト入力は再びフォーカスを失います。テキスト入力が実際にフォーカスを受けることはないので、ng-blur を使ってラベルの表示に戻すことはバグです。ユーザーはテキスト入力をクリックし、ラベルの表示に戻るために再度クリックする必要があります。

編集してください。

問題のプランク例です。 http://plnkr.co/edit/synSIP?p=preview

どのように解決するのですか？

純粋なCSSで行えるようになったので、JavaScriptは不要？

新しい CSS 擬似クラス :focus-within は、このような場合に役立ち、スクリーン リーダーの使用時によくある、ナビゲーションにタブを使用する場合のアクセシビリティに役立ちます。

.parent:focus-within {
  border: 1px solid #000;
}

focus-within擬似クラスは、それ自身が にマッチする要素、または :focus にマッチする子孫を持つ要素にマッチします。

使用できますか...

どのブラウザが対応しているかは、以下のページで確認できます。 http://caniuse.com/#search=focus-within

デモ

fieldset {
  padding: 0 24px 24px !important;
}

fieldset legend {
  opacity: 0;
  padding: 0 8px;
  width: auto;
}

fieldset:focus-within {
  border: 1px solid #000;
}

fieldset:focus-within legend {
  opacity: 1;
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" />

<div class="container">
  <form>
    <fieldset>
      <legend>Parent Element</legend>
      <div class="form-group">
        <label for="name">Name:</label>
        <input class="form-control" id="name" placeholder="Enter name">
      </div>
      <div class="form-group">
        <label for="email">Email:</label>
        <input type="email" class="form-control" id="email" placeholder="Enter email">
      </div>
    </fieldset>
  </form>
</div>