Berhenti gunakan ID dan Class di setiap element

Baru-baru ini saya menyadari bahwa mudah bagi pemula di bidang pengembangan web untuk melupakan banyak pemilih atribut CSS dan sebagai gantinya memilih untuk membuat kelas atau ID tertentu untuk mendesain elemen tertentu di halaman Anda. Warna latar belakang item fleksibel pertama harus berbeda. Mengingat bahwa gaya ini eksklusif untuk item ini, Anda pasti mempertimbangkan untuk membuat ID untuknya.

Misalkan Anda memiliki wadah fleksibel yang berisi 10 item fleksibel yang terlihat seperti ini:

<div class="flex-container-column">
<div class="item">flex item 1</div>
<div class="item">flex item 2</div>
<div class="item">flex item 3</div>
<div class="item">flex item 4</div>
<div class="item">flex item 5</div>
<div class="item">flex item 6</div>
<div class="item">flex item 7</div>
<div class="item">flex item 8</div>
<div class="item">flex item 9</div>
<div class="item">flex item 10</div>
</div>

Bagaimana jika setiap halaman situs web berisi wadah fleksibel yang sama dengan 10 item fleksibel? dan kita menginginkan hal pertama untuk tampil dengan cara yang sama? Berikan saja kelas kedua.

Secara teknis, itu mungkin, tapi itu bukan ide yang bagus! Pemilih atribut CSS, lebih khusus lagi: kelas semu, harus digunakan.

Anda dapat membedakan elemen HTML berdasarkan status spesifiknya menggunakan CSS:kelas semu, seperti:

  • :hover Saat Anda mengarahkan kursor ke tombol
  • :active Saat tautan atau tombol diklik
  • :checked Ketika tombol radio dicentang
  • :first-child dan :last-child Menerapkan gaya ke elemen pertama dan terakhir yang muncul segera dan terakhir di bawah elemen induknya.
  • :nth-child Menerapkan gaya ke elemen anak dengan posisi tertentu dalam sekelompok elemen saudara, misalnya, 'p' ketiga di setiap div.

Kita dapat membayangkan beberapa kemungkinan menggunakan kode HTML fiktif di atas menggunakan kasus penggunaan warna latar:

See the Pen Untitled by topyk27 (@topyk27) on CodePen.


Mari kita mulai dari atas ke bawah sana. Ada dua tampilan: kolom dan baris.

Kolom

Saya menggunakan teknik berikut untuk menargetkan kotak di tempat yang ganjil (kotak 1, 3, 5, 7, dan 9) sehingga warnanya seperti oranye: Menggunakan tanda kurung untuk menunjukkan bahwa saya ingin menargetkan angka GANJIL, saya mendefinisikan kelas semu.

.item:nth-child(odd) {
  background-color: #FEC8A7;
}

Demikian pula, saya hanya mengganti frasa "ganjil" di dalam tanda kurung dengan "genap" untuk kotak dengan posisi angka genap (genap).

.item:nth-child(even) {
  background-color: #FCECA5;
}

Baris

Saya hanya ingin fokus pada kotak pertama dan terakhir pada tampilan Baris saya. Jadi, anak pertama dan terakhir relevan di sini:

/* targets the first flex item */
.item2:first-child {
 background-color: #A16AE8; 
}

/* targets the last flex item */
.item2:last-child {
  background-color: #4120A9;
}

Dalam kasus penggunaan ini, Anda juga dapat mengganti anak pertama dengan anak pertama dari jenisnya atau anak ke-n, dan anak terakhir dengan anak terakhir dari jenisnya, dan tetap mendapatkan hasil yang sama. Perbedaannya adalah first-of-type hanya akan mencari instance pertama dari elemen yang ditentukan dalam container atau elemen induk, bahkan jika elemen tersebut bukan anak pertama container atau elemen induk. Jadi jika saya menambahkan h1 dan sedikit memodifikasi kode untuk tampilan Baris di atas, akan terlihat seperti ini:

<div class="flex-container-row">
<h1>header</h1>
<div class="item2">flex item 1</div>
<div class="item2">flex item 2</div>
<div class="item2">flex item 3</div>
<div class="item2">flex item 4</div>
<div class="item2">flex item 5</div>
<div class="item2">flex item 6</div>
<div class="item2">flex item 7</div>
<div class="item2">flex item 8</div>
<div class="item2">flex item 9</div>
<div class="item2">flex item 10</div>
<div class="item2">flex item 10</div>
<div class="item2">flex item 10</div>
</div>

Tidak akan berhasil menggunakan anak pertama atau anak ke-n(1). karena h1 adalah anak pertama container. Namun, karena akan memeriksa kemunculan pertama, ia akan tetap berfungsi dengan: tipe pertama. item kelas 2 dalam wadah Dengan kata lain, jika Anda ingin menargetkan posisi elemen yang sangat spesifik,:anak pertama dan: anak ke-n direkomendasikan untuk digunakan dalam praktik.