CSS3 Attribute Selector

CSS3 Attribute Selector Oleh: d-newbie

Assalamualaikum wr. wb. Attribute selector memungkingkan kita menyeleksi element html dengan menggunakan perpaduan antara attribute dan value, hal ini bisa menjadi alternatif penggunaan class dan id. bagi pembaca yang belum paham apa itu attribute, berikut penjelasan singkatnya, attribute adalah tambahan informasi...

Assalamualaikum wr. wb. Attribute selector memungkingkan kita menyeleksi element html dengan menggunakan perpaduan antara attribute dan value, hal ini bisa menjadi alternatif penggunaan class dan id. bagi pembaca yang belum paham apa itu attribute, berikut penjelasan singkatnya, attribute adalah tambahan informasi yang terdapat didalam tag-tag html. seperti contoh. Tag
mempunyai attribute class, id dll. Tag mempunyai attribute type, value dll. Tag mempunyai attribute href , title dll. kira-kira seperti itu penjelasan singkatnya sekarang lanjut ke tutorial. apa saja CSS3 Selector itu?

[attribute] Seleksi semua element html yang memiliki attribute tertentu Contoh: [id] Seleksi semua attribute html yang memiliki attribute ID <style> [id]{ width:100px; height:100px; border:2px solid #000; }

[attribute=value] Seleksi semua element html yang memiliki attribute tertentu dan value tertentu. Contoh: [id=kotak] Seleksi semua element html yang mempunyai attribute ID dengan value KOTAK

<style> [id=kotak]{ width:100px; height:100px; border:2px solid #000; }

[attribute|=value] Seleksi semua element html yang mempunyai attribute tertentu dan valuenya berawalan kata tertentu. Contoh. [id|=kotak] Seleksi semua element html yang mempunyai attribute ID dengan value diawali kata "KOTAK" <style> [id|=kotak]{ width:100px; height:100px; border:2px solid #000; }

[attribute~=value] Seleksi semua element yang mempunyai attribute tertentu dengan value terdapat kata tertentu. Contoh: [class~=aku] Seleksi semua element html yang mempunyai attribute CLASS dan valuenya terdapat kata “AKU” <style> [class~=aku]{ width:100px; height:100px; border:2px solid #000; float:left; }

[attribute^=value] Seleksi semua element html yang mempunyai attribute tertentu dengan value yang diawali kata tertentu. Contoh: [class^=dia] Seleksi semua element html yang mempunyai attribute CLASS dan valuenya diawali dengan kata "DIA" <style> [class^=dia]{ width:100px; height:100px; border:2px solid #000; }

[attribute$=value] Seleksi semua element html yang mempunyai attribute tertentu dengan value diakhiri kata terntentu. Contoh: [class$=siapa] Seleksi semua element html yang mempunyai attribute CLASS dan value diakhiri dengan kata "SIAPA". <style> [class$=siapa]{ width:100px; height:100px; border:2px solid #000; }

[attribute*=value] Seleksi semua element html yang mempunyai attribute tertentu dan value mengandung kata tertentu. Contoh: [class*=laper] Seleksi semua element html yang mempunyai attribute CLASS dan value mengandung kata "LAPER" [class*=laper] <style> [class*=laper]{ width:100px; height:100px; border:2px solid #000; }

ok cukup sekian.semoga bermanfaat. Wassalamualaikum. wr.wb.

Tentang Penulis d-newbie Adalah seorang ninja dari Coding Gakure, Menguasai jurus HTML no jutsu, CSS no jutsu, Javascript no jutsu, PHP no jutsu, dan MySQL no jutsu, jurus andalan adalah KageLooping no jutsu, yg bisa memperbanyak output sekali coding , ninja yang berasal dari TIM W3, dan diasuh oleh petapa genit yang suka menjilat-jilat situs yaitu google.com. :D #xixixi

CSS3 Attribute Selector

Recommend Documents