Selector Sederhana


Seperti yang telah dijelaskan pada artikel sebelumnya tentang selector, jenis / kategori selector yang pertama adalah simple selector / selector sederhana. Simple selector memilih atau mencocokkan satu atau lebih elemen berdasarkan tipe elemen, atribut class, dan atribut id.

Selector Elemen

Memilih atau mencocokkan element berdasarkan tipe elemennya (elemen HTML). Selector ini tidak membedakan huruf besar dan huruf kecil antara nama selector dengan elemen html. Ini merupakan cara termudah untuk menargetkan semua elemen dengan tipe yang kamu pilih. Silahkan lihat contoh dibawah ini :

<p>Petugas : Hai aku petugas keamanan disini! Sedang apa kalian disana</p>
<div>Anak - anak : Ohh.. maaf pak kami sedang mencari bola kami yang
terjatuh di halaman belakang rumah ini</div>
<p>Petugas : Kenapa kalian tidak izin dulu ke petugas, jangan masuk
ke rumah orang seenaknya!!</p>
p {
    color: red;
}
div {
    color: blue;
}

Output :

Petugas : Hai aku petugas keamanan disini! Sedang apa kalian disana

Anak – anak : Ohh.. maaf pak kami sedang mencari bola kami yang
terjatuh di halaman belakang rumah ini

Petugas : Kenapa kalian tidak izin dulu ke petugas, jangan masuk
ke rumah orang seenaknya!!

Selector Class

Selector class didefinisikan oleh sebuah titik “.“, diikuti dengan nama kelas. Untuk mendeklarasikan nama kelas, kalian bebas memasukkan nama apapun asalkan tanpa spasi. Nama kelas harus sama dengan nilai dari atribut class sebuah elemen HTML karena case-sensitive.

<ul>
    <li class="judul">Tutorial HTML, CSS, dan JavaScript</li>
    <li class="judul html">Membuat sebuah dokumen / halaman HTML</li>
    <li class="judul css">Menghias halaman web dengan CSS</li>
    <li class="judul javascript">JavaScript untuk memanipulasi halaman web.</li>
</ul>
.judul {
    font-weight: bold;
}
.html {
    color: orange;
}
.css {
    color: blue;
}

Output :

  • Tutorial HTML, CSS, dan JavaScript
  • Membuat sebuah dokumen / halaman HTML
  • Menghias halaman web dengan CSS
  • JavaScript untuk memanipulasi halaman web.

Selector ID

Selector id didefinisikan oleh tanda pagar “#“, diikuti dengan nama id. Terserah kamu ingin menamai-nama id apapun. Cara ini biasanya digunakan untuk memilih hanya satu elemen, karena biasanya nama id disetel sedemikian rupa (unik).

<p id="nama">Hai, nama saya budi</p>
<p id="tempat">Saya tinggal di jakarta</p>
#nama {
    font-family: cursive;
    font-weight: bold;
}
#tempat {
    font-style: italic;
}

Output :

Hai, nama saya budi

Saya tinggal di jakarta

Selector Universal (Semua elemen)

Selector universal ini digunakan untuk memilih semua elemen HTML, didefinisikan menggunakan tanda asterisk “*“. Karena berlaku untuk semua elemen, selector ini jarang digunakan dan jika digunakan pada website yang besar akan berdampak pada kinerja halaman web yang menjadi lambat dari yang diharapkan.

<div>
    <p>Di desa <strong>suka mundur</strong> ada seorang
    laki-laki bernama <strong>Arman</strong> yang sangat
    baik hati, ia selalu menolong tetangganya yang kesulitan.
    Suatu hari arman mengidap penyakit langka tidak ada
    seorangpun tetangga yang menjenguknya karena
    takut tertular penyakit langkat tersebut.</p>
</div>
* {
    padding: 5px;
    border: 1px solid black;
    background-color: red;
    color: white;
}

Output :

Di desa suka mundur ada seorang
laki-laki bernama Arman yang sangat
baik hati, ia selalu menolong tetangganya yang kesulitan.
Suatu hari arman mengidap penyakit langka tidak ada
seorangpun tetangga yang menjenguknya karena
takut tertular penyakit langkat tersebut.