Anak Males – Kali ini kita akan belajar tentang selector lebih lengkap lagi, meskipun kemarin di sintaks dasar css sudah dibahas namun kayaknya itu belum cukup deh.
Jadi mari kita bahas..
Selector adalah bagian dari kode CSS (Cascading Style Sheets) yang menentukan elemen HTML mana yang akan diberikan gaya.
Dengan menggunakan selector, kita dapat merubah tampilan situs web dengan mengubah warna teks, mengubah ukuran font, menambahkan latar belakang, dll.
Dengan menggunakan selector, kita dapat merubah tampilan situs web sesuai dengan keinginan. Misalnya, dapat mengubah warna teks, mengubah ukuran font, menambahkan latar belakang, dll.
Dengan demikian, selector merupakan bagian penting dari kode CSS yang perlu di ketahui jika ingin membuat situs web yang indah dan bergaya.
Jenis Jenis Selector Di CSS
CSS selectors digunakan untuk “menemukan” (atau memilih) elemen HTML yang ingin kamu atur gayanya.
Kita bisa membagi selektor CSS menjadi lima kategori:
- Simple selector (memilih elemen berdasarkan nama, id, kelas)
- Combinator selector (memilih elemen berdasarkan hubungan khusus antara elemen tersebut)
- Pseudo-class selector (memilih elemen berdasarkan keadaan tertentu)
- Pseudo-elements selector (memilih dan mengatur gaya bagian dari suatu elemen)
- Attribute selector (memilih elemen berdasarkan atribut atau nilai atribut)
Pada tutorial kali ini kita akan membahas lima kategori selector tersebut.
1. Simple Selector CSS
Simple selector adalah jenis selector CSS yang paling sederhana dan paling sering digunakan. Simple selector digunakan untuk mencocokkan elemen HTML yang sesuai dengan nama elemen, kelas, atau ID.
Berikut ini adalah beberapa contoh simple selector:
- Selector elemen: mencocokkan elemen HTML yang sesuai dengan nama elemen. Misalnya, selector “p” akan mencocokkan semua elemen paragraf di halaman web.
- Selector class: mencocokkan elemen HTML yang memiliki kelas tertentu. Misalnya, selector “.red” akan mencocokkan semua elemen yang memiliki kelas “red”.
- Selector ID: mencocokkan elemen HTML yang memiliki ID tertentu. Misalnya, selector “#header” akan mencocokkan elemen yang memiliki ID “header”.
Simple selector merupakan jenis selector yang paling sering digunakan dalam CSS karena mudah dipahami dan mudah digunakan.
Dengan menggunakan simple selector, kita dapat merubah tampilan situs web sesuai dengan keinginan, seperti mengubah warna teks, mengubah ukuran font, menambahkan latar belakang, dll.
Berikut ini adalah contoh program CSS yang menggunakan simple selector:
/* Selector elemen */
p {
color: red;
font-size: 14px;
}
/* Selector class */
.highlight {
background-color: yellow;
}
/* Selector ID */
#header {
background-color: lightblue;
font-size: 20px;
}
Dalam contoh di atas, kita menggunakan simple selector untuk mengubah tampilan elemen HTML dengan cara sebagai berikut:
- Selector elemen “p” digunakan untuk mengubah warna teks semua elemen paragraf menjadi merah dan mengubah ukuran font menjadi 14px.
- Selector class “.highlight” digunakan untuk menambahkan latar belakang kuning pada semua elemen yang memiliki kelas “highlight”.
- Selector ID “#header” digunakan untuk menambahkan latar belakang biru muda dan mengubah ukuran font menjadi 20px pada elemen yang memiliki ID “header”.
Dengan menggunakan simple selector, kita dapat dengan mudah merubah tampilan situs web sesuai dengan keinginan. Semoga contoh di atas dapat membantu memahami cara menggunakan simple selector dalam CSS.
2. Combinator Selector
Combinator selector adalah jenis selector CSS yang digunakan untuk mencocokkan elemen HTML yang memenuhi kriteria yang spesifik.
Combinator selector terdiri dari dua bagian: simple selector dan combinator. Combinator menjelaskan hubungan antara dua simple selector.
Berikut ini adalah beberapa jenis combinator selector yang sering digunakan:
- Selector descendant: mencocokkan elemen HTML yang merupakan turunan dari elemen lain. Misalnya, selector “div p” akan mencocokkan semua elemen paragraf yang berada di dalam elemen div.
- Selector child: mencocokkan elemen HTML yang merupakan anak dari elemen lain. Misalnya, selector “div > p” akan mencocokkan semua elemen paragraf yang merupakan anak langsung dari elemen div.
- Selector adjacent sibling: mencocokkan elemen HTML yang berada di samping elemen lain. Misalnya, selector “h1 + p” akan mencocokkan semua elemen paragraf yang berada di samping elemen h1.
- Selector general sibling: mencocokkan elemen HTML yang merupakan saudara dari elemen lain. Misalnya, selector “h1 ~ p” akan mencocokkan semua elemen paragraf yang merupakan saudara dari elemen h1.
Combinator selector berguna untuk mencocokkan elemen HTML yang memenuhi kriteria yang spesifik.
Dengan menggunakan combinator selector, kita dapat merubah tampilan situs web sesuai dengan keinginan, seperti mengubah warna teks, mengubah ukuran font, menambahkan latar belakang, dll.
Berikut ini adalah contoh program CSS yang menggunakan combinator selector:
/* Selector descendant */
div p {
color: red;
}
/* Selector child */
div > p {
font-size: 14px;
}
/* Selector adjacent sibling */
h1 + p {
font-weight: bold;
}
/* Selector general sibling */
h1 ~ p {
text-decoration: underline;
}
Dalam contoh di atas, kita menggunakan combinator selector untuk mengubah tampilan elemen HTML dengan cara sebagai berikut:
- Selector descendant “div p” digunakan untuk mengubah warna teks semua elemen paragraf yang berada di dalam elemen div menjadi merah.
- Selector child “div > p” digunakan untuk mengubah ukuran font semua elemen paragraf yang merupakan anak langsung dari elemen div menjadi 14px.
- Selector adjacent sibling “h1 + p” digunakan untuk mengubah tebal font semua elemen paragraf yang berada di samping elemen h1 menjadi tebal.
- Selector general sibling “h1 ~ p” digunakan untuk menambahkan garis bawah pada semua elemen paragraf yang merupakan saudara dari elemen h1.
Combinator selector berguna untuk mencocokkan elemen HTML yang memenuhi kriteria yang spesifik.
Dengan menggunakan combinator selector, kita dapat merubah tampilan situs web sesuai dengan keinginan. Semoga contoh di atas dapat membantu memahami cara menggunakan combinator selector dalam CSS.
3. Pseudo-class Selector
Pseudo-class selector adalah jenis selector CSS yang digunakan untuk mencocokkan elemen HTML yang berada dalam keadaan tertentu.
Pseudo-class selector biasanya diawali dengan tanda titik dua (:) dan mencocokkan elemen yang berada dalam keadaan yang tidak dapat ditentukan oleh atribut HTML.
Berikut ini adalah beberapa jenis pseudo-class selector yang sering digunakan:
- :hover: mencocokkan elemen HTML ketika pointer mouse berada di atas elemen tersebut.
- :active: mencocokkan elemen HTML ketika elemen tersebut sedang diklik.
- :focus: mencocokkan elemen HTML ketika elemen tersebut sedang fokus.
- :visited: mencocokkan elemen HTML yang telah dikunjungi sebelumnya.
- :first-child: mencocokkan elemen HTML yang merupakan anak pertama dari elemen lain.
- :last-child: mencocokkan elemen HTML yang merupakan anak terakhir dari elemen lain.
- :nth-child(n): mencocokkan elemen HTML yang merupakan anak ke-n dari elemen lain.
Pseudo-class selector berguna untuk mencocokkan elemen HTML yang berada dalam keadaan tertentu. Dengan menggunakan pseudo-class selector, kita dapat merubah tampilan situs web sesuai dengan keinginan, seperti mengubah warna teks, mengubah ukuran font, menambahkan latar belakang, dll.
Contoh program CSS yang menggunakan pseudo-class selector:
/* Mengganti warna teks ketika pointer mouse berada di atas elemen */
a:hover {
color: red;
}
/* Mengganti warna latar belakang ketika elemen sedang diklik */
button:active {
background-color: yellow;
}
/* Mengganti warna teks ketika elemen sedang fokus */
input:focus {
color: blue;
}
/* Mengganti warna teks elemen yang telah dikunjungi sebelumnya */
a:visited {
color: purple;
}
/* Mengganti warna latar belakang elemen yang merupakan anak pertama dari elemen div */
div:first-child {
background-color: green;
}
/* Mengganti warna latar belakang elemen yang merupakan anak terakhir dari elemen div */
div:last-child {
background-color: orange;
}
/* Mengganti warna teks elemen yang merupakan anak ke-3 dari elemen div */
div:nth-child(3) {
color: pink;
}
Dalam contoh di atas, kita menggunakan pseudo-class selector untuk mengubah tampilan elemen HTML dengan cara sebagai berikut:
- Pseudo-class selector “a:hover” digunakan untuk mengubah warna teks semua elemen tautan ketika pointer mouse berada di atas elemen tersebut.
- Pseudo-class selector “button:active” digunakan untuk mengubah warna latar belakang semua elemen tombol ketika elemen tersebut sedang diklik.
- Pseudo-class selector “input:focus” digunakan untuk mengubah warna teks semua elemen input ketika elemen tersebut sedang fokus.
- Pseudo-class selector “a:visited” digunakan untuk mengubah warna teks semua elemen tautan yang telah dikunjungi sebelumnya.
- Pseudo-class selector “div:first-child” digunakan untuk mengubah warna latar belakang elemen yang merupakan anak pertama dari elemen div.
- Pseudo-class selector “div:last-child” digunakan untuk mengubah warna latar belakang elemen yang merupakan anak terakhir dari elemen div.
- Pseudo-class selector “div:nth-child(3)” digunakan untuk mengubah warna teks elemen yang merupakan anak ke-3 dari elemen div.
Pseudo-class selector berguna untuk mencocokkan elemen HTML yang berada dalam keadaan tertentu. Dengan menggunakan pseudo-class selector, kita dapat merubah tampilan situs web sesuai dengan keinginan, seperti mengubah warna teks, mengubah ukuran font, menambahkan latar belakang, dll.
Contoh program CSS di atas menggunakan beberapa jenis pseudo-class selector yang sering digunakan. Kita dapat mencoba menggunakan pseudo-class selector lainnya sesuai dengan kebutuhan. Semoga contoh di atas dapat membantu memahami cara menggunakan pseudo-class selector dalam CSS.
4. Pseudo-elements Selector
Pseudo-elements selector adalah jenis selector CSS yang digunakan untuk mencocokkan bagian-bagian tertentu dari elemen HTML.
Pseudo-elements selector biasanya diawali dengan tanda titik dua (:) dan diikuti dengan nama pseudo-elements. Pseudo-elements selector tidak memiliki atribut HTML yang dapat ditentukan, sehingga tidak dapat digunakan untuk merubah elemen HTML secara langsung.
Berikut ini adalah beberapa jenis pseudo-elements selector yang sering digunakan:
- ::before: mencocokkan bagian sebelum elemen HTML.
- ::after: mencocokkan bagian setelah elemen HTML.
- ::first-line: mencocokkan baris pertama dari elemen HTML.
- ::first-letter: mencocokkan huruf pertama dari elemen HTML.
- ::selection: mencocokkan bagian yang dipilih dari elemen HTML.
Pseudo-elements selector berguna untuk mencocokkan bagian-bagian tertentu dari elemen HTML. Dengan menggunakan pseudo-elements selector, kita dapat menambahkan konten sebelum atau setelah elemen HTML, mengubah huruf pertama atau baris pertama dari elemen HTML, atau mengubah bagian yang dipilih dari elemen HTML.
Contoh program CSS yang menggunakan pseudo-elements selector:
/* Menambahkan teks sebelum elemen */
p::before {
content: "Ini adalah teks yang ditambahkan sebelum elemen paragraf.";
}
/* Menambahkan teks setelah elemen */
p::after {
content: "Ini adalah teks yang ditambahkan setelah elemen paragraf.";
}
/* Mengubah huruf pertama elemen */
p::first-letter {
font-size: 20px;
color: red;
}
/* Mengubah baris pertama elemen */
p::first-line {
font-weight: bold;
}
/* Mengubah warna bagian yang dipilih */
::selection {
background-color: yellow;
}
Dalam contoh di atas, kita menggunakan pseudo-elements selector untuk mengubah tampilan elemen HTML dengan cara sebagai berikut:
- Pseudo-elements selector “p::before” digunakan untuk menambahkan teks sebelum elemen paragraf.
- Pseudo-elements selector “p::after” digunakan untuk menambahkan teks setelah elemen paragraf.
- Pseudo-elements selector “p::first-letter” digunakan untuk mengubah huruf pertama elemen paragraf dengan font yang lebih besar dan warna merah.
- Pseudo-elements selector “p::first-line” digunakan untuk mengubah baris pertama elemen paragraf dengan font yang lebih tebal.
- Pseudo-elements selector “::selection” digunakan untuk mengubah warna bagian yang dipilih dari elemen HTML menjadi kuning.
Semua pseudo-elements selector yang digunakan dalam contoh di atas merupakan jenis pseudo-elements selector yang sering digunakan.
Kita dapat mencoba menggunakan pseudo-elements selector lainnya sesuai dengan kebutuhan. Jangan lupa untuk memastikan bahwa pseudo-elements selector yang digunakan sesuai dengan spesifikasi CSS yang berlaku.
Semoga contoh di atas dapat membantu memahami cara menggunakan pseudo-elements selector dalam CSS.
5. Attribute selector
Atribut selector adalah jenis selector CSS yang digunakan untuk mencocokkan elemen HTML berdasarkan atribut yang dimilikinya.
Atribut selector biasanya diawali dengan tanda kurung siku ([) dan diikuti dengan atribut yang akan dicocokkan. Atribut selector bisa mencocokkan elemen HTML secara spesifik atau bisa juga mencocokkan elemen HTML yang memiliki atribut dengan nilai tertentu.
Berikut ini adalah contoh program CSS yang menggunakan atribut selector:
/* Mencocokkan semua elemen yang memiliki atribut class */
[class] {
font-style: italic;
}
/* Mencocokkan semua elemen yang memiliki atribut class dengan nilai "selected" */
[class="selected"] {
background-color: yellow;
}
/* Mencocokkan semua elemen yang memiliki atribut data-id dengan nilai "123" */
[data-id="123"] {
font-weight: bold;
}
/* Mencocokkan semua elemen yang memiliki atribut lang dengan nilai yang dimulai dengan "en" */
[lang|="en"] {
font-size: 20px;
}
Dalam contoh di atas, kita menggunakan atribut selector untuk mencocokkan elemen HTML dengan cara sebagai berikut:
- Atribut selector “[class]” digunakan untuk mencocokkan semua elemen yang memiliki atribut class.
- Atribut selector “[class=”selected”]” digunakan untuk mencocokkan semua elemen yang memiliki atribut class dengan nilai “selected”.
- Atribut selector “[data-id=”123″]” digunakan untuk mencocokkan semua elemen yang memiliki atribut data-id dengan nilai “123”.
- Atribut selector “[lang|=”en”]” digunakan untuk mencocokkan semua elemen yang memiliki atribut lang dengan nilai yang dimulai dengan “en”.
Semua atribut selector yang digunakan dalam contoh di atas merupakan jenis atribut selector yang sering digunakan.
Kita dapat mencoba menggunakan atribut selector lainnya sesuai dengan kebutuhan. Jangan lupa untuk memastikan bahwa atribut selector yang di gunakan sesuai dengan spesifikasi CSS yang berlaku.
Semoga contoh di atas dapat membantu memahami cara menggunakan atribut selector dalam CSS.
Penutup
Baiklah, mungkin hanya seperti itu aja, tutorial untuk memahami selector di CSS. Sampai jumpa di tutorial berikutnya, babai.