CSS - Attribute Selectors: Unleashing the Power of Precision Styling

Hai teman-teman, para ahli CSS masa depan! Hari ini, kita akan mandi di dunia magis CSS attribute selectors. Siapkan sabuk pengaman Anda, karena kita akan mengemban perjalanan yang akan mengubah cara Anda merancang halaman web. Sebagai guru komputer yang ramah di lingkungan Anda, saya disini untuk mengorbit Anda melalui petualangan ini dengan banyak contoh, penjelasan, dan mungkin saja beberapa lelucon ayah. Mari kita mulai!

Deskripsi

Sebelum kita melompat ke lubuk dalam, mari bicarakan apa itu attribute selectors dan mengapa mereka sangat menakjubkan. Bayangkan Anda di sebuah pesta besar (dokumen HTML), dan Anda ingin menemukan semua orang yang memakai sepatu merah (elemen dengan atribut tertentu). Attribute selectors seperti detektif pesta pribadi Anda, membantu Anda menentukan tepat siapa yang Anda cari tanpa mengganggu seluruh kerumunan.

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

Sekarang, mari kita jelajahi jenis attribute selectors yang berbeda, shall we?

CSS [attribute] Selector

Selector [attribute] paling dasar. Ini menargetkan semua elemen yang memiliki atribut yang ditentukan, tanpa menghiraukan nilainya.

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

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

Dalam contoh ini, hanya tautan pertama yang akan berubah warna biru dan hilang garis bawahnya, karena ia memiliki atribut href. Tag <a> kedua akan tetap unchanged. Itu seperti menemukan semua pengunjung pesta yang memiliki name tag, tanpa peduli nama mereka adalah apa!

CSS [attribute="value"] Selector

Ketika Anda ingin lebih spesifik, selector [attribute="value"] datang ke bantuan. Ini menargetkan elemen tempat 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 mendapatkan border merah. Itu seperti menemukan semua VIP di pesta dengan pergelangan emas!

CSS [attribute*="value"] Selector

Selector [attribute*="value"] seperti anjing penjejak - ia mencium semua elemen tempat nilai atribut mengandung substring yang ditentukan, di mana saja dalam nilai itu.

<p title="Saya suka CSS">Paragraf 1</p>
<p title="HTML itu keren">Paragraf 2</p>
<p title="JavaScript patah hati">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 menemukan siapa saja di pesta yang nama mereka mengandung "Smith", apakah itu John Smith, Smithson, atau Blacksmith!

CSS [attribute^="value"] Selector

Selector [attribute^="value"] sulit - ia hanya memilih elemen tempat nilai atribut 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 warna hijau. Itu seperti menemukan semua pengunjung pesta yang nama mereka dimulai dengan "A"!

CSS [attribute$="value"] Selector

Di sisi lain, selector [attribute$="value"] menargetkan elemen tempat nilai atribut 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 mendapatkan background kuning. Itu seperti menemukan semua pengunjung pesta yang nama belakang mereka berakhir dengan "son"!

CSS [attribute|="value"] Selector

Selector [attribute|="value"] unik. Itu memilih elemen tempat nilai atribut tepat "value" atau dimulai dengan "value" segera 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>

"English" dan "American English" akan digeser. Itu sempurna untuk styling khusus bahasa!

CSS [attribute~="value"] Selector

Selector [attribute~="value"] menargetkan elemen tempat nilai atribut mengandung kata tertentu, diapit oleh ruang.

<p class="buah apel">Apel</p>
<p class="buah jeruk">Jeruk</p>
<p class="sayur wortel">Wortel</p>

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

"Apel" dan "Jeruk" akan berubah warna ungu. Itu seperti menemukan semua pengunjung pesta yang memiliki "dancer" sebagai salah satu hobi mereka!

Attribute Selectors For href Links

Attribute selectors 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.

Attribute Selectors For Inputs

Attribute selectors menonjol saat bekerja dengan input form:

<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 pada input email, dan menandai checkbox yang dicentang.

Attribute Selectors For Title

Kami dapat menggunakan attribute selectors untuk styling elemen berdasarkan atribut title mereka:

<div title="Important">Ini penting</div>
<div title="Read more">Klik untuk diperluas</div>

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

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

Attribute Selectors For Language

Styling khusus bahasa sangat mudah dengan attribute selectors:

<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 gaya yang berbeda ke konten dalam bahasa yang berbeda.

CSS Multiple Attribute Selectors

Anda dapat menggabungkan beberapa attribute selectors untuk targeting yang lebih tepat:

<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 gayakan hanya tautan eksternal yang membuka di tab baru.

CSS Attribute Selectors With Sibling Combinator

Attribute selectors 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 saat mereka invalid.

Dan itu adalah, teman-teman! Panduan komprehensif tentang CSS attribute selectors. Ingat, latihan membuat sempurna, jadi jangan khawatir untuk mencoba pemilih ini dalam proyek Anda. Mereka seperti bahan rahasia yang dapat membuat CSS Anda dari baik ke bagus!

Sebelum kita selesai, ini adalah tabel praktis yang menyummarisasi semua attribute selectors yang kita pelajari:

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
[attribute~="value"]	[class~="highlight"]	Memilih elemen dengan nilai atribut yang mengandung kata tertentu

Happy coding, dan may the selector be with you!

Credits: Image by storyset