Selector [atribut]

Selector [atribut] CSS

Lihat halaman Penulisan Kode CSS untuk detail selector.

Dalam CSS ada beberapa atribut elemen HTML yang nilainya bisa digunakan dalam penyebutan selector. Dimana biasanya selector pada CSS hanya menyebutkan nama tag atau atribut seperti class dan id elemen.

Seperti contoh ini :

<style>
p { color: blue; }
div { width: 100%; }
.column { background-color: gray; }
#footer { padding: 10px; }
</style>

Contoh kode diatas merupakan penggunaan selektor pada umumnya.
Dibawah ini adalah jenis selektor yang menggunakan atribut tertentu beserta nilainya.

1. [attribute]
2. [attribute="value"]
3. [attribute|="value-"]
4. [attribute^="value"]
5. [attribute$="value"]
6. [attribute*="value"]
7. [attribute~="value"]

Dibawah ini penjelasan untuk masing-masing selector tersebut :

[attribute]

Fungsi selektor ini sebenarnya sama dengan selektor pada umumnya, hanya saja jenis atributnya yang berbeda.
Atribut yang digunakan sebagai selektor pada jenis ini misal : atribut alt, title, href dsb.

<img 
  alt='pohon' 
  title='pohon' 
  src='https://i.postimg.cc/DZJgPKv7/pohon.gif'
  />
<style>
[alt] { border: 2px groove red}
</style>

Penyebutan selektor diatas juga bisa didahului dengan penyebutan tag elemennya seperti ini :
img[alt]{kode css..}

[attribute="value"]

Fungsi selektor ini adalah mendeteksi elemen HTML berdasarkan atribut beserta nilainya.
Pada penyebutan selektornya, isi (value) dari atribut dan nama atribut disebutkan bersama , sebagai contoh dibawah ini menggunakan atribut title='value'

<img 
  alt='logo' 
  title='HTML' 
  src='https://i.postimg.cc/g06ynHdC/ms-icon-310x310.webp'
  />
<style>
[title="HTML"] { border: 2px groove blue}
</style>

Penyebutan secara detail atribut beserta isinya seperti diatas, biasanya digunakan pada kondisi jika suatu halaman web memuat banyak elemen serupa namun memerlukan pengaturan CSS (style) yang berbeda, selektor atribut ini akan sangat membantu.

[attribute|="value-"]

Fungsi selektor dengan simbol | :
Mendeteksi elemen berdasarkan nilai atribut dengan awalan yang sama dibatasi tanda minus.
Penyebutan nilai atribut pada selektor ini hanya sebatas tanda minus (-) saja.

<div>
<span id='top-left'></span>
<span id='topcenter'></span>
<span id='top-right'></span>
<span id='bottom'></span>
</div>
<style>
[id|="top"]{background:red; color: white}
</style>

top-lefttopcentertop-right

bottom

Perhatikan bahwa kesamaan nilai pada selektor jenis ini berarti nilainya memiliki bagian yang sama persis sebatas tanda minus.
Pada contoh diatas bagian nilai yang benar-benar sama persis adalah top-.
Untuk topcenter tidak dianggap sama karena diidentifikasi sebagai nilai dengan satu kesatuan utuh tanpa tanda minus (-) sebagai pemisah.

[attribute^="value"]

Fungsi selektor dengan simbol ^ :
Mendeteksi elemen dengan nilai atribut yang menggunakan awalan yang sama.
Penyebutan nilai atribut ini berdasarkan awalan yang sama tanpa "melihat" tanda pemisah.

<div>
<span id='top-left'>top-left</span>
<span id='topcenter'>topcenter</span>
<span id='top-right'>top-right</span>
<span id='bottom'>bottom</span>
</div>
<style>
[id^="top"]{background:red; color: white}
</style>

top-lefttopcentertop-right

bottom

[attribute$="value"]

Fungsi selektor dengan simbol dollar ($) :
Mendeteksi elemen berdasarkan akhiran dari nilai atribut yang digunakan.
Penyebutannya pada selektor berdasarkan semua nilai atribut yang memiliki akhiran yang sama.

<p id='penting'>Paragraf "penting"</p>
<p id='opening-penting'>Paragraf opening</p>
<p id='deskrip_penting'>Paragraf deskripsi</p>
<p id='closingpenting'>Paragraf closing</p>
<style>
[id$="penting"]{
                border:1px solid red;
                color: red;
                }
</style>

Paragraf "penting"

Paragraf opening

Paragraf deskripsi

Paragraf closing

Pada contoh diatas id='penting' bukan sebuah akhiran tetapi nilai utuh (berdiri sendiri) tetapi diidentifikasi memiliki kesamaan 100% dengan penyebutan pada selektor, sehingga secara otomatis dimasukkan kedalam kategori ini.

[attribute*="value"]

Fungsi selektor dengan simbol * :
Mendeteksi huruf pada teks nilai atribut. Minimal 2 huruf.
Sehingga nilai atribut pada selektor hanya disebutkan sebagian saja.

<p class='five'>one two three four five</p>
<p class='text-fit'>Paragraf  teks fit</p>
<p class='fill-color'>Paragraf teks fill</p>
<p class='fitur'>Paragraf fitur teks</p>
<style>
[class*="fi"]{
                background: coral;
                color: brown;
                }
</style>

one two three four five

Paragraf teks fit

Paragraf teks fill

Paragraf fitur teks

[attribute~="value"]

Fungsi selektor dengan simbol ~ adalah mendeteksi nilai atribut berdasarkan satu kata tertentu.
Sehingga pada selektor akan disebutkan 1 kata utama.

<div class='box-outer'>box-outer</div>
<div class='box inner'>box-inner</div>
<div class='content-box'>content-box</div>
<div class='box'>box text</div>
<style>
[class~="box"]{ background: greenyellow;
                width: 24%; color: green;
                display: inline-block;
                }
</style>

box-outer

box-inner

content-box

box text