javascript: クリックした時のpタグの背景の色が変わるようにしたい

Question

#実現したいこと
デフォルトでtabindex=1に背景色がかかるようにし、他の要素をクリックした時に背景色が変わるのと、その中のPタグの要素を抜き出す方法を知りたい
補足
divの要素は、保存されたデータの数の分だけ描画されるので事前に、idなどを不要することができません。

#できていることと困っていること
クリックすると、背景色が赤に変わるところまでできており、デフォルトでtabindex=1に背景色をつけることができずに困っています。

<div class="hoge" tabindex="1">
<p class="item-name">Section 1</p>
<p class="description">description 1</p>
</div>

<div class="hoge" tabindex="2">
<p class="item-name">Section 2</p>
<p class="description">description 2</p>
</div>

<div class="hoge" tabindex="3">
<p class="item-name">Section 3</p>
<p class="description">description 3</p>
</div>

<!-- 要素がクリックされた時に、下記のinputのvalueに反映させたい -->
<input type="text" value="Section 1" id="input-item">
<input type="text" value="description 1" id="input-description">

.hoge:focus {
    background-color:red;
}

追記
cssを以下のようにしました。
これで、デフォルトでtabindex="1"に背景色が付くようになったのすが他の要素をクリックしてもデフォルトのままで残ってしまいます。
動くサンプル

.hoge[tabindex="1"]{
   background-color:red;
}
.hoge:focus {
    background-color:red;
}

追記
違う方法でのアプローチ

Comments

[kei344]

ご自身で試されたコードを質問文に追記し、「何」が「どのように」わからないのか、コードのどの部分で詰まっているのかなどを具体的に追記されたほうが回答が望めると思います。

[m.ts10806]

>クリックすると、背景色が赤に変わるところ
この部分のコードを記載してください。
でないと「その部分も含めたコードをください」という作業依頼にもなりますし、「そのように組んだら出来ます」程度のアドバイスしか来ないと思います

[nanase21]

今回の質問の目的としては、デフォルトでpタグのtabindex=1に背景色がつくようにしたいのが目的になります。
加えて、jsの中身の要素を取得する方法が分かればどのようにしたら実現できるかご教示いただけたら嬉しいなと思っていました。

[m.ts10806]

「クリック」とタグからJavaScriptかと思ったのですがCSSのみということでしょうか？それともJavaScriptは全く組めてないということでしょうか

[nanase21]

現在進行形で私の方でも色々試していて質問に試した動くサンプルを追記しました。
今私ができていることとしては、事前に要素の数が確定していてgetElementByIdでidを降っている場合にはクリックした要素の背景色の変更と要素内のtextContentをinputに反映させることまでできております。
出来ない事としては、事前に要素の数が確定していなくてidが振れない時に意図した処理が実現することができなくて困っています。

Answer 1

デフォルトでtabindex=1に背景色がかかるようにし、他の要素をクリックした時に背景色が変わる

:focus-within 擬似クラスにより .hoge がフォーカスを持つかどうかを調べ、持っていない場合最初の .hoge へスタイルを適用する、というように質問者さんの実現したい装飾は可能です (動作確認用リンク)。

<div class="tab">
  <div class="hoge" tabindex="1">
    <p class="item-name">Section 1</p>
    <p class="description">description 1</p>
  </div>

  <div class="hoge" tabindex="2">
    <p class="item-name">Section 2</p>
    <p class="description">description 2</p>
  </div>

  <div class="hoge" tabindex="3">
    <p class="item-name">Section 3</p>
    <p class="description">description 3</p>
  </div>
</div>

<input type="text" value="Section 1" id="input-item">
<input type="text" value="description 1" id="input-description">

.tab:not(:focus-within) > .hoge:first-child,
.hoge:focus {
  background: red;
}

その中のPタグの要素を抜き出す方法を知りたい

これは JavaScript で行います。フォーカスに変化があったとき、各タブのいずれかがフォーカスを持つ場合はそのタブのテキストを、いずれの要素もフォーカスを持たない場合は最初のタブのテキストを input タグへ設定すれば良いことになります。そのため、 focusin, focusout イベントを用いて以下のように書くことが出来ます (動作確認用リンク)。

const tab = document.querySelector(".tab");
const item = document.getElementById("input-item");
const description = document.getElementById("input-description");

const text = (selector, target = tab.firstElementChild) =>
  target.querySelector(selector).textContent.trim();

tab.addEventListener("focusin", event => {
  const target = event.target;
  [item.value, description.value] = [
    text(".item-name", target),
    text(".description", target)
  ];
});

tab.addEventListener("focusout", event => {
  if (!tab.contains(event.relatedTarget))
    [item.value, description.value] = [
      text(".item-name"),
      text(".description")
    ];
});

上記の 2 つを合わせると、以下のようになり、これはタブが 3 つ以上に増えたとしても対応出来ていることがわかります (動作確認用リンク)。

<div class="tab">
  <div class="hoge" tabindex="1">
    <p class="item-name">Section 1</p>
    <p class="description">description 1</p>
  </div>

  <div class="hoge" tabindex="2">
    <p class="item-name">Section 2</p>
    <p class="description">description 2</p>
  </div>

  <div class="hoge" tabindex="3">
    <p class="item-name">Section 3</p>
    <p class="description">description 3</p>
  </div>

  <div class="hoge" tabindex="4">
    <p class="item-name">Section 4</p>
    <p class="description">description 4</p>
  </div>

  <div class="hoge" tabindex="5">
    <p class="item-name">Section 5</p>
    <p class="description">description 5</p>
  </div>
</div>

<input type="text" value="Section 1" id="input-item">
<input type="text" value="description 1" id="input-description">

.tab:not(:focus-within)>.hoge:first-child,
.hoge:focus {
  background: red;
}

const tab = document.querySelector(".tab");
const item = document.getElementById("input-item");
const description = document.getElementById("input-description");

const text = (selector, target = tab.firstElementChild) =>
  target.querySelector(selector).textContent.trim();

tab.addEventListener("focusin", event => {
  const target = event.target;
  [item.value, description.value] = [
    text(".item-name", target),
    text(".description", target)
  ];
});

tab.addEventListener("focusout", event => {
  if (!tab.contains(event.relatedTarget))
    [item.value, description.value] = [
      text(".item-name"),
      text(".description")
    ];
});

Comments

[nanase21]

ご教示いただきありがとうございます。
querySelectorの使い方やcssの使い方についてとても勉強になりました。

[nanase21]

今、ご教示いただいたコードを色々試してみたのですが一度要素を選択後に他の要素をクリックしてしまうとデフォルトのtabindex="1"の要素に戻ってしまうのですがどのようにしたら回避できるのでしょうか？
js側では、focusoutの処理をコメントアウトすることにより他の要素をクリックしても書き換えたinputがデフォルトのvalueに戻らなくなったのですがcss側の処理の制御の仕方がわかりません。

[s8_chu]

このようにしてはいかがでしょうか。
https://jsfiddle.net/gdp3rbyh/