Apa saja elemen pada css?

Artikel ini merupakan artikel ke #04 dari seri Tutorial CSS Dasar untuk Pemula. Jika kalian sekiranya sudah paham mengenai topik pada artikel ini yaitu tentang 5 macam selector pada CSS. Silahkan lompati saja dan lanjut ke materi berikutnya Mempelajari Properti Color di CSS.

Daftar Isi

- Pemanasan
- Apa itu Selector?
- 5 Macam Selector di CSS
    - Universal Selector
    - Tag Selector
    - Id Selector
    - Class Selector
    - Atribut Selector
- Pendinginan
- Referensi

Pemanasan

Yaah, halo. Pada artikel pertama di seri Tutorial CSS Dasar kita sudah menyinggung sedikit mengenai selector bukan, kemudian juga pada artikel Sintaks Dasar CSS.

Lantas sebenarnya apa sih selector itu? dan apakah ada macamnya?

Baiklah tanpa membuang banyak waktu lagi silahkan kalian baca materi di bawah ini ya.

Apa itu Selector?

Definisi selector menurut MDN Webdoc Mozilla:

“CSS Selectors define the elements to which a set of CSS rules apply.“

MDN Webdocs Mozilla

Selector merupakan sebuah penanda berupa kata kunci, tag html, ataupun simbol untuk memilih suatu elemen HTML yang akan kita beri aturan CSS nantinya.

Jadi ia adalah perwakilan dari suatu elemen HTML yang nanti akan kita tentukan style padanya.

Sintaks selector pada CSS adalah sebagai berikut.

selector {
    /* style yang akan diberikan */
}

5 Macam Selector di CSS

Dalam CSS terdapat 5 macam selector dasar yang wajib kita ketahui, yaitu:

• Universal Selector
• Tag Selector
• Id Selector
• Class Selector
• Atribut Selector

Kelimanya akan kita bahas di bawah ini.

Universal Selector

Universal selector merupakan selector yang sering programmer gunakan untuk memilih dan menyeleksi semua elemen pada suatu dokumen HTML.

Contoh kode:

* {
    border: 1px dashed black;
    color: pink;
}

Kode di atas akan membuat semua elemen HTML memiliki garis tepi patah-patah berwarna hitam dan warna teksnya akan berwarna merah muda.

Para programmer umumnya menggunakan selector universal di awal penulisan dokumen CSS untuk mereset style bawaan dari browser.

Karena browser satu dengan yang lain terkadang menerapkan style bawaan yang berbeda-beda untuk setiap elemen HTML-nya. Hal ini umumnya mengacu pada margin dan padding.

Apa itu margin dan padding? Nanti akan dibahas dipertemuan selanjutnya.

Dengan kata lain agar website yang kita buat formatnya sama ketika dibuka di berbagai browser maka perlu dilakukannya reset.

Untuk kodenya ada di bawah ini.

*{
    padding: 0;
    margin: 0;
}

Kode di atas akan menghilangkan semua padding dan margin yang setiap elemen HTML miliki pada berbagai browser.

Tag Selector

Sesuai dengan namanya, selektor tag merupakan selektor yang memilih elemen berdasarkan nama tagnya. Selektor ini juga bisa kita sebut Type Selector.

Contoh:

h1{
    color: green;
}

Nama tag h1 mewakili semua elemen <h1> dalam dokumen HTML. Jadi kode di atas akan membuat teks pada seluruh elemen <h1> berwarna hijau.

Id Selector

Selektor id merupakan selektor yang bersifat unik. Artinya, selektor id hanya dapat kita gunakan untuk satu elemen saja.

Untuk membuat selector id kita perlu memulainya dengan tanda pagar (#).

#first-header{
    background-color: black;
    color: pink;
}

Karena bersifat unik atau hanya mengizinkan satu elemen saja, maka ketika kita gunakan pada lebih dari satu elemen hasilnya adalah hanya elemen pertama saja yang akan terseleksi dan mengabaikan elemen selanjutnya.

Class Selector

Selektor class hampir sama dengan selektor id, bedanya selektor ini tidak bersifat unik dan untuk membuatnya kita memerlukan tanda titik (.).

.btn-primary{
    background-color: lightblue;
    color: white;
}

Karena tidak bersifat unik seperti selektor id, maka satu selektor class dapat kita gunakan berulang kali pada lebih dari satu elemen HTML.

Selain itu juga satu elemen HTML bisa menampung lebih dari satu selektor class.

Dokumen CSS

.btn{
   padding: 5px;
   margin: 5px;
}
.btn-primary{
    background-color: lightblue;
    color: white;
}

Dokumen HTML

<button type="button" class="btn-primary">Download</button>
<button type="button" class="btn btn-primary">Upload</button>

Atribut Selector

Terakhir, atribut selector merupakan selector yang memilih elemen berdasarkan tag dan atributnya. Jadi selektor ini hampir sama dengan selektor tag hanya saja atribut dari tag yang dipilih ikut didefinisikan.

Dokumen CSS

a[title] {
    background-color: black;
    color: pink;
    padding: 5px;
    text-decoration: none;
    border-radius: 5px;
}

Dokumen HTML

selector {
    /* style yang akan diberikan */
}

Pendinginan

Pada artikel kali ini kita sudah mempelajari beberapa hal seperti apa itu selector dan apa saja macamnya.

CSS ada berapa?

7 Apa yang dimaksud dengan property CSS dalam pemrograman?

Ada berapakah jenis selector?

Apa simbol untuk ID di CSS?

Apa itu CSS selector dan contohnya?