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...

CSS3 Attribute Selector

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

Contoh:

[id]

Seleksi semua attribute html yang memiliki attribute ID

<style>
[id]{
width:100px;
height:100px;
border:2px solid #000;
}
</style>
<div id="a"></div>
<div class="b"></div>
<div id="c"></div>

 

[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;
}
</style>
<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"

<style>
[id|=kotak]{
width:100px;
height:100px;
border:2px solid #000;
}
</style>
<div id="kotak-satu"></div>
<div id="kotak-dua"></div>

 

 

[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;
}
</style>
<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.

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;
}
</style>
<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.

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;
}
</style>
<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.

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;
}
</style>
<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.


About Author

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


Comment & Discussions

    Please LOGIN before if you want to give the comment.