Saya memiliki sekelompok tombol radio dengan label.

input[type="radio"]:checked+label{
  color:red;
}
input[type="radio"]:checked+label~label{
  font-weight:bold;
}

input[type="radio"]:checked+label~label:nth-of-type(-n+3){
  background-color:green;
}
<div>
  <input type="radio" name="group1"><label>A</label><br/>
  <input type="radio" name="group1"><label>B</label><br/>
  <input type="radio" name="group1"><label>C</label><br/>
  <input type="radio" name="group1"><label>D</label><br/>
  <input type="radio" name="group1"><label>E</label><br/>
  <input type="radio" name="group1"><label>F</label>
</div>

Ketika saya memilih tombol radio, saya ingin tiga item berikutnya memiliki gaya yang diterapkan padanya.

Namun, jika Anda menjalankan cuplikan, Anda akan melihat bahwa kode saya hanya menyoroti tiga item pertama dalam div, bukan tiga item pertama setelah pemilihan.

Bagaimana saya bisa menerapkan gaya ke tiga item pertama setelah pemilihan?

Pada dasarnya saya ingin hal berikut terjadi:

enter image description here

1
Chris Stillwell 14 November 2017, 01:11

1 menjawab

Jawaban Terbaik

Solusi kerja jelek (jika saya menganggap Anda tidak dapat mengubah struktur html Anda):

input[type="radio"]:checked+label{
  color:red;
}
input[type="radio"]:checked+label~label{
  font-weight:bold;
}

input[type="radio"]:checked+label+br+input+label{
  background-color:green;
}
input[type="radio"]:checked+label+br+input+label+br+input+label{
  background-color:green;
}
input[type="radio"]:checked+label+br+input+label+br+input+label+br+input+label{
  background-color:green;
}
<div>
  <input type="radio" name="group1"><label>A</label><br/>
  <input type="radio" name="group1"><label>B</label><br/>
  <input type="radio" name="group1"><label>C</label><br/>
  <input type="radio" name="group1"><label>D</label><br/>
  <input type="radio" name="group1"><label>E</label><br/>
  <input type="radio" name="group1"><label>F</label>
</div>
1
Temani Afif 13 November 2017, 22:19