Selector
Selector pada CSS berfungsi untuk menunjuk ke elemen HTML yang ingin diberi style.
Terdapat 5 macam selector yaitu :
Element Selector
Jenis selector ini memungkinkan kita untuk menunjuk elemen HTML berdasarkan nama elemennya.
Contoh pengaplikasian :
p {
text-align: center;
color: red;
}
ID Selector
Jenis selector ini memungkinkan kita untuk menunjuk elemen HTML yang spesifik mempunyai attribut id
dengan value yang sama dengan nama selector.
Jenis selector ini dimulai dengan simbol pagar (#) dan hanya dapat menunjuk tepat 1 elemen saja.
Contoh pengaplikasian :
CSS
#anu {
text-align: center;
color: red;
}
HTML
<p id="anu">Anu</p>
Class Selector
Jenis selector ini memungkinkan kita untuk menunjuk elemen HTML yang mempunyai attribut class
dengan value yang sama dengan nama selector.
Jenis selector ini dimulai dengan simbol titik (.).
Contoh pengaplikasian :
CSS
.center {
text-align: center;
color: red;
}
.dark {
background-color: green;
}
HTML
<p class="dark center">Anu</p>
Universal Selector
Jenis selector ini menunjuk ke seluruh elemen HTML.
Contoh pengaplikasian :
* {
text-align: center;
color: blue;
}
Grouping Selector
Jenis selector ini berfungsi untuk mengelompokan beberapa elemen dengan atribut-atribut yang sama.
Contoh pengaplikasian :
h1, h2, h3 {
text-align: center;
color: red;
}