Modul 3-3. CSS Selectors

Halo teman-teman, jumpa lagi di course HTML & CSS Nusantech Academy. Sebelum lanjut, untuk teman-teman yang belum membaca artikel sebelumnya mengenai Internal dan Eksternal CSS boleh membacanya terlebih dahulu. 

Dan materi yang akan kita bahas kali ini adalah dasar Selector dalam CSS, Selamat membaca 🙂

Apa itu Selector?

Selector merupakan hal yang paling dasar dalam penggunaan CSS. Selector seperti namanya, berfungsi untuk memilih (select) atau sebagai penanda Tag, Class, ID, ataupun Attribute HTML yang ingin dimanipulasi.

Agar lebih jelas coba perhatikan gambar dibawah ini:

Ada tiga unsur dalam sintaks CSS, diantaranya :

a. Selector

Nama Selector bisa terdiri dari nama Tag, Attribute, ataupun Value dari Class dan ID yang ingin diberi Style.

b. Property

Property merupakan opsi yang digunakan untuk mengatur bagaimana Element HTML akan ditampilkan. Property inilah yang menentukan warna, bentuk, ukuran, margin, dsb. Hampir semua Property dapat digunakan diseluruh Selector.

Contoh Property : Color, Margin, Padding, Width, Height, dsb.

c. Value

Value merupakan nilai dari sebuah Property. Ada Property yang menerima nilai dalam bentuk angka (pixel) atau prosentase, seperti Width atau Height. Dan ada pula Property yang memiliki nilai khusus, misalnya Properti Color yang hanya menerima kode warna atau nama warna yang valid.

Macam-Macam Selector

Ada banyak cara menggunakan Selector, dan berikut ini beberapa dasar penggunaan selector yang perlu teman-teman ketahui:

1. Tag Selector / Type Selector

Tag Selector digunakan untuk memilih Element berdasarkan Tag.

Penulisan sintaks: 

• namatag { property: value;}

Contoh:

Kode HTML

<p>Ini adalah contoh paragraf</p>

Kode CSS

p{
  color: red;
}

    2. Class Selector

Class Selector berfungsi untuk memilih Element berdasarkan Class. Penulisan sintaks Class Selector diawali dengan titik seperti berikut:

Penulisan sintaks: 

• .nama-class { property: value; }

Contoh:

Kode HTML

<h1 class="judul-utama">Ini Judul</h1>

Kode CSS

.judul-utama {
    color: black;
    background-color: red;   
} 

        3. ID Selector

ID Selector berfungsi untuk memilih Element berdasarkan ID. Perlu diingat, Selector ID hanya dapat digunakan oleh satu Element saja.

Penulisan sintaks: 

• #nama-id { property: value; }

Contoh:

Kode HTML

<div id="bg-emas">
<p> Ini adalah contoh text paragraf</p>
</div>

    Kode CSS

#bg-emas {
  width: 100px;
  height: 100px;
  background-color: gold;
}

   

        4. Attribute Selector

Attribute Selector berguna untuk memilih Element berdasarkan Attribute.

Penulisan sintaks: 

• [attribute] { property: value; }
• [attribute=attribute_value] { property: value; }
• [attribute~=attribute_value] { property: value; }
• [attribute|=attribute_value] { property: value; }
• [attribute^=attribute_value] { property: value; }
• [attribute$=attribute_value] { property: value; }
• [attribute*=attribute_value] { property: value; }

Contoh:

Kode HTML

<form>        
    <input type="text" name="ipname">
</form>

Kode CSS

[type="text"] {
    width: 100px;
    height: 50px;
}

Arti dari contoh diatas adalah kita memilih semua Element dengan Attribute “type” dan bernilai “text”.

5. Universal Selector

Sifat dari Universal Selector yaitu mencakup seluruh Element HTML. Universal Selector didefinisikan menggunakan tanda bintang (*).

Penulisan sintaks: 

• * { property: value; }
• ns|* { property: value; }
• *|* { property: value; }

Umumnya Universal CSS digunakan untuk me-reset style padding dan margin bawaan HTML.

Contoh: 

* { 
    padding: 0;
    margin: 0; 
}

Penutup

Apa yang kita dapat pada kesempatan kali ini?

1. Sintaks CSS tersusun atas Selector, Property, dan Value. Kita dapat mengubah style elemen HTML menggunakan Selector.
2. Jenis-jenis Selector dasar yaitu Tag Selector, Class Selector, ID Selector, Attribute Selector, dan Universal Selector.

Mungkin cukup sekian dulu untuk pembahasan kali ini, teman-teman bisa langsung mencoba mempraktikkannya sendiri. Tetap semangat dan terus ikuti course ini ya.

See you next time!