CSS - Pemilih: Catapult anda ke Halaman Web yang Menarik

Hai sana, bintang rekaan web masa depan! Saya begitu gembira untuk menjadi pandu anda dalam perjalanan yang menarik melalui dunia pemilih CSS. Sebagai seseorang yang telah mengajar sains komputer selama lebih sepuluh tahun, saya dapat katakan kepada anda bahwa menguasai pemilih adalah seperti membuka petak Harta Karun kemungkinan rekaan web. Jadi, mari kita masuk dan membuat halaman web anda bersinar!

Jenis Pemilih

Sebelum kita memulakan petualangan kita, mari kita lihat secara cepat jenis pemilih yang berbeza yang kita akan jelajah:

Jenis Pemilih	Contoh	Keterangan
Universal	*	Memilih semua elemen
Elemen	p	Memilih semua elemen
Kelas	.classname	Memilih elemen dengan class="classname"
ID	#idname	Memilih elemen dengan id="idname"
Atribut	[attribute]	Memilih elemen dengan atribut yang ditentukan
Kumpulan	selector1, selector2	Memilih semua elemen yang sepadan dengan mana-mana pemilih
Pseudo-class	:hover	Memilih elemen dalam keadaan tertentu
Pseudo-element	::first-line	Memilih sebahagian elemen
Descendant	div p	Memilih semua elemen di dalam elemen
Child	div > p	Memilih semua elemen di mana ibu adalah
Adjacent Sibling	div + p	Memilih elemen pertama yang datang segera selepas div
General Sibling	div ~ p	Memilih semua elemen yang saudara elemen

Sekarang, mari kita jelajah setiap satu secara detil!

Pemilih Universal CSS

Pemilih universal adalah seperti kapal terjun Swiss - ia memilih segalanya! Ia diwakili oleh tanda bintang (*).

* {
margin: 0;
padding: 0;
box-sizing: border-box;
}

Kod ini mengembalikan margin dan padding untuk semua elemen dan menetapkan sifat box-sizing. Ia sering digunakan di awal stylesheet untuk membuat permulaan bersih.

Pemilih Elemen CSS

Pemilih elemen mengarahkan elemen HTML tertentu. Mereka ringkas tetapi kuat.

p {
font-size: 16px;
line-height: 1.5;
}

h1 {
color: #333;
font-family: 'Arial', sans-serif;
}

Di sini, kita menyesuaikan semua

elemen untuk memiliki saiz font 16 pixel dan tinggi baris 1.5. Kita juga memberikan semua

elemen warna kelabu gelap dan menetapkan font mereka ke Arial.

Pemilih Kelas CSS

Pemilih kelas sangat fleksibel. Mereka membolehkan anda aplikasikan gaya ke beberapa elemen yang mempunyai kelas yang sama.

.highlight {
background-color: yellow;
font-weight: bold;
}

.error-message {
color: red;
border: 1px solid red;
padding: 10px;
}

Dalam contoh ini, mana-mana elemen dengan class="highlight" akan mempunyai latar belakang kuning dan teks tebal. Elemen dengan class="error-message" akan ditunjukkan dalam merah dengan sempadan merah dan beberapa padding.

Pemilih ID CSS

Pemilih ID digunakan untuk gayakan elemen tunggal, unik. Mereka diawali dengan simbol hash (#).

#header {
background-color: #f0f0f0;
padding: 20px;
}

#main-content {
max-width: 800px;
margin: 0 auto;
}

Kod ini gayakan elemen dengan id="header" dan elemen dengan id="main-content". Ingat, ID harus unik dalam halaman!

Pemilih Atribut CSS

Pemilih atribut mengarahkan elemen berdasarkan atribut atau nilai atribut mereka.

[type="text"] {
border: 1px solid #ccc;
padding: 5px;
}

[href^="https"] {
color: green;
}

[class*="btn"] {
cursor: pointer;
}

Di sini, kita menggayakan semua elemen dengan type="text", pautan yang dimulai dengan "https", dan elemen yang classnya mengandungi "btn".

Pemilih Kumpulan CSS

Pemilih kumpulan membolehkan anda aplikasikan gaya yang sama ke pemilih berganda. Mereka dipisahkan oleh koma.

h1, h2, h3 {
font-family: 'Georgia', serif;
color: #333;
}

.error, .warning {
font-weight: bold;
}

Kod ini aplikasikan gaya yang sama kepada h1, h2, dan h3 elemen, dan membuat kedua-dua .error dan .warning kelas tebal.

Pemilih Pseudo Class CSS

Pemilih pseudo-class mengarahkan elemen dalam keadaan tertentu.

a:hover {
text-decoration: underline;
}

input:focus {
outline: 2px solid blue;
}

li:nth-child(odd) {
background-color: #f0f0f0;
}

Gaya ini menandai pautan pada hover, menambah garis kerusi 2px ke input yang difokuskan, dan memberikan latar belakang kelabu ke setiap item senarai ganjil.

Pemilih Pseudo Element CSS

Pemilih pseudo-element membolehkan anda gayakan sebahagian khusus dari elemen.

p::first-letter {
font-size: 2em;
font-weight: bold;
}

h1::before {
content: "? ";
}

div::selection {
background-color: yellow;
}

Kod ini membesarkan dan menegakkan huruf pertama paragraf, menambah emoji jari menuding sebelum h1 elemen, dan membuat teks yang dipilih di div mempunyai latar belakang kuning.

Pemilih Descendant CSS

Pemilih descendant mengarahkan elemen yang adalah keturunan elemen lain.

article p {
line-height: 1.6;
}

.container .box {
border: 1px solid #ccc;
}

Di sini, kita menggayakan paragraf di dalam artikel dan elemen dengan class "box" yang berada di dalam elemen dengan class "container".

Pemilih Child CSS

Pemilih child mengarahkan anak langsung elemen.

ul > li {
list-style-type: square;
}

div > p {
margin-bottom: 10px;
}

Kod ini memberikan tanda bulet segi empat ke item senarai yang adalah anak langsung senarai tak terurut, dan menambah margin bawah ke paragraf yang adalah anak langsung div.

Pemilih Adjacent Sibling CSS

Pemilih adjacent sibling mengarahkan elemen yang datang segera selepas elemen lain.

h1 + p {
font-size: 1.2em;
font-weight: bold;
}

.button + .button {
margin-left: 10px;
}

Di sini, kita membuat paragraf pertama selepas h1 lebih besar dan tebal, dan menambah margin kiri ke butang yang datang segera selepas butang lain.

Pemilih General Sibling CSS

Pemilih general sibling mengarahkan elemen yang saudara elemen lain, walaupun jika mereka tidak langsung bersebelahan.

h1 ~ p {
color: #666;
}

.highlight ~ li {
font-style: italic;
}

Kod ini mengubah warna semua paragraf yang saudara h1 elemen, dan menegakkan item senarai yang datang selepas elemen dengan class "highlight".

Pemilih Nested CSS

Pemilih nested membolehkan anda menulis CSS yang lebih ringkas dan mudah dibaca dengan menyahkati pemilih di dalam yang lain.

.container {
max-width: 1200px;
margin: 0 auto;

.header {
background-color: #f0f0f0;
padding: 20px;

h1 {
color: #333;
}
}

.content {
padding: 20px;

p {
line-height: 1.6;
}
}
}

Struktur ini dengan jelas menunjukkan hubungan antara elemen dan membuat CSS lebih terorganisasi.

Ciri-ciri Pemilih Nested CSS

1. Peningkatan keterbacaan: Penyahkatan mencerminkan struktur HTML anda.
2. Penurunan pengulangan: Anda tidak perlu mengulangi pemilih induk.
3. Peningkatan mudah penyelenggaraan: Perubahan kepada pemilih induk secara automatik menerapkan kepada pemilih nested.
4. Batasan lingkungan: Gaya secara alami dikelilingi oleh konteks induk.

Ingat, walaupun penyahkatan boleh kuat, jangan penahkati terlalu mendalam kerana ia boleh membuat CSS lebih sukar difahami dan dipelihara.

Dan itu, murid rekaan web yang bersemangat! Anda telah menyelesaikan perjalanan yang cepat melalui pemilih CSS. Dengan alat ini di tangan anda, anda sudah dalam jalur untuk mencipta halaman web yang indah. Ingat, latihan menjadikan sempurna, jadi jangan takut untuk mencuba pemilih berbeza dan kombinasi. Selamat coding!

Credits: Image by storyset