Pada tutorial sebelumnya, kita sudah belajar Tutorial Belajar CSS Bagian 30 : Cara Menggunakan Gradient di CSS. Pada tutorial ini, kita akan belajar cara menggunakan attribute selector di CSS.
Sebuah attribute selector memilih elemen HTML yang memiliki attribute tertentu atau attribute dengan nilai tertentu.
Memahami Attribute Selector
Attribute selector CSS menyediakan cara yang mudah dan ampuh untuk menerapkan style pada elemen HTML berdasarkan keberadaan attribute atau nilai attribute tertentu.
Anda dapat membuat attribute selector dengan meletakkan attribute—secara opsional dengan nilai—dalam sepasang tanda kurung siku. Anda juga dapat menempatkan tipe selector elemen di depannya.
Bagian berikut menjelaskan attribute selector yang paling umum.
CSS [attribute] Selector
Ini adalah bentuk paling sederhana dari attribute selector yang menerapkan aturan style ke elemen jika ada attribute tertentu.
Misalnya, kita dapat menata semua elemen yang memiliki attribute title dengan menggunakan aturan style berikut:
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="utf-8">
<title>Contoh dari attribute selector</title>
<style>
[title] {
color:blue;
}
</style>
</head>
<body>
<h1 title="heading">Attribute Selector</h1>
<p title="paragraph">Warna dari paragraph ini akan menjadi biru.</p>
</body>
</html>
Selector [title] pada contoh di atas cocok dengan semua elemen yang memiliki attribute title.
Anda juga dapat membatasi pilihan ini ke elemen HTML tertentu dengan menempatkan attribute selector setelah jenis selector elemen, seperti ini:
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="utf-8">
<title>Contoh dari attribute selector</title>
<style>
abbr[title] {
color: red;
}
</style>
</head>
<body>
<p><abbr title="Hyper Text Markup Language">HTML</abbr> adalah bahasa World Wide Web.</p>
</body>
</html>
Selector abbr[title] hanya cocok dengan elemen <abbr> yang memiliki attribute title, sehingga cocok dengan singkatan, tetapi tidak cocok dengan anchor elemen yang memiliki attribute title.
CSS [attribute=”nilai”] Selector
Anda dapat menggunakan operator = untuk membuat attribute selector cocok dengan elemen apa pun yang nilai attributenya sama persis dengan nilai yang diberikan:
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="utf-8">
<title>Contoh dari attribute selector</title>
<style>
input[type="text"] {
border:1px solid red;
}
input[type="submit"] {
border:1px solid green;
}
</style>
</head>
<body>
<form>
<input type="text">
<input type="submit" value="Submit">
</form>
</body>
</html>
Selector dalam contoh di atas cocok dengan semua elemen <input> yang memiliki attribute type dengan nilai yang sama dengan submit.
CSS [attribute~=”nilai”] Selector
Anda dapat menggunakan operator ~= untuk membuat attribute selector cocok dengan elemen apa pun yang nilai attributenya adalah daftar nilai yang dipisahkan spasi (seperti class=”alert warning”) , salah satunya persis sama dengan nilai yang ditentukan:
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="utf-8">
<title>Contoh dari attribute selector</title>
<style>
[class~="warning"] {
color: #fff;
background: red;
}
</style>
</head>
<body>
<p class="warning">Style akan berlaku untuk paragraf ini.</p>
<p class="warning highlight">Style juga akan berlaku untuk paragraf ini.</p>
<p class="highlight">Style tidak akan berlaku untuk paragraf ini.</p>
</body>
</html>
Selektor ini cocok dengan elemen HTML apa pun dengan attribute class yang berisi nilai yang dipisahkan spasi, contohnya adalah warning.
Jadi, selector ini akan memberikan style pada setiap elemen yang mengandung nilai warning.
CSS [attribute|=”nilai”] Selector
Anda dapat menggunakan operator |= untuk membuat attribute selector cocok dengan elemen apa pun yang attributenya memiliki nilai yang dipisahkan tanda hubung yang dimulai dengan nilai yang ditentukan:
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="utf-8">
<title>Contoh dari attribute selector</title>
<style>
p[lang|=id] {
color: #fff;
background: blue;
}
</style>
</head>
<body>
<p lang="id">Style akan berlaku untuk paragraf ini.</p>
<p lang="id-us">Style juga akan berlaku untuk paragraf ini.</p>
<p lang="us">Style tidak akan berlaku untuk paragraf ini.</p>
</body>
</html>
Selector dalam contoh di atas cocok dengan semua elemen yang memiliki attribute lang berisi nilai yang dimulai dengan id, apakah nilai itu diikuti oleh tanda hubung atau tidak dan lebih banyak karakter.
Dengan kata lain, selector ini cocok dengan elemen attribute lang yang memiliki nilai id, id-US, id-GB, dan seterusnya tetapi tidak US-id, GB-id.
CSS [attribute^=”nilai”] Selector
Anda dapat menggunakan operator ^= untuk membuat attribute selector cocok dengan elemen apa pun yang nilai attributenya dimulai dengan nilai yang ditentukan.
Tidak harus satu kata utuh.
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="utf-8">
<title>Contoh dari attribute selector</title>
<style>
a[href^="http://"] {
background: url("https://img.icons8.com/office/16/000000/link.png") 100% 50% no-repeat;
padding-right: 15px;
}
</style>
</head>
<body>
<p><a href="http://www.google.com" target="_blank" rel="noopener">Google</a></p>
</body>
</html>
Selector dalam contoh di atas akan menargetkan semua tautan eksternal dan menambahkan ikon kecil yang menunjukkan bahwa tautan tersebut akan terbuka di tab atau jendela baru.
CSS [attribute$=”nilai”] Selector
Demikian pula, Anda dapat menggunakan operator $= untuk memilih semua elemen yang nilai attributenya diakhiri dengan nilai tertentu.
Tidak harus satu kata utuh.
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="utf-8">
<title>Contoh dari attribute selector</title>
<style>
a[href$=".pdf"] {
background: url("https://img.icons8.com/office/16/000000/pdf.png") 0 50% no-repeat;
padding-left: 20px;
}
</style>
</head>
<body>
<p><a href="/examples/downloads/masters.pdf">Download PDF</a></p>
</body>
</html>
Selector dalam contoh di atas memilih semua elemen <a> yang tertaut ke dokumen PDF dan menambahkan ikon PDF kecil untuk memberikan petunjuk kepada pengguna tentang tautan tersebut.
CSS [attribute*=”nilai”] Selector
Anda dapat menggunakan operator *= untuk membuat attribute selector cocok dengan semua elemen yang nilai attributenya berisi nilai tertentu.
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="utf-8">
<title>Contoh dari attribute selector</title>
<style>
[class*="warning"] {
color: #fff;
background: red;
}
</style>
</head>
<body>
<p class="warning">Style akan berlaku untuk paragraf ini.</p>
<p class="alert warning">Style juga akan berlaku untuk paragraf ini.</p>
<p class="alert-warning">Style juga akan berlaku untuk paragraf ini.</p>
<p class="alert_warning">Style juga akan berlaku untuk paragraf ini.</p>
<p class="highlight">Style tidak akan berlaku untuk paragraf ini.</p>
</body>
</html>
Selektor ini pada contoh di atas cocok dengan semua elemen HTML dengan class attribute yang nilainya berisi warning.
Misalnya, cocok dengan elemen yang memiliki nilai class warning, alert warning, alert-warning atau alert_warning dll.
Styling Forms dengan Atribut Selectors
Attribuet selector sangat berguna untuk menata form tanpa class atau id:
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="utf-8">
<title>Contoh dari CSS Attribute Selector</title>
<style>
input[type="text"], input[type="password"] {
width: 150px;
display: block;
margin-bottom: 10px;
background: yellow;
}
input[type="submit"] {
padding: 2px 10px;
border: 1px solid #804040;
background: #ff8040;
}
</style>
</head>
<body>
<form>
<label>Username: <input type="text"></label>
<label>Password: <input type="password"></label>
<input type="submit" value="Login">
</form>
</body>
</html>
Semoga tutorial ini bisa membantu Anda untuk belajar cara menggunakan attribute seletor di CSS.
0 Komentar