Selector CSS [atribut]
Selector [atribut] digunakan untuk memilih elemen dengan atribut tertentu.
Contoh berikut memilih semua elemen <a> dengan atribut target:
Contoh
<!DOCTYPE html>
<html>
<head>
<style>
a[target] {
background-color: yellow;
}
</style>
</head>
<body>
<h2> Selector[atribut] CSS </h2>
<p>Tautan dengan atribut target memiliki latar belakang kuning.</p>
<a href=" https://www.w3schools.com">w3schools.com </a>
<a href=" http://www.disney.com" target="_blank">disney.com </a>
<a href=" http://www.wikipedia.org" target="_top">wikipedia.org </a>
</body></html>Selector CSS [attribute=”value”]
Selector [attribute="value"] digunakan untuk memilih elemen dengan nilai atribut tertentu.
Contoh berikut memilih semua elemen <a> dengan nilai atribut target=”_blank”:
Contoh
<!DOCTYPE html>
<html>
<head>
<style>
a[target=_blank] {
background-color: yellow;
}
</style>
</head>
<body>
<h2> Selector[attribute="value"] CSS </h2>
<p>Tautan dengan target="_blank" memiliki latar belakang kuning.</p>
<a href=" https://www.w3schools.com">w3schools.com </a>
<a href=" http://www.disney.com" target="_blank">disney.com </a>
<a href=" http://www.wikipedia.org" target="_top">wikipedia.org </a>
</body></html>Selector CSS [atribut~=”value”]
Selector [attribute~="value"] digunakan untuk memilih elemen dengan nilai atribut yang berisi kata tertentu.
Contoh berikut memilih semua elemen dengan atribut judul yang berisi daftar kata yang dipisahkan spasi, salah satunya adalah “flower“:
Contoh
<!DOCTYPE html>
<html>
<head>
<style>
[title~=flower] {
border: 5px solid yellow;
}
</style>
</head>
<body>
<h2> Selector[atribut~="value"] CSS </h2>
<p>Semua gambar dengan atribut title yang berisi kata "flower" diberi border kuning.</p>
<img src="klematis4_big.jpg" title="flower klematis" width="150" height="113">
<img src="img_flwr.jpg" title="flower" width="224" height="162">
<img src="img_tree.png" title="pohon" width="200" height="358">
</body></html>Contoh di atas akan cocok dengan elemen dengan title=”flower”, title=”summer flower”, dan title=”flower new”, tetapi tidak dengan title=”my-flower” atau title=”flowers”.
Selector CSS [atribut|=”value”]
Selector [attribute|="value"] digunakan untuk memilih elemen dengan atribut yang ditentukan, yang nilainya bisa persis dengan nilai yang ditentukan, atau nilai yang ditentukan diikuti dengan tanda hubung (-).
Catatan: Nilai harus berupa kata utuh, [=seperti class=”top”, atau diikuti dengan tanda hubung ( – ), seperti class=”top-text”.< /p>
Contoh
<!DOCTYPE html>
<html>
<head>
<style>
[class|=top] {
background: yellow;
}
</style>
</head>
<body>
<h2> Selector[atribut|="value"] CSS </h2>
<h1 class="top-header">Selamat datang</h1>
<p class="top-text">Halo dunia!</p>
<p class="topcontent">Apakah Anda mempelajari CSS?</p>
</body></html>Selector CSS [atribut^=”value”]
Selector [attribute^="value"] digunakan untuk memilih elemen dengan atribut yang ditentukan, yang nilainya dimulai dengan nilai yang ditentukan.
Contoh berikut memilih semua elemen dengan nilai atribut class yang dimulai dengan “top”:
Contoh
<!DOCTYPE html>
<html>
<head>
<style>
[class^="top"] {
background: yellow;
}
</style>
</head>
<body>
<h2> Selector[atribut^="value"] CSS </h2>
<h1 class="top-header">Selamat datang</h1>
<p class="top-text">Halo dunia!</p>
<p class="topcontent">Apakah Anda mempelajari CSS?</p>
</body></html>Selector CSS [atribut$=”value”]
Selector [attribute$="value"] digunakan untuk memilih elemen yang nilai atributnya diakhiri dengan nilai tertentu.
Contoh berikut memilih semua elemen dengan nilai atribut class yang diakhiri dengan “test“:
Contoh
<!DOCTYPE html>
<html>
<head>
<style>
[class$="test"] {
background: yellow;
}
</style>
</head>
<body>
<h2> Selector[atribut$="value"] CSS </h2>
<div class="first_test">Elemen div pertama.</div>
<div class="second">Elemen div kedua.</div>
<div class="my-test">Elemen div ketiga.</div>
<p class="mytest">Ini adalah beberapa teks dalam sebuah paragraf.</p>
</body></html>Selector CSS [atribut*=”value”]
Selector [attribute*="value"] digunakan untuk memilih elemen yang nilai atributnya berisi nilai tertentu.
Contoh berikut memilih semua elemen dengan nilai atribut class yang berisi “te”:
Contoh
<!DOCTYPE html>
<html>
<head>
<style>
[class*="te"] {
background: yellow;
}
</style>
</head>
<body>
<h2> Selector[atribut*="value"] CSS </h2>
<div class="first_test">Elemen div pertama.</div>
<div class="second">Elemen div kedua.</div>
<div class="my-test">Elemen div ketiga.</div>
<p class="mytest">Ini adalah beberapa teks dalam sebuah paragraf.</p>
</body></html>Styling Forms
Selector atribut bisa berguna untuk menata form tanpa class atau ID:
Contoh
<!DOCTYPE html>
<html>
<head>
<style>
input[type=text] {
width: 150px;
display: block;
margin-bottom: 10px;
background-color: yellow;
}
input[type=button] {
width: 120px;
margin-left: 35px;
display: block;
}
</style>
</head>
<body>
<h2>Styling Form</h2>
<form name="input" action="" method="get">
Nama depan:<input type="text" name="Name" value="Peter" size="20">
Nama belakang:<input type="text" name="Name" value="Griffin" size="20">
<input type="button" value="Tombol Contoh">
</bentuk>
</body></html>Referensi Semua Selector CSS Attribute
Selector CSS [atribut]
Contoh
Style semua elemen <a> dengan atribut target:
<!DOCTYPE html>
<html>
<head>
<style>
a[target] {
background-color: yellow;
}
</style>
</head>
<body>
<h1>Demo selector[atribut] </h1>
<p>Tautan dengan atribut target diberi style dengan latar belakang kuning.</p>
<a href=" <a href="https://www.w3schools.com">https://www.w3schools.com</a> ">W3schools.com</a><br>
<a href=" <a href="https://www.google.com">https://www.google.com</a> " target="_blank">Google.com</a><br>
<a href=" <a href="https://www.microsoft.com">https://www.microsoft.com</a> " target="_blank">Microsoft.com</a>
</body></html>Definisi dan Penggunaan
Selector [atribut] digunakan untuk memilih elemen dengan atribut yang ditentukan.
Selector CSS [atribut=value]
Contoh
Style elemen <a> dengan target=”_blank”:
<!DOCTYPE html>
<html>
<head>
<style>
a[target=_blank] {
background-color: yellow;
}
</style>
</head>
<body>
<h1>Demo selector[attribute=value] </h1>
<p>Tautan dengan target="_blank" diberi style dengan latar belakang kuning.</p>
<a href=" <a href="https://www.w3schools.com">https://www.w3schools.com</a> ">W3schools.com</a><br>
<a href=" <a href="https://www.google.com">https://www.google.com</a> " target="_blank">Google.com</a><br>
<a href=" <a href="https://www.microsoft.com">https://www.microsoft.com</a> " target="_blank">Microsoft.com</a>
</body></html>Definisi dan Penggunaan
Selector [atribut=value] digunakan untuk memilih elemen dengan nilai atribut yang ditentukan.
Contoh
Apabila <input type=”text”> sedang dalam fokus, ubah lebar secara bertahap dari 100px menjadi 250px:
<!DOCTYPE html>
<html>
<head>
<style>
input[type=text] {
width: 100px;
-webkit-transition: width .35s ease-in-out;
transition: width .35s ease-in-out;
}
input[type=text]:focus {
width: 250px;
}
</style>
</head>
<body>
<h1>Properti width</h1>
<p>Atur lebar input menjadi 100 piksel. Namun, saat kolom input mendapatkan fokus, buat lebarnya menjadi 250 piksel:</p>
Cari: <input type="text" name="search">
</body></html>Selector CSS [atribut~=value]
Contoh
Pilih dan style elemen dengan atribut title yang berisi kata “flower”:
<!DOCTYPE html>
<html>
<head>
<style>
[title~=flower] {
border: 5px solid yellow;
}
</style>
</head>
<body>
<h1>Demo selector[atribut~=value] </h1>
<p>Elemen dengan atribut title yang berisi kata "flower" ditambahkan border kuning.</p>
<img src="klematis4_big.jpg" title="flower klematis" width="150" height="113">
<img src="img_flwr.jpg" title="flower" width="224" height="162">
<img src="img_flwr.jpg" title="landscape" width="160" height="120">
</body></html>Definisi dan Penggunaan
Selector [atribut~=value] digunakan untuk memilih elemen dengan nilai atribut yang berisi kata tertentu.
Selector CSS [atribut|=value]
Contoh
Pilih dan style elemen, dengan nilai atribut lang dimulai dengan “en“:
<!DOCTYPE html>
<html>
<head>
<style>
[lang|=en] {
background: yellow;
}
</style>
</head>
<body>
<h1>Demo selector[atribut|=value] </h1>
<p>Elemen dengan atribut lang dengan nilai "en" diberi style dengan latar belakang kuning.</p>
<p lang="id">Halo!</p>
<p lang="en-us">Hai!</p>
<p lang="en-gb">Halo!</p>
<p lang="us">Hai!</p>
<p lang="no">Hei!</p>
</body></html>Definisi dan Penggunaan
Selector [atribut|=value] digunakan untuk memilih elemen dengan nilai atribut yang dimulai dengan nilai yang ditentukan.
Catatan: Nilai harus berupa kata utuh, baik sendiri, seperti lang=”en”, atau diikuti dengan tanda hubung ( – ), seperti lang=”en-us”.
Contoh
Pilih dan style elemen, dengan nilai atribut class dimulai dengan “top“:
<!DOCTYPE html>
<html>
<head>
<style>
[class|=top] {
background: yellow;
}
</style>
</head>
<body>
<h1>Demo selector[atribut|=value] </h1>
<p>Elemen dengan atribut class dengan nilai "top" diberi style dengan latar belakang kuning.</p>
<h1 class="top-header">Selamat datang</h1>
<p class="top-text">Halo dunia!</p>
<p class="content">Apakah Anda mempelajari CSS?</p>
</body></html>Selector CSS [atribut^=value]
Contoh
Tetapkan warna latar pada semua elemen <div> yang memiliki nilai atribut class yang diawali dengan “test“:
<!DOCTYPE html>
<html>
<head>
<style>
div[class^="test"] {
background: #ffff00;
}
</style>
</head>
<body>
<div class="first_test">Elemen div pertama.</div>
<div class="second">Elemen div kedua.</div>
<div class="test">Elemen div ketiga.</div>
<div class="test_ex">Elemen div keempat.</div>
<p class="test">Ini adalah sebuah paragraf.</p>
<p class="test_ex">Ini adalah sebuah paragraf.</p>
</body></html>Definisi dan Penggunaan
Selector [atribut^=value] digunakan untuk memilih setiap elemen dengan nilai atribut yang dimulai dengan nilai yang ditentukan.
Contoh
Tetapkan warna latar belakang pada semua elemen yang memiliki nilai atribut class yang diawali dengan “test“:
<!DOCTYPE html>
<html>
<head>
<style>
[class^="test"] {
background: #ffff00;
}
</style>
</head>
<body>
<div class="first_test">Elemen div pertama.</div>
<div class="second">Elemen div kedua.</div>
<div class="test">Elemen div ketiga.</div>
<div class="test_ex">Elemen div keempat.</div>
<p class="test">Ini adalah sebuah paragraf.</p>
<p class="test_ex">Ini adalah sebuah paragraf.</p>
</body></html>Selector CSS [atribut$=value]
Contoh
Tetapkan warna latar pada semua elemen <div> yang memiliki nilai atribut class yang diakhiri dengan “test“:
<!DOCTYPE html>
<html>
<head>
<style>
div[class$="test"] {
background: #ffff00;
}
</style>
</head>
<body>
<div class="first_test">Elemen div pertama.</div>
<div class="second">Elemen div kedua.</div>
<div class="test">Elemen div ketiga.</div>
<p class="test">Ini adalah beberapa teks dalam sebuah paragraf.</p>
</body></html>Definisi dan Penggunaan
Selector [atribut$=value] akan memilih setiap elemen dengan nilai atribut diakhiri dengan nilai yang ditentukan.
Contoh
Tetapkan warna latar belakang pada semua elemen dengan nilai atribut class yang diakhiri dengan “test“:
<!DOCTYPE html>
<html>
<head>
<style>
[class$="test"] {
background: #ffff00;
}
</style>
</head>
<body>
<div class="first_test">Elemen div pertama.</div>
<div class="second">Elemen div kedua.</div>
<div class="test">Elemen div ketiga.</div>
<p class="test">Ini adalah beberapa teks dalam sebuah paragraf.</p>
</body></html>Selector CSS [atribut*=value]
Contoh
Tetapkan warna latar pada semua elemen <div> yang nilai atribut class yang mengandung “test“:
<!DOCTYPE html>
<html>
<head>
<style>
div[class*="test"] {
background: #ffff00;
}
</style>
</head>
<body>
<div class="first_test">Elemen div pertama.</div>
<div class="second">Elemen div kedua.</div>
<div class="test">Elemen div ketiga.</div>
<p class="test">Ini adalah beberapa teks dalam sebuah paragraf.</p>
</body></html>Definisi dan Penggunaan
Selector [atribut*=value] akan memilih setiap elemen dengan nilai atribut yang mengandung nilai yang ditentukan.
Contoh
Tetapkan warna latar belakang pada semua elemen yang mengandung nilai atribut class yang berisi “test“:
<!DOCTYPE html>
<html>
<head>
<style>
[class*="test"] {
background: #ffff00;
}
</style>
</head>
<body>
<div class="first_test">Elemen div pertama.</div>
<div class="second">Elemen div kedua.</div>
<div class="test">Elemen div ketiga.</div>
<p class="test">Ini adalah beberapa teks dalam sebuah paragraf.</p>
</body></html>Tutorial sebelumnya : Membuat Galeri Gambar Dengan CSS
Tutorial setelahnya : Mengatur Elemen Form Dengan CSS
Semua Tutorial CSS : Tutorial CSS