CSS - Pemilih Atribut: Mengungkapkan Kekuatan Penyusunannya

Hai teman-teman, para ahli CSS masa depan! Hari ini, kita akan masuk ke dunia magis pemilih atribut CSS. Siapkan sabuk pengaman Anda, karena kita akan mengemban perjalanan yang akan merubah cara Anda memesan halaman web Anda. Sebagai guru komputer tetangga Anda, saya di sini untuk mengarahkan Anda melalui petualangan ini dengan banyak contoh, penjelasan, dan mungkin ada juga beberapa lelucon ayah. Mari kita mulai!

Deskripsi

Sebelum kita melompat ke lubang dalam, mari berbicara tentang apa itu pemilih atribut dan mengapa mereka sangat menakjubkan. Bayangkan Anda di sebuah pesta besar (dokumen HTML), dan Anda ingin mencari semua orang yang memakai sepatu merah (elemen dengan atribut tertentu). Pemilih atribut adalah seperti detektif pesta pribadi Anda, membantu Anda menentukan tepat siapa yang Anda cari tanpa mengganggu seluruh kerumunan.

Dalam CSS, pemilih atribut memungkinkan kita untuk menargetkan elemen HTML berdasarkan atribut atau nilai atribut mereka. Ini memberikan kita fleksibilitas dan presisi yang sangat besar dalam styling, tanpa perlu tambahan kelas atau ID. Itu seperti memiliki pisau Swiss Army untuk CSS Anda - multifungsi, presisi, dan sangat praktis!

Sekarang, mari kita jelajahi jenis-jenis pemilih atribut yang berbeda, shall we?

Pemilih CSS [attribute]

Pemilih paling dasar adalah pemilih [attribute]. Ini menargetkan semua elemen yang memiliki atribut yang ditentukan, tanpa memperhatikan nilaiannya.

<a href="https://www.example.com">Klik saya!</a>
<a>Saya hanya teks</a>

<style>
[href] {
color: biru;
text-decoration: none;
}
</style>

Dalam contoh ini, hanya tombol pertama yang akan berubah menjadi biru dan hilang garis bawahnya, karena itu memiliki atribut href. Tag <a> kedua akan tetap unchanged. Itu seperti mencari semua pengunjung pesta dengan tag nama, tanpa memperhatikan nama mereka!

Pemilih CSS [attribute="value"]

Ketika Anda ingin lebih spesifik, pemilih [attribute="value"] datang ke pertolongan. Ini menargetkan elemen di mana atribut cocok dengan nilai tepat.

<input type="text" placeholder="Masukkan nama Anda">
<input type="password" placeholder="Masukkan sandi Anda">

<style>
[type="password"] {
border: 2px solid merah;
}
</style>

Di sini, hanya input sandi yang akan mendapat border merah. Itu seperti mencari semua VIP di pesta dengan pergelangan emas!

Pemilih CSS [attribute*="value"]

Pemilih [attribute*="value"] seperti anjing penggembala - dia mencium semua elemen di mana nilai atributnya mengandung substring yang ditentukan, di mana saja dalam nilai.

<p title="Saya suka CSS">Paragraf 1</p>
<p title="HTML adalah keren">Paragraf 2</p>
<p title="JavaScript menakjubkan">Paragraf 3</p>

<style>
[title*="CSS"] {
font-weight: tebal;
}
</style>

Dalam kasus ini, hanya "Paragraf 1" yang akan menjadi tebal, karena judulnya mengandung "CSS". Itu seperti mencari siapa pun di pesta yang namanya mengandung "Smith", apakah itu John Smith, Smithson, atau Blacksmith!

Pemilih CSS [attribute^="value"]

Pemilih [attribute^="value"] adalah selektif - dia hanya memilih elemen di mana nilai atributnya dimulai dengan nilai yang ditentukan.

<a href="https://www.example.com">Tautan HTTPS</a>
<a href="http://www.example.com">Tautan HTTP</a>

<style>
[href^="https"] {
color: hijau;
}
</style>

Hanya tautan HTTPS yang akan berubah menjadi hijau. Itu seperti mencari semua pengunjung pesta yang namanya dimulai dengan "A"!

Pemilih CSS [attribute$="value"]

Pada sisi lain, pemilih [attribute$="value"] menargetkan elemen di mana nilai atributnya berakhir dengan nilai yang ditentukan.

<a href="document.pdf">Dokumen PDF</a>
<a href="image.jpg">Gambar JPG</a>

<style>
[href$=".pdf"] {
background-color: kuning;
}
</style>

Tautan PDF mendapat background kuning. Itu seperti mencari semua pengunjung pesta yang namanya berakhir dengan "son"!

Pemilih CSS [attribute|="value"]

Pemilih [attribute|="value"] unik. Dia memilih elemen di mana nilai atributnya tepat "value" atau dimulai dengan "value" diikuti oleh tanda minus.

<p lang="en">English</p>
<p lang="en-US">American English</p>
<p lang="fr">French</p>

<style>
[lang|="en"] {
font-style: italic;
}
</style>

Kedua "English" dan "American English" akan dicetak miring. Itu sempurna untuk styling khusus bahasa!

Pemilih CSS [attribute~="value"]

Pemilih [attribute~="value"] menargetkan elemen di mana nilai atributnya mengandung kata tertentu, diapit oleh spasi.

<p class="buah apple">Apel</p>
<p class="buah orange">Jeruk</p>
<p class="sayur carrot">Wortel</p>

<style>
[class~="buah"] {
color: ungu;
}
</style>

Kedua "Apel" dan "Jeruk" akan berubah menjadi ungu. Itu seperti mencari siapa pun di pesta yang memiliki "penari" sebagai salah satu hobi mereka!

Pemilih Atribut untuk Tautan href

Pemilih atribut sangat berguna untuk styling tautan berdasarkan tujuannya:

<a href="https://www.example.com">Tautan Eksternal</a>
<a href="/internal-page">Tautan Internal</a>
<a href="document.pdf">Dokumen PDF</a>

<style>
a[href^="https"] {
color: hijau;
}
a[href^="/"] {
color: biru;
}
a[href$=".pdf"] {
color: merah;
}
</style>

Kode ini memberikan warna yang berbeda untuk tautan eksternal, tautan internal, dan tautan PDF.

Pemilih Atribut untuk Input

Pemilih atribut menonjol saat bekerja dengan input formulir:

<input type="text" required>
<input type="email">
<input type="checkbox" checked>

<style>
input[required] {
border: 2px solid merah;
}
input[type="email"] {
background-color: biru muda;
}
input[checked] {
outline: 2px solid hijau;
}
</style>

Styling ini membuat field yang diperlukan tampak menonjol, memberikan background biru muda untuk input email, dan menandai kotak centang yang dicentang.

Pemilih Atribut untuk Title

Kami dapat menggunakan pemilih atribut untuk styling elemen berdasarkan atribut title mereka:

<div title="Penting">Ini penting</div>
<div title="Baca lebih banyak">Klik untuk memperluas</div>

<style>
[title="Penting"] {
font-weight: tebal;
color: merah;
}
[title*="banyak"] {
cursor: pointer;
text-decoration: garis bawah;
}
</style>

Ini membuat konten penting tampak menonjol dan menandai elemen yang dapat diklik.

Pemilih Atribut untuk Bahasa

Styling khusus bahasa adalah mudah dengan pemilih atribut:

<p lang="en">Hello, World!</p>
<p lang="es">¡Hola, Mundo!</p>
<p lang="fr">Bonjour, le Monde!</p>

<style>
[lang="en"] {
font-family: 'Arial', sans-serif;
}
[lang="es"] {
font-style: italic;
}
[lang="fr"] {
font-weight: tebal;
}
</style>

Ini menerapkan styling yang berbeda ke konten dalam bahasa yang berbeda.

Pemilih Atribut Ganda CSS

Anda dapat menggabungkan pemilih atribut ganda untuk targeting yang lebih presisi:

<a href="https://www.example.com" target="_blank" rel="noopener">Tautan Eksternal Aman</a>
<a href="https://www.example.com">Tautan Eksternal Reguler</a>

<style>
a[href^="https"][target="_blank"] {
color: hijau;
text-decoration: none;
}
</style>

Ini styling hanya tautan eksternal yang membuka di tab baru.

Pemilih Atribut Dengan Combinator Sibling

Pemilih atribut dapat digabungkan dengan pemilih lain untuk styling lanjut:

<label for="name">Nama:</label>
<input id="name" type="text" required>
<span class="error">Silakan masukkan nama Anda</span>

<style>
input[required] + span.error {
display: none;
color: merah;
}
input[required]:invalid + span.error {
display: inline;
}
</style>

Ini menampilkan pesan kesalahan di sebelah field yang diperlukan hanya ketika mereka invalid.

Dan itu adalah keseluruhan panduan lengkap ke pemilih atribut CSS. Ingat, latihan membuat sempurna, jadi jangan takut untuk mencoba pemilih ini dalam proyek Anda. Mereka seperti bahan rahasia yang dapat membuat CSS Anda menjadi baik ke lebih baik!

Sebelum kita selesai, ini adalah tabel praktis yang menggabungkan semua pemilih atribut yang kitaulas:

Pemilih	Contoh	Deskripsi
[attribute]	[href]	Memilih elemen dengan atribut yang ditentukan
[attribute="value"]	[type="text"]	Memilih elemen dengan atribut dan nilai tertentu
[attribute*="value"]	[title*="hello"]	Memilih elemen dengan nilai atribut yang mengandung nilai tertentu
[attribute^="value"]	[href^="https"]	Memilih elemen dengan nilai atribut yang dimulai dengan nilai tertentu
[attribute$="value"]	[href$=".pdf"]	Memilih elemen dengan nilai atribut yang berakhir dengan nilai tertentu
[attribute|="value"]	[lang|="en"]	Memilih elemen dengan nilai atribut yang tepat "value" atau dimulai dengan "value" diikuti oleh tanda minus
[attribute~="value"]	[class~="highlight"]	Memilih elemen dengan nilai atribut yang mengandung kata tertentu

Hai coding, dan may the selector be with you!

Credits: Image by storyset