Belajar CSS bagian 4: Jenis-Jenis Selector Pada CSS

Pada bagian 3 series belajar CSS, kita sudah mengetahui tentang sintaks dasar CSS. Dalam artikel ini, kami akan melanjutkan belajar tentang jenis-jenis selector pada CSS.

Apa itu Selector di CSS ?

Selector CSS adalah salah satu sintaks dasar CSS yang berfungsi untuk mengatur element HTML. Tanpa selector, script CSS tidak akan berfungsi pada web HTML Anda. Selector CSS digunakan untuk memilih elemen HTML yang akan kita beri style, contohnya berupa nama tag HTML, class, id, dan atribut.

Dengan adanya selector, Anda bisa menentukan gaya seperti warna, font, ukuran, background, dan berbagai properti CSS lainnya sebagai elemen yang dipilih. Hal ini memungkinkan Anda untuk mendesain tampilan halaman web sesuai dengan keinginan.

Jenis-Jenis Selector Pada CSS

Agar CSS dapat menargetkan elemen-elemen HTML tertentu pada kode HTML, diperlukan selector. Ada beberapa jenis selector dasar yang dapat Anda gunakan. Mari kita bahas satu per satu.

Selector Element / Tag HTML

Selector element atau tag HTML berfungsi untuk memilih dan menggunakan nama-nama tag pada kode HTML. Pada dasarnya, semua elemen tag HTML bisa digunakan sebagai selector.

Berikut contoh penulisan selector element:

p{
    color:blue;
}

Berikut contoh kode html menggunakan selector element / tag html.

<h3 style="color:red; font-family: sans;">Belajar CSS selector dengan tag h3</h3>
<p>Ini adalah paragraf dengan tag p pada kode html</p>

Dari kode CSS di atas, element atau tag yang digunakan adalah p, dimana dalam tag tersebut telah diatur berwarna biru. Karenanya, semua tag p akan berwarna biru sesuai dengan selector diatas. Dari script tersebut, jika di test akses pada browser maka akan tampil sebagai berikut:

Selector Class

Selector class menggunakan dan memilih nama class pada atribut tag html yang sudah ditambahkan. Penulisan selector class diawali dengan simbol titik, lalu diikuti dengan nama class di depannya.

Berikut contoh penulisan selector element.

.paragraf{
    color:red;
}

Berikut contoh kode html menggunakan atribut class.

<p>Ini adalah paragraf dengan tag p pada kode html</p>
<p class="paragraf">Ini adalah teks dengan tag p dan class "paragraf" pada kode html</p>

Dari kode di atas, maka semua class yang menggunakan paragraf akan diberikan warna merah. Jika di testing melalui browser, maka tampilannya seperti berikut :

Selector class dapat diterapkan lebih dari satu class dalam tag html, berikut contoh penulisan kode css nya.

.paragraf{
    color:red;
}
.bg-yellow{
    background-color: yellow;
}

Berikut contoh kode html menggunakan lebih dari satu class :

<p>Ini adalah paragraf dengan tag p pada kode html</p>
<p class="paragraf bg-yellow">Ini adalah teks dengan tag p dan class "paragraf" pada kode html</p>

Dari kode di atas maka akan diterapkan pada kedua class css yaitu class “paragraf” dan “bg-yellow”. Jika di testing di browser akan menampilkan screenshot berikut :

Selector class digunakan untuk menentukan tag html mana saja yang perlu dirubah. Biasanya digunakan untuk tag html yang sifatnya statis.

Selector ID

Selector ID menggunakan dan memilih elemen HTML berdasarkan nama ID yang terdapat pada atribut tag HTML. Jenis selector ini memiliki kesamaan dengan selector class, namun dengan perbedaan utama bahwa selector ID bersifat unik dan hanya dapat digunakan untuk satu elemen HTML saja.

Penulisan selector ID diawali dengan simbol pagar (#) diikuti dengan nama ID di depannya. Berikut contoh penulisan kode css dengan selector ID.

#text-paragraf{
    font-size: 18px;
    font-family: sans-serif;
}

Berikut contoh penggunaan selector ID pada tag html

<p>Ini adalah paragraf dengan tag p pada kode html</p>
<p id="text-paragraf" class="paragraf bg-yellow">Ini adalah teks dengan tag p dan class "paragraf" pada kode html</p>

Dan jika diakses melalui browser akan menampilkan screenshot berikut:

Berdasarkan kode di atas, tag HTML dengan ID “text-paragraf” akan menerapkan gaya yang ditentukan dalam kode CSS. Selector ID memiliki prioritas lebih tinggi dibandingkan selector class. Jika terdapat properti yang sama pada selector ID dan selector class, maka properti yang ditentukan pada selector ID akan yang diterapkan.

Berikut contoh penulisan kode selector class dan selector id yang memiliki nilai properti sama.

.paragraf{
    color:red;
}
.bg-yellow{
    background-color: yellow;
}
#text-paragraf{
    font-size: 18px;
    font-family: sans-serif;
    color:yellow;
    background-color: darkblue;
}

Berikut kode tag htmlnya.

<p>Ini adalah paragraf dengan tag p pada kode html</p>
<p id="text-paragraf" class="paragraf bg-yellow">Ini adalah teks dengan tag p dan class "paragraf" pada kode html</p>

Pada kode CSS di atas, properti color dan background-color diterapkan pada selector class. Namun, karena selector ID memiliki properti yang sama dengan nilai yang lebih spesifik, maka yang akan diterapkan pada elemen HTML adalah properti dari selector ID. Berikut adalah contoh tampilan dari script di atas.

Biasanya, Selector ID digunakan untuk menentukan tag html mana saja yang perlu dirubah, biasanya digunakan jika memerlukan tag html yang dinamis.

Selector Attribute

Selector attribute menggunakan dan memilih nama sesuai dengan nama atribut pada tag html. Penulisan selector attribute diawali dengan nama tag lalu nama atributte.

Berikut contoh penulisan kode cssnya:

input[type=text] {
    color: blue;
    padding: 10px;
    border: 1px solid blue;
}

Dan berikut contoh kode htmlnya :

<input type="text" placeholder="Masukan nama Anda" />

Dan ketika di testing akan menampilkan screenshot berikut.

Selector Universal

Selector universal digunakan untuk memilih semua elemen dalam tag html. Biasanya Selector universal digunakan untuk mereset style yang sudah diterapkan sebelumnya. Hal ini akan mengakibatkan tampilan tidak sesuai dengan tampilan lama.

Berikut contoh penulisan selector universal.

* {
    background-color: black;
}

Dan berikut jika di testing melalui browser.

Dari kode di atas, warna background akan mengikuti selector universal.

Selector Pseudo-class

Selector Pseudo-class adalah selector CSS yang digunakan untuk menargetkan elemen HTML berdasarkan keadaan atau perilaku elemen tersebut. Contohnya, selector pseudo-class dapat digunakan untuk menargetkan elemen saat diklik, saat kursor mouse melayang di atasnya, saat elemen dalam fokus, dan masih banyak lagi.

Berikut contoh penulisan Selector Pseudo-class.

p:hover {
    color: yellow;
    background-color: blue;
}

Dan berikut contoh penulisan tag pada html

<p>Ini adalah paragraf dengan tag p pada kode html</p>  

Berikut ketika di testing di browser :
Sebelum cursor hover ke tag html p

Setelah cursor hover ke tag html p

Selain Selector Pseudo-class :hover, ada beberapa pseudo-class lain yang sering ditemukan, berikut salah satunya.

Selector	Contoh penulisan	Contoh Deskripsi
:active	a:active	berfungsi untuk memilih link yang telah aktif
:focus	input:focus	memilih elemen input ketika di klik atau focus
:link	a:link	memilih link yang belum di klik / belum dikunjungi
:visited	a:visited	memilih link yang sudah di kilk / sudah dikunjungi
:disabled	input:disabled	memilih elemen input yang tidak aktif / disable
:enabled	input:enabled	memilih elemen input yang aktif / enabled

Informasi lebih lengkap tentang pseudo classes dapat Anda mempelajari melalui URL berikut.

Selector Pseudo-Element

Selector pseudo-element digunakan untuk memilih bagian yang spesifik, seperti baris pertama pada paragraf, daftar pertama pada list, huruf pertama pada teks dan menambahkan teks pada elemen tertentu.

Berikut contoh penulisan selector pseudo-element

p::after {
  content: " - Teks baru dengan pseudo after";
}

Dari kode css di atas artinya akan menambahkan teks ” – Teks baru dengan pseudo after” pada semua tag html p. Dan berikut contoh penulisan tag html :

<p>Ini adalah paragraf dengan tag p pada kode html</p>

Dan ketika di testing di browser akan menampilkan berikut

Dari kode html diatas seharusnya menampilkan “Ini adalah paragraf dengan tag p pada kode html” saja, namun karena ada kode pseudo-element after, maka akan menambahkan teks ” – Teks baru dengan pseudo after” setelah tag p dan akan diterapkan untuk semua tag / element p.

Selain Selector Pseudo-element ::after, ada beberapa pseudo-element lain yang sering ditemukan, berikut diantaranya:

Selector	Contoh penulisan	Contoh Deskripsi
::after	p::after	menambah konten setelah dan seluruh tag p
::before	p::before	menambah konten sebelum dan seluruh tag p
::first-line	p::first-line	memilih baris pertama dalam tag p
::first-letter	p::first-letter	memilih huruf pertama dalam tag p

Informasi lebih lengkap tentang pseudo elements dapat Anda mempelajari melalui URL berikut.

Selector Group

Selector group memungkinkan untuk menggunakan lebih dari satu element tertentu dan menggunakan style css yang sama. Untuk penulisan kodenya dipisahkan dengan koma.

Berikut contoh penulisan selector group.

h2, h3, p {
    font-size: 28px;
}

Dari kode di atas maka akan menggunakan ukuran font 28px untuk elemen h2, h3, dan p. Berikut contoh kode htmlnya.

<h2>Belajar CSS selector dengan tag h2</h2>
<h3>Belajar CSS selector dengan tag h3</h3>
<p>Ini adalah paragraf dengan tag p pada kode html</p>

Ketika di testing di browser akan menampilkan ukuran font sesuai dengan kode css selector group. Berikut screenshotnya.

Selain menggunakan nama element yang digabungkan, Selector Group dapat diterapkan pada gabungan selector ID, class, atribute, dan selector lainnya.

Kesimpulan

Penggunaan selector dalam penulisan script CSS sangatlah penting untuk memudahkan penargetan elemen-elemen HTML yang akan di styling. Hal ini bertujuan untuk mempercantik tampilan website. Tanpa selector, script CSS tidak akan dapat berfungsi pada halaman web HTML Anda.

Lanjutkan belajar CSS bagian 5 tentang Cara Memberikan Warna Pada Text

Demikian tadi tutorial belajar CSS bagian 4 yang membahas tentang jenis-jenis selector pada CSS. Semoga bermanfaat.