Selektor & rincian pemilih CSS

Lembar selektor pemilih CSS

Baru-baru ini, saya telah menyelam ke penyeleksi CSS.

Ada begitu banyak pemilih CSS dengan simbol yang tidak dikenal,>. , * + ~ [] dll, jadi saya sering bingung tentang bagaimana penyeleksi CSS bekerja. Akhirnya, saya meluruskannya di kepala saya dan mendesain ulang mereka bagaimana saya mengerti.

* Sebenarnya, saya ingin mengaturnya pada satu halaman berukuran A4 untuk menghemat kertas dan menyelamatkan Bumi tetapi saya tidak bisa, karena ada begitu banyak penyeleksi yang ingin saya tambahkan sehingga saya harus membahas lebih dari satu halaman . Ini semua empat halaman A4, kecuali halaman sampul.

Cetak lembar contekan ini dan tempelkan di dinding. Jangan menghafalnya, hanya mengintip. Saya harap infografis ini membantu Anda menemukan penyeleksi CSS yang tepat dengan cepat dan menghemat waktu Anda.

Selektor CSS selektorGame pemilih CSS oleh Ryan Yu

Pergi untuk mengunduh cheatsheet penyeleksi CSS dan nikmati permainanšŸ•¹

Jangan khawatir. Semuanya gratis.

Selami pemilih CSS.

Saya akan membuat daftar infografik bersama dengan definisi MDN untuk mempermudah Anda.

Ketik Pemilih

Selektor tipe CSS cocok dengan elemen dengan nama simpul. Dengan kata lain, itu memilih semua elemen dari tipe yang diberikan dalam dokumen. - MDN

Ketik Pemilih

Pemilih ID

Memilih elemen berdasarkan nilai atribut id-nya. Seharusnya hanya ada satu elemen dengan ID yang diberikan dalam dokumen. - MDN

Pemilih ID

Pemilih Keturunan

Setiap elemen yang cocok dengan B yang merupakan turunan dari elemen yang cocok dengan A (yaitu, seorang anak, atau anak dari seorang anak, dll.). kombinator adalah satu atau lebih spasi atau dua lebih besar dari tanda. - MDN

Pemilih Keturunan

Gabungkan Pemilih Keturunan & ID

Gabungkan Pemilih Keturunan & ID

Pemilih Kelas

Pemilih kelas CSS mencocokkan elemen berdasarkan konten atribut kelas mereka. - MDN

Pemilih Kelas

Gabungkan Pemilih Kelas

Gabungkan Pemilih Kelas

Combaator Koma

Elemen apa pun yang cocok dengan A dan / atau B. - MDN

Combaator Koma

Pemilih Universal

Pilih semuanya!

Pemilih Universal

Gabungkan Pemilih Universal

Gabungkan Pemilih Universal

Selector Adjacent Adjacent

Combinator saudara berdekatan (+) memisahkan dua penyeleksi dan cocok dengan elemen kedua hanya jika segera mengikuti elemen pertama, dan keduanya adalah anak-anak dari elemen induk yang sama. - MDN

Selector Adjacent Adjacent

Pemilih Saudara Umum

Combinator saudara kandung umum (~) memisahkan dua penyeleksi dan cocok dengan elemen kedua hanya jika mengikuti elemen pertama (meskipun tidak harus segera), dan keduanya adalah anak-anak dari elemen induk yang sama. - MDN

Pemilih Saudara Umum

Pemilih Anak

Combinator anak (>) ditempatkan di antara dua penyeleksi CSS. Ini cocok hanya dengan elemen yang cocok dengan pemilih kedua yang merupakan anak-anak dari elemen yang cocok dengan yang pertama. - MDN

Pemilih Anak

Selektor Pseudo Anak Pertama

The: first-child CSS pseudo-class mewakili elemen pertama di antara sekelompok elemen saudara. - MDN

Selektor Pseudo Anak Pertama

Hanya Selektor Pseudo Anak

The: only-child CSS pseudo-class mewakili elemen tanpa saudara kandung. Ini sama dengan: anak pertama: anak terakhir atau: anak ke-1 (1): anak-anak terakhir (1), tetapi dengan spesifisitas yang lebih rendah. - MDN

Hanya Selektor Pseudo Anak

Selector Pseudo Anak Terakhir

The: last-child CSS pseudo-class mewakili elemen terakhir di antara sekelompok elemen saudara. - MDN

Selector Pseudo Anak Terakhir

Nse Child Pseudo-selector

The: nth-child () CSS pseudo-class mencocokkan elemen berdasarkan posisi mereka dalam kelompok saudara kandung. - MDN

Nse Child Pseudo-selector

Pemilih Anak Terakhir

The: nth-last-child () CSS pseudo-class mencocokkan elemen berdasarkan posisi mereka di antara sekelompok saudara kandung, dihitung dari akhir. - MDN

Pemilih Anak Terakhir

Pertama dari Selector Type

The: first-of-type CSS pseudo-class mewakili elemen pertama dari tipenya di antara sekelompok elemen saudara. - MDN

Pertama dari Selector Type

Jumlah Pemilih Tipe

The: nth-of-type () CSS pseudo-class mencocokkan elemen dari tipe yang diberikan, berdasarkan posisi mereka di antara sekelompok saudara kandung. - MDN

Jumlah Pemilih Tipe

Selektor tipe-N dengan Formula

Pemilih tipe-N
 Catatan:
: n-of-type (datar)
: n-of-type (tidak datar)
: nth-of-type (2)
: nth-of-type (2n)
: n-of-type (3n-1)
: nth-of-type (2n + 2)

Hanya dari Pemilih Jenis

The: only-of-type CSS pseudo-class mewakili elemen yang tidak memiliki saudara dari jenis yang sama. - MDN

Hanya dari Pemilih Jenis

Terakhir dari Type Selector

The: last-of-type CSS pseudo-class mewakili elemen terakhir dari tipenya di antara sekelompok elemen saudara. - MDN

Terakhir dari Type Selector

Pemilih Kosong

The: pseudo-class CSS kosong mewakili elemen apa pun yang tidak memiliki anak. Anak-anak dapat berupa elemen node atau teks (termasuk spasi). Komentar, instruksi pemrosesan, dan konten CSS tidak memengaruhi apakah suatu elemen dianggap kosong. - MDN

Pemilih Kosong

Negasi Pseudo-class

The: not () CSS pseudo-class mewakili elemen yang tidak cocok dengan daftar pemilih. Karena itu mencegah item tertentu dari yang dipilih, itu dikenal sebagai negasi pseudo-class. - MDN

Negasi Pseudo-class

Selektor Atribut

Selektor atribut adalah jenis pemilih khusus yang akan mencocokkan elemen berdasarkan atribut dan nilai atributnya. Sintaksis generik mereka terdiri dari tanda kurung siku ([]) yang berisi nama atribut diikuti dengan kondisi opsional untuk mencocokkan dengan nilai atribut. Selektor atribut dapat dibagi menjadi dua kategori tergantung pada cara mereka mencocokkan nilai atribut: Selektor atribut kehadiran dan nilai dan pemilih atribut nilai Nilai substring. - MDN

Selektor Atribut

Pemilih Nilai Atribut

Pemilih Nilai Atribut

Atribut Mulai Dengan Pemilih

Pemilih ini akan memilih semua elemen dengan atribut attr yang nilainya dimulai dengan val. - MDN

Atribut Mulai Dengan Pemilih

Atribut Berakhir Dengan Pemilih

Pemilih ini akan memilih semua elemen dengan atribut attr yang nilainya berakhir dengan val. - MDN

Atribut Berakhir Dengan Pemilih

Atribut Selektor Wildcard

Pemilih ini akan memilih semua elemen dengan atribut attr yang nilainya berisi substring val. (Substring hanyalah bagian dari string, mis. "Cat" adalah substring dalam string "caterpillar".) - MDN

Atribut Selektor Wildcard

Selamat, kamu sudah selesai

Artikel

šŸ•¹ CodePen

Ada pertanyaan atau umpan balik

Saya ingin mendengar tanggapan Anda tentang bagaimana saya dapat membuatnya lebih baik untuk Anda. Silakan tinggalkan komentar Anda di bawah ini atau melalui Twitter saya.

Terima kasih banyak kepada Ryan Yu karena telah membantu saya membuat game penyeleksi CSS. Ryan Yu adalah penulis di mana saya belajar banyak teknik front-end yang keren.

Selamat kodeign hari ini