Pembahasan CSS Syntax dan Selector [SUPER LENGKAP]

Setiap bahasa pemrograman ada cara menulisnya sendiri-sendiri.

Seperti HTML, kita harus menulis tag buka dan tutup misal <html>..</html>.

Penulisan Syntax CSS

CSS juga punya penulisan syntax sendiri. Lihat gambar berikut:

Keterangan syntax penulisan CSS:

Selector adalah tag atau poin HTML yang ingin kamu ubah stylenya
Declaration adalah “apa yang ingin kamu ubah tampilan HTLMnya”. Terdiri dari properti dengan value
Property adalah jenis tampilan yang ingin di ubah. Misal: color (warna), font-family (jenis font).
Value adalah nilai dari property. Misal property color dengan value red. Jadi warna huruf color diubah menjadi merah red.

Syntax tersebut masih digunakan hingga CSS3.

Misa, saya ingin mengganti tampilan paragraf teks menjadi:

Warna merah
Rata kanan

Maka kodenya adalah:

<style type="text/css">
	p {
		color: red;
		text-align: right;
	}
</style>

Hasilnya akan menjadi:

Ini hasilnya warna merah rata kanan

Selector CSS

Ada lima jenis selector dalam CSS, yaitu:

Selector sederhana (simple), yaitu memilih element, id atau class.
Selector kombinasi (combinator), yaitu memilih element berdasarkan suatu elemen yang berhubungan dengannya. Misal: memilih elemen html yang ada di dalam elemen lain.
Selector pseudo-class, yaitu untuk memberi efek dari suatu aksi. Misal: setelah cursor didekatkan, setelah di klik.
Selector pseudo-elements, yaitu untuk memberi style dari bagian spesifik suatu element. Misal: baris tabel yang ganjil.
Selector atribut, yaitu memberi style berdasar atribut HTML yang digunakan.

Simple Selector

Selektor sederhana penulisannya seperti yang telah dijelaskan diatas.

Misalnya ada elemen <p> yang ingin diubah tampilannya menjadi: warna kuning, rata tengah. Maka kode yang ditulis:

p {
	color: blue;
	text-align: center;
}

Hasilnya menjadi:

Ini warna biru rata tengah

Selector ID dan Class

Untuk memberi style pada ID dan Class HTML dibutuhkan tambahan karakter pada selektor.

Untuk ID ditambah hash (#) sedangkan Class ditambah dot / titik (.). Misal untuk mengubah id gambar dan class gambar_1. Maka kode yang dibutuhkan:

#gambar {
	width: 500px;
	height: auto;
}
.gambar_1 {
	width: 200px;
}

Universal Selector

Selektor universal digunakan untuk merubah semua tampilan tag HTML. Alias di rewrite ulang settingan default (bawaan dari sononya).

Untuk menulisnya, kode selector yang digunakan adalah bintang *.

* {
	color: blue
}

Grouping Selector

Digunakan untuk memberi style lebih dari satu selector. Misal, kita ingin memberi tampilan yang sama untuk h1, h2, h3, h4, h5, h6.

Maka yang biasa ditulis adalah:

h1 {
	color: red
}
h2 {
	color: red
}
h3 {
	color: red
}
h4 {
	color: red
}
h5 {
	color: red
}
h6 {
	color: red
}

Dengan menggunakan CSS group, maka penulisannya menjadi lebih sederhana:

h1, h2, h3, h4, h5, h6 {
	color: red
}

Setiap selector dipisahkan dengan koma ,.

Kesimpulan Simple Selector

Selector	Contoh	Keterangan
.class	.gambar_1	Memberi style untuk semua `class="gambar_1"`
#id	#gambar	Memilih element `id="gambar"`
*	*	Memilih semua element (tulis ulang style)
element	p	Memilih semua element `<p>`
element, element	p, div	Memilih element `<p>` dan `<div>`

Tabel Penggunaan Selector CSS Sederhana

Selector Combinator

Selektor kombinator digunakan untuk memilih suatu elemen yang memiliki hubungan dengan elemen lain.

Descandant Selector

Adalah selektor untuk memilih elemen di dalam elemen (sampai kedalaman tak terhingga).

Misal begini, saya menulis syntax html: <div><h1>judul</h1></div>.

Nah, kita mau memberi style h1 yang ada di dalam div tersebut. Cara menulis kode cssnya adalah:

div h1 {color:red}

Jadi, selector pertama membaca tag terluar, selector kedua membaca didalamnya.

Bagaimana kalau lebih dari dua? Ya tinggal lakukan hal yang sama sampai level yang dibutuhkan.

Misal: <div><p><span>test</span></p></div> maka kode CSS untuk membuat style di span adalah:

div p span {color:red}

Sampai sini paham kan?

Child Selector

Hampir mirip dengan descandant selector diatas, bedanya child selector bener-bener harus spesifik levellingnya. Misal saya nulis kode HTML berikut:

<div>
	<p>Paragraf 1</p>
	<section><p>Paragraf 3</p></section >
	<p>Paragraf 2</p>
</div>

Disitu ada 2 level <p>, pertama <p> di dalam <div> yang kedua <p> di dalam <section> dimana <section> didalam <div>.

Kalau descending, kita cukup menulis kode css div p {} maka semua <p> di dalam <div> akan berubah stylenya.

Jadi, meskipun level kedalamannya 3 level yaitu div > section > p. Maka <p> tersebut akan tetap kena efeknya.

Kalau Child selector, maka dia hanya akan memilih <p> di level yang telah ditentukan. Contoh:

div p {color: blue}
div > p {color: red}

Maka, yang akan terpengaruh hanyalah <p> yang ada di level kedua. Hasilnya dengan kode HTML diatas menjadi:

Paragraf 1

Paragraf 3

Paragraf 2

Adjacent Sibling Selector

Adalah selector untuk memilih elemen2 yang dipanggil setelah elemen1. Misal:

<div>
	<p>Paragraf 1 dalam div</p>
	<p>Paragraf 2 dalam div</p>
</div>
<p>Paragraf 3 luar div</p>
<p>Paragraf 4 luar div</p>

Kemudian kita kasih efek:

div + p {
  background-color: yellow;
}

Maka hasilnya:

Paragraf 1 dalam div

Paragraf 2 dalam div

Paragraf 3 luar div

Paragraf 4 luar div

General Sibling Selector

Kalau yang Adjacent Sibling Selector hanya memilih satu buah elemen <p> saja setelah <div>, sehingga elemen <p> kedua tidak kepilih. Maka kalau General Sibling Selector semua element <p> setelah <div> kepilih semua.

Penulisannya:

div ~ p {
  background-color: yellow;
}

Hasilnya dengan kode html yang sama seperti contoh Adjacent Sibling Selector:

Paragraf 1 dalam div

Paragraf 2 dalam div

Paragraf 3 luar div

Paragraf 4 luar div

Kesimpulan Selector Combinators

Selector	Contoh	Keterangan
elemen elemen	div p	Pilih semua `<p>` di dalam `<div>` (berapapun levelnya)
elemen > elemen	div > p	Pilih semua `<p>` tepat di dalam `<div>`
elemen+elemen	div+p	Pilih elemen `<p>` setelah elemen `<div>`
elemen 1 ~ elemen 2	div~p	Pilih semua elemen `<p>` setelah elemen `<div>`

Kesimpulan selektor kombinator

Selector Pseudo-class

Adalah selektor CSS untuk memberikan efek style pada sebuah elemen setelah terjadi sebuah action.

Action itu misalnya:

Setelah kursor didekatkan ke elemen
Setelah elemen di klik
Elemen yang kosong tidak ada isinya

Penulisan syantaxnya:

selector:pseudo-class {
  property:value;
}

Karena ada buanyak jenis Selector pseudo-class maka saya hanya kasih beberapa contoh saja ya:

Efek Hover

Hover adalah efek ketika kursor di arahkan dalam suatu elemen. Misal saya ingin memberi efek hover pada div yang ber ID contoh_hover kode HTMLnya <div id="contoh_hover"></div>. Efek tersebut antara lain:

Sebelum diarahin mouse, warna kotak div merah
Setelah diarahin mouse, warna menjadi kuning

Kode CSSnya adalah:

#contoh_hover {
	width: 100%;
	height: 50px;
	background: red;
}
#contoh_hover:hover {
	width: 100%;
	height: 50px;
	background: yellow;
}

Hasilnya:

Arahin mouse kesini

Tabel Selector Pseudo Classes

No	Selector	Contoh	Keterangan
1	:active	a:active	Pilih semua link yang aktif
2	:checked	input:checked	Pilih setiap elemen <input> yang dichecked (centang / pilih)
3	:disabled	input:disabled	Pilih elemen <input> yang didisabled
4	:empty	p:empty	Pilih <p> yang tidak punya child / sub elemen
5	:enabled	input:enabled	Pilih <input> yang di enabled
6	:first-child	p:first-child	Pilih <p> yang pertama dimana <p> child pertama
7	:first-of-type	p:first-of-type	Pilih <p> dimana <p> adalah elemen pertama di parent
8	:focus	input:focus	Pilih <input> yang punya atribut focus
9	:hover	a:hover	Pilih ketika mouse di dekatkan ke link
10	:in-range	input:in-range	Pilih <input> yang punya value dalam range spesifik
11	:invalid	input:invalid	Pilih semua <input> yang invalid
12	:lang(language)	p:lang(it)	Pilih setiap <p> yang isinya dimulai dengan kata “it”
13	:last-child	p:last-child	Pilih <p> yang terakhir jika <p> adalah elemen terakhir
14	:last-of-type	p:last-of-type	Pilih <p> dimana <p> yang dipilih adalah elemen <p> terakhir
15	:link	a:link	Pilih semua link yang belum dklik / dikunjungi
16	:not(selector)	:not(p)	Pilih setiap elemen bukan <p>
17	:nth-child(n)	p:nth-child(2)	Pilih <p> yang kedua
18	:nth-last-child(n)	p:nth-last-child(2)	Pilih <p>, dimana <p> adalah elemen terakhir kedua dari belakang
19	:nth-last-of-type(n)	p:nth-last-of-type(2)	Pilih <p>, jika <p> adalah elemen <p> terakhir kedua dari belakang
20	:nth-of-type(n)	p:nth-of-type(2)	Pilih <p>, jika <p> adalah elemen <p> kedua dari depan
21	:only-of-type	p:only-of-type	Pilih <p> jika parent hanya punya child elemen <p>
22	:only-child	p:only-child	Pilih <p> jika dia hanya satu-satunya child
23	:optional	input:optional	Pilih <input> tanpa atribut “required”
24	:out-of-range	input:out-of-range	Pilih <input> dengan value diluar yang ditentukan
25	:read-only	input:read-only	Pilih <input> dengan atribut “readonly”
26	:read-write	input:read-write	Pilih <input> dengan atribut “read-write”
27	:required	input:required	Pilih <input> elemen dengan atribut “requirerd”
28	:root	root	Pilih root dokumen
29	:target	#news:target	Pilih ID #news yang aktif
30	:valid	input:valid	Pilih <input> dengan value yang valid
31	:visited	a:visited	Pilih semua link yang telah dikunjungi

Tabel pseudo classes lengkap (sumber: w3school css pseudo-classes)

Selector Pseudo-elements

Kalau pseudo-class memberikan style pada setiap action yang dipilih, artinya style akan terlihat jika pengguna telah melakukan sesuatu. Bisa ngeklik, mengarahkan kursor, dll.

Sedangkan pseudo-element, memberikan efek style pada bagian dari suatu elemen. Misal: bagian depan atau belakang.

Format penulisannya:

selector::pseudo-element {
  property:value;
}

::First-letter

Misal, saya ingin membuat satu huruf menjadi besar. Seperti yang di koran-koran. Maka kodenya:

 p::first-letter {
  color: blue;
  font-size: xx-large;
}

Ini hasilnya

Tabel Selector Pseudo-elements

No	Selektor	Contoh	Keterangan
1	::after	p::after	Memasukkan efek / konten setelah elemen <p>
2	::before	p::before	Memasukkan efek / konten sebelum elemen <p>
3	::first-letter	p::first-letter	Memilih huruf pertama dalam elemen <p>
4	::first-line	p::first-line	Memilih baris pertama pada elemen <p>

Selector Attribute

Terakhir adalah atribut selektor, artinya adalah selektor ini memilih elemen berdasar atribut dan nilainya. Format penulisannya:

a[target] {
  background-color: yellow;
}

Contoh Attribute Selector

Misal, saya ingin buat style khusus untuk link a yang targetnya di tab baru. Maka style yang digunakan:

a[target=_blank] {
  background-color: yellow;
  font-size:xx-large
}

Dengan kode HTML untuk link misalnya:

<a href="https://www.w3schools.com">w3schools.com</a>
<a href="https://halamansatu.biz/" target="_blank">puntadewa.my.id</a>
<a href="http://www.wikipedia.org" target="_top">wikipedia.org</a>

Maka, hasilnya menjadi:

w3schools.com puntadewa.my.id wikipedia.org

Tabel Selektor Atribut

No	Selektor	Contoh	Keterangan
1	[attribute]	[target]	Pilih setiap elemen yang punya atribut `target`
2	[attribute=value]	[target=_blank]	Pilih setiap elemen yang punya atribut `target` dengan value `_blank`
3	[attribute~=value]	[title~=ganteng]	Pilih setiap elemen dengan title mengandung kata “`ganteng`“
4	[attribute\|=value]	[lang\|=id]	Pilih setiap elemen dengan atribut dimulai dengan huruf “`id`“
5	[attribute^=value]	a[href^=”https”]	Pilih setiap elemen `<a>` yang linknya dimulai dengan `https`
6	[attribute$=value]	a[href$=”.pdf”]	Pilih setiap elemen `<a>` yang linknya diakhiri dengan ekstensi `.pdf`
7	[attribute*=value]	a[href*=”cantik”]	Pilih setiap elemen `<a>` yang link href mengandung kata “`cantik`“

Kesimpulan

Untuk menulis kode CSS kamu harus menguasai sintak dan selektor di CSS.

Pahami apa yang saya tulis di artikel ini. Karena, kalau kamu tidak paham. Maka, kamu bisa menulis kode yang tidak benar walau efeknya sama.

Mengapa ini jadi masalah?

Walau efeknya sama, karena kodenya tidak sesuai maka jika ada update maka kode tersebut bisa jadi bermasalah.

Selain itu, dengan kamu paham selector ini sangat membantu kamu dalam mendesain tampilan yang keren dan clean code.

Referensi artikel: