Buat jumlah gaya dan tata letak CSS tertentu

Sep 13, 2025
Bagaimana caranya

Dalam tutorial ini kita akan melihat cara mengubah gaya elemen CSS, serta tampaknya menata orang tua mereka, tergantung pada jumlah elemen. Kami juga akan melihat cara mengubah tata letak elemen berdasarkan kuantitas mereka, untuk menciptakan yang lebih adaptif Tata Letak Situs Web yang memanfaatkan ruang yang lebih baik.

  • Trik CSS untuk merevolusi tata letak web Anda

Terakhir kita akan membahas penggunaan counter CSS untuk menampilkan indeks elemen dalam satu set di dalamnya, serta menampilkan jumlah total di dalam induk. Semua ini akan dicapai dengan CSS murni saja, tanpa perlu JavaScript atau kerangka kerja, yang mengarah ke kode yang sederhana dan lebih efisien.

Untuk membangun situs tanpa perlu kode tanpa akhir, Anda akan memerlukan Pembangun Situs Web . Dan apa pun kemampuan situs Anda, pastikan Anda hosting web. Layanan cocok untuk tujuan. Untuk sesuatu yang berbeda, dapatkan penyimpanan awan Hingga awal.

Pemilih elemen tunggal

CSS3 hanya memiliki satu pasangan pemilih yang dapat menentukan jumlah elemen, yaitu: Hanya anak-anak dan: hanya pemilih tipe. Setelah mengatakan ini, mereka benar-benar hanya dapat menentukan apakah suatu elemen sendiri atau memiliki saudara kandung. : Hanya pemilih anak yang cocok dengan elemen-elemen yang merupakan satu-satunya anak dari orang tua mereka, sementara: hanya elemen pertandingan tipe yang merupakan satu-satunya dari tipe mereka.

Sayangnya, itu sejauh pemilih tunggal pergi tetapi ada beberapa pemilih lain yang dapat menargetkan elemen berdasarkan pesanan mereka dalam satu set elemen serupa. Ini adalah: NTH-Child,: Nth-of-Type, NTH-LEWS-ANAK dan NTH-Last-of-of-Type, yang biasanya digunakan untuk menargetkan elemen berdasarkan urutan elemen serupa. SELECTURS: NTH-ANAK-ANAK DAN NTH-TERTENTU digunakan untuk menentukan urutan elemen yang menghitung mundur dari elemen terakhir ke yang pertama. Menggabungkan ini dengan pemilih lain memungkinkan kita untuk membangun rantai yang lebih kompleks yang menargetkan elemen-elemen tertentu berdasarkan kuantitas mereka.

Rantai Pemilih Khusus Kuantitas

selector chains

Selector: First-of-Type: NTH-A Tipe (3) dan Kombinator Sibling Umum ~ dapat dikombinasikan untuk menargetkan yang pertama dari tiga dan semua saudara kandungnya, karenanya semua dalam satu set tiga

Dari empat pemilih yang disebutkan di atas, yang utama yang akan kami gunakan dalam tutorial ini adalah NTH-Last-of-Type. Perbedaan antara ini dan pemilih anak-anak terakhir ini adalah bahwa yang terakhir mencakup semua elemen 'Saudara-elemen di set, sedangkan yang pertama hanya mencakup elemen dari jenis HTML yang sama dan karenanya lebih selektif. Untuk sisa tutorial ini, kami akan menggunakan penyeleksi -OF-Type, namun varian -child sama-sama valid.

Tipe berlangsung ke-n dapat digunakan bersama dengan pemilih tipe pertama yang lebih populer untuk membuat rantai yang menargetkan elemen pertama dalam satu set kuantitas yang diinginkan. Misalnya, kita dapat menggunakan: pertama-tear-of-type: NTH-Last-of-Type (3) Untuk menargetkan elemen yang merupakan yang pertama dan ketiga dari ujung jenisnya atau, dengan kata lain, yang pertama dari a set tiga. Kami kemudian dapat memperpanjang ini dengan kombinator saus umum ~ untuk memilih semua saudara kandung yang mengikuti yang pertama dari satu set tiga. Menggabungkan dua rantai pemilih ini, kita dapat membuat pemilih kompleks yang menargetkan elemen-elemen yang merupakan yang pertama dari tiga dan semua elemen dari jenis yang sama yang mengikutinya, sehingga memilih semua elemen dalam satu set tiga. 

 .box: tipe pertama: NTH-A-OF-TYPE (3),
.box: First-of-of-Type: NTH-Last-of-Type (3) ~ .box

Rantai pemilih ini tidak hanya berfungsi untuk jumlah elemen tertentu tetapi bahkan dapat dimodifikasi untuk menargetkan sejumlah jumlah.

selector chain

Selectors NTH-Last-of-Type (N + 2) dan: NTH-Last-of-Type (-N + 2) dapat digunakan untuk menargetkan elemen dalam set lebih dari dan kurang dari dua masing-masing

Jika kita ingin menargetkan elemen dalam satu set dengan kuantitas lebih dari atau kurang dari nilai tertentu M, kita dapat menggunakan rantai dengan teknik (n + m) dan (-n + m) masing-masing. Misalnya, untuk menargetkan semua elemen dalam satu set dua atau lebih elemen yang dapat kita gunakan: 

 .box: First-of-of-Type: Nth-Last-of-Type (N + 2),
.box: tipe pertama: NTH-OF-TYPE (N + 2) ~ .box

Demikian pula, kita dapat menargetkan semua elemen dalam satu set dari dua atau lebih elemen menggunakan: 

.box: pertama-tim Tipe: Nth-Last-of-Type (-n + 2),
.box: First-of-of-type: NTH-Last-of-Type (-n + 2) ~ .box

Seperti yang Anda lihat ini adalah rantai pemilih yang kuat yang memungkinkan kami untuk mencapai hal-hal yang sangat menarik dan bermanfaat tanpa perlu javascript atau kerangka kerja lainnya. Ini sangat berguna ketika datang untuk membuat tata letak adaptif yang berubah berdasarkan jumlah elemen.

Dinamis, Tata Letak Khusus Jumlah

grid layouts with odd and even numbers

Untuk sejumlah elemen tata letak grid terlihat hebat, tetapi tidak terlalu banyak untuk angka ganjil

Katakanlah kita ingin menampilkan sekelompok kotak yang menunjukkan hasil pencarian atau panggilan API dalam tata letak dua kolom, grid. Masalahnya terletak pada kenyataan bahwa hasilnya berasal dari sumber eksternal dan kami tidak memiliki cara untuk mengetahui jumlah hasil yang akan dikembalikan, oleh karena itu kami tidak tahu berapa banyak kotak yang akan dibuat. Sementara grid terlihat bagus untuk jumlah kotak genap, ketika diterapkan pada angka ganjil kotak terakhir duduk di baris saja dan terlihat ... baik, agak aneh.

Ini terutama bermasalah ketika menggunakan item FlexBox dengan fleksibel-tumbuh diterapkan pada mereka karena menyebabkan elemen terakhir tumbuh menjadi ruang kosong pada baris, sehingga mengambil lebar penuh. Salah satu cara untuk mencegah hal ini dapat membuat yang pertama dari jumlah kotak ganjil mengambil baris penuh dengan menerapkan lebar 100% ke kotak pertama yang juga merupakan jumlah ganjil kotak dari ujung, menggunakan: anak pertama: NTH-terakhir-dari-Tipe (ganjil). Ini memberikan tata letak yang lebih baik karena memberikan hasil pertama dan karenanya yang paling relevan atau terbaru lebih signifikan daripada yang terakhir.

Kita bahkan dapat menambahkan kasus khusus ketika kuantitas dapat dibagi dengan tiga menggunakan: Anak Pertama: NTH-Last-of-Type (3N) untuk mengubah grid menjadi tata letak tiga kolom dengan menerapkan lebar 33% untuk pertama-tama kotak dalam satu set dengan kuantitas yang dapat dibagi dengan tiga dan semua kotak yang mengikutinya. 

 .box {
  Lebar: 50%;
}

.box: Anak Pertama: NTH-A Tipe (Odd) {
  Lebar: 100%;
}

.box: Anak Pertama: NTH-Last-of-Type (3N),
.box: Anak Pertama: Nth-Last-of-Type (3N) ~ .box {
  Lebar: 33%;
}

Kesimpulan

different layouts

Layout dapat diubah berdasarkan jumlah elemen hanya dengan menggunakan rantai pemilih CSS

Seperti yang telah kita lihat, pemilih CSS dapat secara bersamaan dalam berbagai cara menarik untuk menerapkan gaya dan tata letak adaptif yang berubah berdasarkan jumlah elemen. Rantai pemilih juga dapat digunakan untuk menerapkan gaya ke induk dari seperangkat elemen dalam jumlah tertentu, dengan menggunakan :: sebelum atau :: setelah elemen pseudo yang diposisikan untuk mengambil ukuran penuh induk. Dikombinasikan dengan counter CSS, elemen-elemen pseudo ini dapat digunakan untuk menampilkan jumlah total keturunan dalam elemen induk, serta teks yang berubah tergantung pada kuantitas keturunan.

Teknik-teknik ini menawarkan cara berharga untuk menciptakan gaya dan tata letak berbasis kuantitas yang berguna ketika menangani sejumlah elemen yang tidak diketahui, yang sering terjadi ketika berhadapan dengan API.

Artikel ini awalnya diterbitkan dalam masalah 308 dari bersih , majalah terlaris di dunia untuk desainer dan pengembang web. Beli masalah 308 di sini atau berlangganan di sini .

Artikel terkait:

  • 5 Tips untuk CSS Super-Cepat
  • Buat tata letak yang responsif dengan jaringan CSS
  • Memahami Properti Tampilan CSS

Bagaimana caranya - Artikel Terpopuler

Fotografi Potret: Cara Mengambil Potret Sempurna

Bagaimana caranya Sep 13, 2025

Fotografi potret adalah tindakan balancing - ada begitu banyak hal yang perlu diingat. Berkomunikasi dengan subjek Anda dan memastikan mereka merasa nyaman sangat penting. Dan dari perspektif..

Cara membuat lukisan udara plein digital

Bagaimana caranya Sep 13, 2025

Dapatkan di luar ruangan untuk menciptakan seni yang hebat (Kredit Gambar: Mike Mc Cain) Ada begitu banya..

Cara mencapai skala dalam lukisan Anda

Bagaimana caranya Sep 13, 2025

Dalam tutorial ini kita akan membahas beberapa prinsip dasar yang akan membantu mengomunikasikan gagasan skala besar di bagian Anda sendiri. Saya menggunakan pensil dan minyak untuk tutorial ..

Teknik Posing Mudah untuk Model 3D

Bagaimana caranya Sep 13, 2025

Saya telah menjadi direktur animasi selama beberapa tahun terakhir dan telah bekerja dengan banyak animator, membantu mereka meng..

Master ilmu Pengoptimalan Tingkat Konversi

Bagaimana caranya Sep 13, 2025

Optimasi Konversi Tingkat (CRO) adalah proses memaksimalkan konversi dari lalu lintas yang ada. Misalnya, jika Anda mendapatkan 1..

Unduh file untuk 3D dunia 232

Bagaimana caranya Sep 13, 2025

Untuk mengunduh file-file yang menyertainya untuk masalah 3D dunia 332, cukup klik tautan di bawah setiap artikel dan file ZIP ak..

Master alat pisau

Bagaimana caranya Sep 13, 2025

Kadang-kadang kembali ke dasar-dasarnya sangat penting untuk tetap di atas permainan Anda, karena memperbarui keterampilan Anda d..

Gunakan partikel untuk membuat splash 3D

Bagaimana caranya Sep 13, 2025

Tutorial ini akan melihat bagaimana Anda dapat membuat percikan cair, atau efek mahkota, dan dapat digunakan untuk membuat pecah ..

Kategori