Penjelasan selector dalam CSS (Cascanding Style Sheet)

Selamat malam para pembaca, pada tutorial sebelumnya yaitu tentang Aturan Penulisan CSS yang pernah admin publis, sekarang menuju ketutorial selanjutnya yaitu Penjelasan selector dalam CSS (Cascanding Style Sheet). Sebenarnya si admin sudah mengantuk ni, tapi berhubung demi para pembaca setia, admin akan menjelaskan tentang apa itu yang dimaksud selector dalam CSS (Cascanding Style Sheet).
OK, mari kita mulai penjelasan tentang selector dalam CSS (Cascanding Style Sheet).

CSS Selectors
CSS Selector memungkinkan kalian untuk merubah dan memanipulasi element-element dalam HTML.
CSS Selektor digunakan untuk menemukan atau memilih element dasar HTML berdasarkan id, class, type, attribute dan masih banyak lagi.

Selector dalam CSS dibagi menjadi 3:

Selector TAG
Selector Class
Selector ID

Pengenalan dan Penulisan Selector

Selector Tag merupakan selector yang dibentuk dari tag-tag yang terdapat dalam html, misalkan <p><img> dan masih banyak lagi.

Selector Class merupakan selector yang penulisannya diawali dengan tanda titik (.) dan diikuti oleh nama selector (nama selector bebas tidak harus tag HTML), cara pemanggilannya dengan menggunakan tag <DIV> / <P> dan diikuti dengan class misalkan <Div class="font">,<p class="gambar"> dan lain-lain.

Selector ID/Pseduo Class merupakan selector yang penulisannay diawali dengan tanda crash (#) atau pagar cara pemanggilannya dengan menggunakan tag <DIV> dan diikuti dengan id, misalkan <Div id="gambar1">.Selector ini biasanya digunakan untuk membuat layout box dalam halaman Website.

Contoh-contoh Penggunaan Selector

Selector Tag

p {
text-align: center;
color: red;
}

Selector Class

.center {
text-align: center;
color: red;
}

Selector ID

#para1 {
text-align: center;
color: red;
}

Teknik Menggabungkan/Grouping Selector

Jika kalian memiliki selector dengan deklarasi / nilai yang sama, maka lebih baik digroupkan saja. Misalkan kalian punya selector seperti berikut ini :

h1 {
    text-align: center;
    color: red;
}

h2 {
    text-align: center;
    color: red;
}

p {
    text-align: center;
    color: red;
}

dapat dilihat bahwa properti dan nilai yang terdapat diselector sama, maka kalian dapat menggroup atau menjadikan selector lebih simple, dengan pemisah antar selector dengan tanda koma ( , ), lihat contoh dibawah ini :

h1, h2, p {
text-align: center;
color: red;
}

Bagai mana? masih bingung apa yang dimaksud dengan selector dan cara penggunaannya? untuk lebih jelasnya silahkan download tutorial yang admin siapkan dibawah ini.

Download Selector Dasar

Download Grouping Selector

Berbagi Ilmu

Penjelasan selector dalam CSS (Cascanding Style Sheet)

Indonesia Web Share

Artikel Terkait