Bagaimana cara mendapatkan saudara sebelumnya di css?

nextSibling mengembalikan simpul berikutnya (simpul elemen, simpul teks atau simpul komentar). Spasi antar elemen juga merupakan node teks

nextElementSibling mengembalikan elemen berikutnya (bukan node teks dan komentar)

Sibling sebelumnya vs.ElementSibling sebelumnya

previousSibling mengembalikan simpul sebelumnya (simpul elemen, simpul teks atau simpul komentar). Spasi antar elemen juga merupakan node teks

Mungkin ada kasus ketika Anda ingin menerapkan gaya tertentu untuk elemen sebelumnya di CSS. Tapi apakah itu bisa tercapai?

Pemilih elemen sebelumnya atau pemilih saudara sebelumnya tidak tersedia di CSS (lihat daftar semua ). Namun ada solusi yang mungkin, dan Anda dapat meniru perilaku tersebut menggunakan properti flex

Contoh paling umum adalah label dengan input. Pada input :hover atau

<div class="field">
  <input class="input" type="email" id="email">
  <label class="label" for="email">E-mail:</label>
</div>

HTML

<div class="field">
  <label class="label" for="email">E-mail:</label>
  <input class="input" type="email" id="email">
</div>

Untuk menerapkan solusinya, kami perlu sedikit mengubah HTML. Kami akan beralih input dan label tempat. Dengan begitu kita dapat menargetkan elemen label melalui pemilih saudara (

<div class="field">
  <input class="input" type="email" id="email">
  <label class="label" for="email">E-mail:</label>
</div>

HTML

<div class="field">
  <input class="input" type="email" id="email">
  <label class="label" for="email">E-mail:</label>
</div>

Untuk gaya, kita dapat mengatur urutan visual label dan input dengan aturan

<div class="field">
  <input class="input" type="email" id="email">
  <label class="label" for="email">E-mail:</label>
</div>

CSS

.field {
  display: flex;
  flex-direction: row-reverse;
  justify-content: flex-end; /* to pull content to the left */
}

.input:focus + .label {
  color: #5a6cce;
}

Hasil

Surel

Jika ada lebih dari dua elemen dalam wadah, Anda dapat menyetel properti pesanan ke masing-masing elemen untuk mengalokasikannya secara visual satu demi satu. Dalam hal ini, jangan lupa untuk menghapus

.field {
  display: flex;
  flex-direction: row-reverse;
  justify-content: flex-end; /* to pull content to the left */
}

.input:focus + .label {
  color: #5a6cce;
}

.label {
  order: 1;
}

.input {
  order: 2
}

Tip terakhir, jika Anda beroperasi dengan input dan status

<div class="field">
  <input class="input" type="email" id="email">
  <label class="label" for="email">E-mail:</label>
</div>

.field {
  display: flex;
  flex-direction: row-reverse;
  justify-content: flex-end; /* to pull content to the left */
}

.input:focus + .label {
  color: #5a6cce;
}

<div class="field">
  <label class="label" for="email">E-mail:</label>
  <input class="input" type="email" id="email">
</div>

CSS

.field:focus-within .label {
  color: #5a6cce;
}

Namun, jika Anda melampaui hanya :hover dan/atau

<div class="field">
  <input class="input" type="email" id="email">
  <label class="label" for="email">E-mail:</label>
</div>

.field {
  display: flex;
  flex-direction: row-reverse;
  justify-content: flex-end; /* to pull content to the left */
}

.input:focus + .label {
  color: #5a6cce;
}

.field {
  display: flex;
  flex-direction: row-reverse;
  justify-content: flex-end; /* to pull content to the left */
}

.input:focus + .label {
  color: #5a6cce;
}

Bagaimana cara memilih saudara kandung di CSS?

Bagaimana cara memilih saudara pertama di CSS?

Bagaimana Anda mendapatkan anak pertama di CSS?

Bagaimana cara memilih elemen saudara?