Selector pada CSS

Assalamualaikum wr.wb

Setelah mengenal CSS, ada baiknya kita kenalan sama komponennya, yaitu selector, Yap sudah tau kan Selector itu apa? Kalau belum klik disini

Universal Selector
Selector ini bertujuan untuk mengubah semua tag tag yang ada menjadi apa yang diatur (property dan value) disini. Universal Selector hanya ada satu didalam CSS, Universal Selector ini ditandai dengan kode bintang "*"
 Contoh :

*{
color: red;
background: black;
}

Script diatas maksudnya adlah membuat seluruh tag HTML yang ada text nya berwarna merah dan bakgroundnya warna putih.

Class Selector
Selector ini paling banyak digunakan oleh web sekarang. Selector ini digunakan untuk memilih apasaja yang ingin di edit sesuai classnya. Bila diibaratkan, Class Selector ini seperti Label Pada Blog, class selector dapat digunakan atau dipanggil berulang ulang pada tag html. dan cara pemanggilannya adalah dengan menambahkan atribut class="namaclass".
 contoh :

<h1 class="judul">Ini Judul</h1>
 <p class="artikel">Ini artikel</p>

Pada kode diatas, saya memberikan tag h1 dengan class "judul" dan tap p dengan kelas "artikel". Pada Class Selector ini, kita bisa memanggilnya berulang ulang di satu halaman html. Biasanya, class selector digunakan pada saat pembuatan form regristasi.
lalu bagaimana dengan CSS nya?
jika menggunakan class selector, perlu digunakan tanda titik "." sebelum penulisan classnya, jadi kode class diganti menjadi titik

.judul {
font-size: 24;
color: green;
}
.artikel {
font-size: 12;
color: red;
}

maksudnya dipanggil berulang ulang adalah, kita bisa memanggil atribut class di mana saja pada tag yang kita ingin edit sama seperti yang class tersebut.

ID Selector
Sama seperti class, namun yang membedakannya adalah, bila class penggunaannya dalam HTML adalah dengan memberikan atribut class="namaclass", sedangkan ID selector ini menambahkan atribut id="namaid". ID selector ini berbeda dengan Class Selector, kalau Class Selector bisa dipanggil berulangulang, ID selector ini hanya bisa dipakai satu kali pada HTML. Sudah terbayangkan perbedaan ID Selector dengan Class Selector? Bahasa kasarnya gini, kalau ID itu sekali pakai, kalau Class itu berkali kali.
jika menggunakan id selector, perlu digunakan tanda pagar "#" sebelum penulisan idnya, jadi kode id diganti menjadi pagar

contoh :

<h1 id="judulatas"> Ini adalah judul</h1>
<h2 id="subjudul">Ini adalah sub judul</h2>
<p id="artikel">Ini artikelnya </p>

Cssnya adalah :

#judulatas{
color: black;
}
#subjudul{
color: grey;
}
#artikel{
color: blue;
}

 Elemen Type atau Tag Selector
 Selector ini isinya adalah sebuah tag yang terdapat pada file HTML.
 Contoh :

h1{
font-family: Arial;
}
p{
color: green;
}

pada kode CSS tesebut, itu akan membuat semua elemen tag <h1> berfont Arial dan elemen tag <p> akan berwarna hijau


Attribute Selector
yap sudah tau atribut kan? selector ini yang khusus mengedit semua atribut yang telah diketikan scriptnya pada html.

cara penggunaannya atribut selector menggunakan tanda [ ] berbeda dengan div div sebelumnya
contoh ingin mengedit semua yang beratribut "type" :

[type] {
color: red;
}

Sekian Semoga Bermanfaat

loading...