Belajar CSS Part 29 - Attribute Selector

CSS Attribute Selector

Attribute Selector adalah selector CSS yang digunakan untuk mencari dan menata elemen HTML dengan menggunakan nilai attribut dari tag HTML.

Untuk menggunakan attribute selector, kita menulisnya di dalam tanda kurung siku, seperti contoh berikut ini: [href], img[width=”200px”] atau [href$=”.pdf”].

CSS Selector [attribute]

Selector [attribute] digunakan untuk memilih elemen dengan atribut yang ditentukan.

Contoh berikut memilih semua elemen <a> dengan atribut target:

Contoh

a[target] {
    background-color: yellow;
}

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>

<p>Link dengan atribut target akan memiliki latar belakang kuning:</p>

<a href="https://www.youtube.com">youtube.com</a>
<a href="http://www.disney.com" target="_blank">disney.com</a>
<a href="http://www.wikipedia.org" target="_top">wikipedia.org</a>

<p><b>Catatan:</b> Untuk [<i>attribute</ i>] agar berfungsi di IE8 dan versi sebelumnya, DOCTYPE harus dideklarasikan. </ p>

</body>
</html>

Hasilnya:

CSS Selector [attribute="value"]

Selector [attribute="value"] digunakan untuk memilih elemen dengan atribut dan nilai tertentu.

Contoh berikut akan memilih semua elemen <a> dengan atribut target="_ blank":

Contoh

a[target=_blank] {
    background-color: yellow;
}

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>

<p>Link dengan target="_blank" akan memiliki latar belakang kuning:</p>

<a href="https://www.youtube.com">youtube.com</a>
<a href="http://www.disney.com" target="_blank">disney.com</a>
<a href="http://www.wikipedia.org" target="_top">wikipedia.org</a>

<p><b>Catatan:</b> Untuk [<i>attribute</ i>] agar berfungsi di IE8 dan versi sebelumnya, DOCTYPE harus dideklarasikan. </ p>

</body>
</html>

Hasilnya:

CSS Selector [attribute~="value"]

Selector [attribute~="value"] digunakan untuk memilih elemen dengan nilai atribut yang "mengandung" kata tertentu.

Contoh berikut memilih semua elemen dengan atribut judul yang berisi daftar kata yang dipisahkan spasi, salah satunya adalah "bunga":

Contoh

[title~=gerak] {
    border: 5px solid yellow;
}

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>

<p>Semua gambar dengan atribut judul yang mengandung kata "gerak" mendapat garis kuning.</p>

<img src="nama_gambar.jpg" title="title_gambar" width="150" height="113">
<img src="nama_gambar.gif" title="gerak" width="224" height="162">
<img src="nama_gambar.gif" title="gambar gerak" width="200" height="240">

<p><b>Catatan:</b> Untuk [<i>attribute</i>~=<i>value</i>] agar berfungsi di IE8 dan versi sebelumnya, DOCTYPE harus dideklarasikan.</p>

</body>
</html>

Hasilnya:

CSS Selector [attribute|="value"]
Selector [attribute|="value"] digunakan untuk memilih elemen dengan atribut yang ditentukan dimulai dengan nilai tertentu.

Contoh berikut memilih semua elemen dengan nilai atribut class yang diawali dengan "top":

Catatan: Value harus berupa seluruh kata, baik hanya satu kata, seperti class="top", atau diikuti oleh tanda hubung (-), seperti class="top-text"!

Contoh

[class|=top] {
    background: yellow;
}

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>

<h1 class="top-header">Welcome</h1>
<p class="toptext">Hello world!</p>
<p class="top-content">Apakah Anda suka belajar CSS?</p>

<br>
<p><b>Catatan:</b> Untuk [<i>attribute</i>|=<i>value</i>] agar berfungsi di IE8 dan versi sebelumnya, DOCTYPE harus dideklarasikan.</p>

</body>
</html>

Hasilnya:

CSS Selector [attribute^="value"]

Selector [attribute^="value"] digunakan untuk memilih elemen yang nilai atributnya dimulai dengan nilai yang ditentukan.

Contoh berikut memilih semua elemen dengan nilai atribut kelas yang diawali dengan "top":

Catatan: Nilai tidak harus berupa kata utuh!

Contoh

[class^="top"] {
    background: yellow;
}

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>

<h1 class="top-header">Welcome</h1>
<p class="top-text">Hello world!</p>
<p class="topcontent">Are you learning CSS?</p>

<p><b>Catatan:</b> Untuk [<i>attribute</i>^=<i>value</i>] agar berfungsi di IE8 dan versi sebelumnya, DOCTYPE harus dideklarasikan.</p>

</body>
</html>

Hasilnya:

CSS Selector [attribute$="value"]

Selector [attribute$="value"] digunakan untuk memilih elemen yang nilai atributnya diakhiri dengan nilai yang ditentukan.

Contoh berikut memilih semua elemen dengan nilai atribut class yang diakhiri dengan "test":

Catatan: Nilai tidak harus berupa kata utuh!

Contoh

[class$="test"] {
    background: yellow;
}

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>

<div class="first_test">Elemen div yang pertama.</div>
<div class="second">Elemen div yang kedua.</div>
<div class="my-test">Elemen div yang ketiga.</div>
<p class="mytest">Ini adalah teks di sebuah paragraf.</p>

</body>
</html>

Hasilnya:

CSS Selector [attribute*="value"]

Selector [attribute*="value"] digunakan untuk memilih elemen yang nilai atributnya berisi nilai yang ditentukan.

Contoh berikut memilih semua elemen dengan nilai atribut class yang berisi "te":

Catatan: Nilai tidak harus berupa kata utuh!

Contoh

[class*="te"] {
    background: yellow;
}

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>

<div class="first_test">Elemen div yang pertama.</div>
<div class="second">Elemen div yang kedua.</div>
<div class="my-test">Elemen div yang ketiga.</div>
<p class="mytest">Ini adalah teks di sebuah paragraf.</p>

</body>
</html>

Hasilnya:

Styling Form

Selector attribute dapat berguna untuk menata form / formulir tanpa menggunakan class atau ID.

Contoh

input[type="text"] {
    width: 150px;
    display: block;
    margin-bottom: 10px;
    background-color: yellow;
}

input[type="button"] {
    width: 120px;
    margin-left: 35px;
    display: block;
}

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>

<form name="input" action="" method="get">
  Nama depan:<input type="text" name="Nama" value="Okta" size="20">
  Nama belakang:<input type="text" name="Nama" value="Hasan" size="20">
  <input type="button" value="Masuk">
</form>

</body>
</html>

Hasilnya: