CSS Syntax dan Selector

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:

  1. Selector sederhana (simple), yaitu memilih element, id atau class.
  2. Selector kombinasi (combinator), yaitu memilih element berdasarkan suatu elemen yang berhubungan dengannya. Misal: memilih elemen html yang ada di dalam elemen lain.
  3. Selector pseudo-class, yaitu untuk memberi efek dari suatu aksi. Misal: setelah cursor didekatkan, setelah di klik.
  4. Selector pseudo-elements, yaitu untuk memberi style dari bagian spesifik suatu element. Misal: baris tabel yang ganjil.
  5. 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

SelectorContohKeterangan
.class.gambar_1Memberi style untuk semua class="gambar_1"
#id#gambarMemilih element id="gambar"
**Memilih semua element (tulis ulang style)
elementpMemilih semua element <p>
element, elementp, divMemilih 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

SelectorContohKeterangan
elemen elemendiv pPilih semua <p> di dalam <div> (berapapun levelnya)
elemen > elemendiv > pPilih semua <p> tepat di dalam <div>
elemen+elemendiv+pPilih elemen <p> setelah elemen <div>
elemen 1 ~ elemen 2div~pPilih 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

NoSelectorContohKeterangan
1:activea:activePilih semua link yang aktif
2:checkedinput:checkedPilih setiap elemen <input> yang dichecked (centang / pilih)
3:disabledinput:disabledPilih elemen <input> yang didisabled
4:emptyp:emptyPilih <p> yang tidak punya child / sub elemen
5:enabledinput:enabledPilih <input> yang di enabled
6:first-childp:first-childPilih <p> yang pertama dimana <p> child pertama
7:first-of-typep:first-of-typePilih <p> dimana <p> adalah elemen pertama di parent
8:focusinput:focusPilih <input> yang punya atribut focus
9:hovera:hoverPilih ketika mouse di dekatkan ke link
10:in-rangeinput:in-rangePilih <input> yang punya value dalam range spesifik
11:invalidinput:invalidPilih semua <input> yang invalid
12:lang(language)p:lang(it)Pilih setiap <p> yang isinya dimulai dengan kata “it”
13:last-childp:last-childPilih <p> yang terakhir jika <p> adalah elemen terakhir
14:last-of-typep:last-of-typePilih <p> dimana <p> yang dipilih adalah elemen <p> terakhir
15:linka:linkPilih 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-typep:only-of-typePilih <p> jika parent hanya punya child elemen <p>
22:only-childp:only-childPilih <p> jika dia hanya satu-satunya child
23:optionalinput:optionalPilih <input> tanpa atribut “required”
24:out-of-rangeinput:out-of-rangePilih <input> dengan value diluar yang ditentukan
25:read-onlyinput:read-onlyPilih <input> dengan atribut “readonly”
26:read-writeinput:read-writePilih <input> dengan atribut “read-write”
27:requiredinput:requiredPilih <input> elemen dengan atribut “requirerd”
28:rootrootPilih root dokumen
29:target#news:targetPilih ID #news yang aktif
30:validinput:validPilih <input> dengan value yang valid
31:visiteda:visitedPilih 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

NoSelektorContohKeterangan
1::afterp::afterMemasukkan efek / konten setelah elemen <p>
2::beforep::beforeMemasukkan efek / konten sebelum elemen <p>
3::first-letterp::first-letterMemilih huruf pertama dalam elemen <p>
4::first-linep::first-lineMemilih 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://puntadewa.my.id/" target="_blank">puntadewa.my.id</a>
<a href="http://www.wikipedia.org" target="_top">wikipedia.org</a>

Maka, hasilnya menjadi:

Tabel Selektor Atribut

NoSelektorContohKeterangan
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:

Leave a Comment