Bagaimana Bekerja dengan Pemilih Pola CSS3 - dummies

Dalam beberapa kasus, pilihan yang perlu Anda buat di CSS3 tidak ada hubungannya dengan tag atau atribut, namun pola di mana objek muncul di halaman. Misalnya, Anda mungkin ingin memilih hanya objek pertama, apa pun objek itu.

Dalam beberapa kasus, Anda ingin memformat dengan anggota daftar atau elemen data berulang lainnya dengan cara lain untuk memudahkan pengguna melihat setiap elemen secara terpisah. Daftar berikut memberitahu Anda tentang penyeleksi pola yang biasanya digunakan dokumen.

: huruf pertama: Pilih huruf pertama dari objek yang ditentukan. Pemilih ini berguna dalam menciptakan efek tekstual khusus, seperti drop caps.

Sangat jarang melihat kebanyakan penyeleksi pola digunakan sendiri karena Anda biasanya tidak ingin format khusus hanya huruf pertama dari setiap objek pada halaman dengan cara tertentu. Umumnya, Anda melihat pemilih pola yang digunakan dalam kombinasi dengan pemilih atribut, seperti pemilih kelas, atau dengan pemilih tag tertentu.

Menggunakan penyeleksi pola secara global dapat memiliki hasil yang tidak diharapkan atau bahkan menyebabkan aplikasi gagal (tergantung pada bagaimana kode aplikasi dan CSS berinteraksi).
: baris pertama: Memilih baris pertama dari objek yang ditentukan.
: before: Memilih area segera sebelum konten objek yang ditentukan. Pemilih ini biasanya digabungkan dengan konten properti untuk memasukkan sesuatu yang spesial sebelum konten di objek yang ada.
: after: Memilih area segera setelah konten objek yang ditentukan. Pemilih ini biasanya digabungkan dengan konten properti untuk memasukkan sesuatu yang spesial sebelum konten di objek yang ada.
: first-of-type: Memilih objek pertama dari tipe tertentu.

Meskipun spesifikasi tidak benar-benar memberi tahu Anda bahwa Anda harus memberi tipe atau orang tua, beberapa pemilih pola tidak akan bekerja tanpa satu pun. Biasanya Anda melihat: pemilih tipe pertama yang digunakan dengan pemilih tag, (misalnya, p: first-of-type), namun juga dapat digunakan dengan pemilih atribut. Semua penyesuai pola tipe dan anak lainnya bekerja dengan cara yang sama.
: last-of-type: Memilih objek terakhir dari tipe tertentu.
: only-of-type: Memilih satu-satunya objek dari tipe tertentu. Jika ada lebih dari satu objek tipe tertentu, maka tidak ada pilihan yang dibuat.
: nth-of-type ( Number ): Memilih objek yang ditentukan dari tipe tertentu.
: nth-last-of-type ( Number ): Memilih objek yang ditentukan dari tipe tertentu, mulai dari akhir daftar objek.
: first-child: Memilih anak pertama dari objek tertentu. Pemilih ini biasa digunakan untuk menerapkan format khusus ke item pertama dalam daftar atau tabel.
: last-child: Memilih anak terakhir dari orang tua tertentu.
: only-child: Memilih anak tunggal dari orang tua tertentu. Bila objek induk memiliki lebih dari satu anak, tidak ada pilihan yang dibuat.
: nth-child ( Number ): Memilih anak yang ditentukan dari orang tua tertentu.
: nth-last-child ( Number ): Memilih anak yang ditentukan dari orang tua tertentu yang diawali dari akhir daftar anak-anak.

Pemilih pola dapat membuat beberapa efek menarik di situs Anda. Prosedur berikut ini mengambil cepat melihat apa yang dapat dilakukan selektor ini. Penting untuk diingat bahwa Anda akan melihat penyeleksi, termasuk pemilih pola, sering kali, jadi pertimbangkan ini sebagai titik awal.

Buat ExternalCSS. HTML dan ExternalCSS. File CSS dan salin ke folder baru.
Buka ExternalCSS. HTML.
Ketik kode berikut setelah tag
ada di file dan simpan perubahan ke disk.
```
Satu
Dua
Tiga
Empat
Lima
```
Dalam kasus ini, Anda menambahkan daftar ke halaman untuk memudahkan deteksi pola. Tentu saja, pola tidak terbatas pada daftar atau tabel. Anda bisa menggunakannya dengan pengaturan objek yang bisa memberi pilihan pada pola.
Buka ExternalCSS. CSS.

Ketik kode berikut setelah gaya yang ada dan simpan perubahan ke disk.

. ListItem: huruf pertama {font-size: xx-large;}. ListItem: setelah {content: "27A8"; ukuran huruf: x-besar; warna merah;}. ListItem: nth-child (ganjil) {background-color: LightBlue;}. ListItem: nth-child (2n + 2) {background-color: LightGreen;}

Muat ulang halaman percobaan.

Anda melihat efek membuat perubahan gaya. Untuk memulai, setiap peluru dimulai dengan huruf ekstra besar.

Di akhir setiap peluru Anda melihat karakter panah khusus. Perhatikan bagaimana CSS menggunakan 27A8 untuk menciptakan karakter ini. Saat melihat grafik seperti yang ada di ikreator. com dan satu di petterhesselberg. com, Anda melihat kode karakter ini disajikan dengan kombinasi & # kombinasi di awal. CSS menggunakan kode numerik yang sama, namun bergantung pada garis miring terbalik (/).

Seleksi: nth-child () dapat digunakan dengan beberapa cara. Meskipun contohnya tidak menunjukkannya, Anda dapat memberi nomor untuk memilih satu elemen anak tertentu. Namun, pemilih ini juga menerima sejumlah input menarik lainnya. Misalnya, Anda bisa menggunakan kata kunci genap dan ganjil untuk memilih objek genap atau ganjil dalam daftar.

Anda juga dapat memberikan persamaan yang menggunakan n untuk menunjukkan objek saat ini. Bila browser memasukkan 0 untuk n, misalnya, persamaannya menjadi 2 * 0 + 2 atau elemen 2. Jika Anda ingin memulai dengan elemen 3, Anda akan menggunakan 2n + 3. Persamaan yang Anda berikan bisa berupa kompleksitas yang dibutuhkan untuk menghasilkan hasil yang diinginkan.