CSS3 Attribute Selector

Transkripsi

1

2 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 <div> mempunyai attribute class, id dll. Tag <input> mempunyai attribute type, value dll. Tag <a> 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 [id] Seleksi semua attribute html yang memiliki attribute ID [id]{ <div id="a"></div> <div class="b"></div> <div id="c"></div>

3 [attribute=value] Seleksi semua element html yang memiliki attribute tertentu dan value tertentu. [id=kotak] Seleksi semua element html yang mempunyai attribute ID dengan value KOTAK [id=kotak]{ <div id="kotak"></div> [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" [id =kotak]{ <div id="kotak-satu"></div> <div id="kotak-dua"></div>

4 [attribute~=value] Seleksi semua element yang mempunyai attribute tertentu dengan value terdapat kata tertentu. [class~=aku] Seleksi semua element html yang mempunyai attribute CLASS dan valuenya terdapat kata AKU [class~=aku]{ float:left; <div class="aku adalah"></div> <div class="bukan aku bro"></div> <div class="ya inilah aku"></div> [attribute^=value] Seleksi semua element html yang mempunyai attribute tertentu dengan value yang diawali kata tertentu. [class^=dia] Seleksi semua element html yang mempunyai attribute CLASS dan valuenya diawali dengan kata "DIA" [class^=dia]{

5 <div class="dia berubah"></div> <div class="dia cantik"></div> <div class="bukan dia"></div> [attribute$=value] Seleksi semua element html yang mempunyai attribute tertentu dengan value diakhiri kata terntentu. [class$=siapa] Seleksi semua element html yang mempunyai attribute CLASS dan value diakhiri dengan kata "SIAPA". [class$=siapa]{ <div class="siapa aja"></div> <div class="kamu anak siapa"></div> <div class="hey siapa kamu"></div> [attribute*=value] Seleksi semua element html yang mempunyai attribute tertentu dan value mengandung kata tertentu. [class*=laper] Seleksi semua element html yang mempunyai attribute CLASS dan value mengandung kata "LAPER" [class*=laper] [class*=laper]{

6 <div class="laper saya"></div> <div class="kamu laper beb"></div> <div class="elo rese kalo laper"></div> 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