Section Artikel
- 1 Elemen Style HTML Dengan Atribut Tertentu
- 2 Selektor [atribut] di CSS
- 3 Selektor [atribut = “nilai”] di CSS
- 4 Selektor [atribut ~ = “nilai”] di CSS
- 5 Selektor [atribut | = “nilai”] di CSS
- 6 Selektor [atribut ^ = “nilai”] di CSS
- 7 Selektor [atribut $ = “value”] di CSS
- 8 Selektor [atribut * = “nilai”] di CSS
- 9 Styling Forms
- 10 Atribut Selektor di CSS
Elemen Style HTML Dengan Atribut Tertentu
Elemen Style HTML yang dapat memberikan style pada elemen HTML yang memiliki atribut atau nilai atribut tertentu.
Selektor [atribut] di CSS
Selektor [attribute] digunakan untuk memilih elemen dengan atribut tertentu.
Contoh berikut memilih semua elemen dengan atribut target:
Contoh :
a[target] {
background-color: yellow;
}Selektor [atribut = “nilai”] di CSS
Selektor [atribut = “nilai”] digunakan untuk memilih elemen dengan atribut dan nilai tertentu.
Contoh berikut memilih semua elemen <a> dengan atribut target = “_ blank”:
Contoh :
a[target="_blank"] {
background-color: yellow;
}Selektor [atribut ~ = “nilai”] di CSS
Selektor [atribut ~ = “nilai”] 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 oleh spasi, misalnya “bunga”:
Contoh :
[title~="flower"] {
border: 5px solid yellow;
}Contoh di atas akan mencocokkan elemen dengan title = “flower”, title = “summer flower”, dan title = “flower new”, tetapi tidak title = “my-flower” atau title = “flowers”.
Selektor [atribut | = “nilai”] di CSS
Selektor [atribut | = “nilai”] digunakan untuk memilih elemen dengan atribut yang ditentukan dimulai dengan nilai yang ditentukan.
Contoh berikut memilih semua elemen dengan nilai atribut kelas yang dimulai dengan “top”:
Catatan: Nilai harus berupa kata utuh baik sendiri, seperti class = “top”, atau diikuti dengan tanda hubung (-), seperti class = “top-text”!
Contoh :
[class|="top"] {
background: yellow;
}Selektor [atribut ^ = “nilai”] di CSS
Selektor [atribut ^ = “nilai”] digunakan untuk memilih elemen yang nilai atributnya dimulai dengan nilai yang ditentukan.
Contoh berikut memilih semua elemen dengan nilai atribut kelas yang dimulai dengan “top”:
Catatan: Nilainya tidak harus seluruh kata!
Contoh :
[class^="top"] {
background: yellow;
}Selektor [atribut $ = “value”] di CSS
Selektor [atribut $ = “nilai”] digunakan untuk memilih elemen yang nilai atributnya diakhiri dengan nilai yang ditentukan.
Contoh berikut memilih semua elemen dengan nilai atribut kelas yang diakhiri dengan “test”:
Catatan: Nilainya tidak harus seluruh kata!
Contoh :
[class$="test"] {
background: yellow;
}Selektor [atribut * = “nilai”] di CSS
Selektor [atribut * = “nilai”] digunakan untuk memilih elemen yang nilai atributnya berisi nilai yang ditentukan.
Contoh berikut memilih semua elemen dengan nilai atribut kelas yang berisi “te”:
Catatan: Nilainya tidak harus seluruh kata!
Contoh :
[class*="te"] {
background: yellow;
}Styling Forms
Atribut selektor bisa digunakan untuk style form tanpa kelas 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>
<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>
<form name="input" action="" method="get">
Firstname:<input type="text" name="Name" value="Paulus" size="20">
Lastname:<input type="text" name="Name" value="Partohap" size="20">
<input type="button" value="Example Button">
</form>
</body>
</html>
Atribut Selektor di CSS
| Selektor | Contoh | Deskripsi contoh |
|---|---|---|
| [attribute] | [target] | Memilih semua elemen dengan atribut target |
| [attribute=value] | [target=_blank] | Memilih semua elemen dengan target = “_ blank” |
| [attribute~=value] | [title~=flower] | Memilih semua elemen dengan atribut judul yang mengandung kata “bunga” |
| [attribute|=value] | [lang|=en] | Memilih semua elemen dengan nilai atribut lang dimulai dengan “en” |
| [attribute^=value] | a[href^=”https”] | Memilih setiap elemen <a> yang nilai atribut hrefnya dimulai dengan “https” |
| [attribute$=value] | a[href$=”.pdf”] | Memilih setiap elemen <a> yang nilai atribut hrefnya diakhiri dengan “.pdf” |
| [attribute*=value] | a[href*=”DosenIT”] | Memilih setiap elemen <a> yang nilai atribut hrefnya berisi substring “DosenIT” |
