Pemilih pemilih CSS adalah dasar tata letak halaman web CSS kita. Apa sebenarnya pemilih CSS itu dan bagaimana cara menggunakannya secara wajar? Selector dapat dibagi menjadi tiga kategori. Kecuali untuk kategori pertama dari selector HTML, kita dapat memberi nama sendiri pada dua kategori lainnya. Saat memberi nama, perhatikan untuk memasukkan semantik atau menambahkan komentar yang diperlukan untuk membuat kode kita lebih jelas dan mudah dibaca .
Pemilih tag pemilih HTML
Pemilih HTML adalah tag HTML, seperti: DIV, TD, P, H1, dll. Jika Anda mendefinisikannya dengan CSS, properti tag ini di halaman yang dikontrol oleh artikel CSS akan ditampilkan sesuai dengan definisi Anda.
Misal kita ingin warna H1 merah, maka: H1 {warna: merah}. Di sini kita mempelajari fitur CSS, yang dapat mendefinisikan beberapa penyeleksi dalam sebuah aturan. Seperti: H1, H2, TD {warna: merah}. Definisi ini memungkinkan semua H1, H2, dan TD berwarna merah. Dalam penggunaan tertentu, beberapa atribut dengan pengaturan yang sama dapat digabungkan dan ditulis untuk mengurangi kode kita.
Pemilih kelas Pemilih kelas
Ada dua jenis pemilih Kelas, yang pertama disebut pemilih kelas terkait, yang terkait dengan tag HTML. Sintaksnya adalah tag.Nama Kelas {property:value}. Sebagai contoh: kita ingin mengatur warna beberapa tapi tidak semua H1 menjadi merah H1.redone {color: red}: H1 pertama berwarna merah, tapi yang kedua tidak.
Tipe kedua adalah pemilih kelas independen. Itu dapat digunakan oleh tag HTML apa pun. Sintaksnya adalah sebagai berikut. Classname {property: value} Jika kita memiliki definisi berikut. blueone {color: blue} maka kita dapat menerapkannya ke tag yang berbeda. Sangat jelas bahwa pemilihan kelas memberi kita lebih banyak kebebasan dan ruang untuk bermain.
Pemilih ID Pemilih ID
Faktanya, fungsi pemilih ID sangat mirip dengan fungsi pemilih kelas independen. Perbedaannya adalah sintaksis dan penggunaannya berbeda, dan berguna bagi javascript untuk memanipulasi elemen HTML. Dalam tata letak kami, kami sering menggunakan pemilih ID untuk menentukan area struktural yang berbeda.
Sintaksnya adalah sebagai berikut #IDname {property:value}. Misalkan kita mempunyai definisi berikut #yelowone {warna: kuning}. Kita dapat menerapkan definisi ini ke tag apa pun dengan nama ID yang sama, seperti: teks di sini. Anda mungkin berpikir bahwa karena pemilih ID memiliki fungsi yang sama dengan pemilih kelas independen, mengapa keduanya ada? Elemen HTML dengan ID dapat dimanipulasi oleh JavaScript.