CSS selectors merupakan mekanisme dalam memilih dan menargetkan elemen didalam HTML. selectors memungkinkan berkomunikasi langsung dengan elemen-elemen HTML, memberi tahu browser bagian mana yang harus diberi style khusus.
Selector dasar dipakai untuk menargetkan dan mengubah tampilan elemen HTML, jenis-jenis selector dasar
A. Selector tag
Selector tag menargetkan elemen berdasarkan jenisnya, dengan elemen selector akan memungkinkan semua elemen paragraf di halaman web mengalami perubahan.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
<!DOCTYPE HTML> <html> <head> <title>www.syaiflash.com - Selector tag</title> <style type="text/css"> h1 { text-decoration: underline; color: blue; } p { font-style: italic; font-size: 25px; font-family: "Times New Roman", Times, serif; color: red; } </style> </head> <body> <h1> JUDUL ARTIKEL</h1> <p> Isi Artikel pertama </p> <p> Isi Artikel kedua</p> <p> Isi Artikel ketiga</p> </body> </html> |
B. Class selector
Selector Class menargetkan elemen berdasarkan atribut class. Menggunakan class selector yang diawali dengan tanda titik (.) Sangat cocok apabila ingin beberapa elemen memiliki style sama untuk menciptakan konsistensi dalam desain.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
<!DOCTYPE HTML> <html> <head> <title>www.syaiflash.com - Selector Class</title> <style type="text/css"> .selector_01 { font-style: italic; font-size: 25px; font-family: "Times New Roman", Times, serif; color: red; } .selector_02 { font-style: bolt; font: 30px monospace; color: blue; } </style> </head> <body> <h1> JUDUL ARTIKEL</h1> <p class='selector_01'>Tulisan artikel 01</p> <p class='selector_02'>Tulisan artikel 02</p> </body> </html> |
C. ID selector
ID selector menargetkan elemen berdasarkan atribut ID-nya
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<!DOCTYPE HTML> <html> <head> <title>www.syaiflash.com - ID selector</title> <style type="text/css"> #judul-utama { color: green; } </style> </head> <body> <h1> CSS DENGAN ID SELECTOR</h1> <h1 id="judul-utama">Selamat Datang di Website Kami</h1> </body> </html> |
D. Universal selector
universal selector direpresentasikan dengan tanda bintang (*) dan digunakan untuk menargetkan semua elemen yang ada dalam dokumen HTML
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
<!DOCTYPE html> <html> <head> <title>www.syaiflash.com - Selector Universal</title> <style> * { text-align: center; color: blue; } </style> </head> <body> <h1>Selamat Datang</h1> <h2 id="tes_id">Selamat Datang di Website Kami</h2> <p>Every element on the page will be affected by the style.</p> <p>Me too!</p> <p>And me!</p> </body> </html> |
E. Atribut Selector
Menggunakan dan memilih nama sesuai dengan nama atribut pada tag html. Penulisan selector attribute diawali dengan nama tag lalu nama atributte.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
<!DOCTYPE html> <html> <head> <title>www.syaiflash.com - Atribut Selector</title> <style> input[type=text] { color: blue; padding: 10px; border: 1px solid blue; } </style> </head> <body> <input type="text" placeholder="Masukan nama Anda" /> </body> </html> |
F. Selector Pseudo-class
Selector CSS yang digunakan untuk menargetkan elemen HTML berdasarkan keadaan atau perilaku elemen tersebut. Misalnya, selector pseudo-class dapat digunakan untuk menargetkan elemen saat diklik, saat kursor mouse melayang di atasnya, saat elemen dalam fokus, dan masih banyak lagi
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<!DOCTYPE html> <html> <head> <title>www.syaiflash.com - Selector Pseudo-class</title> <style> p:hover { color: yellow; background-color: blue; } </style> </head> <body> <p>Ini adalah paragraf dengan tag p pada kode html</p> </body> </html> |
Pseudo-class lainnya
| 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 |
G. 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.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<!DOCTYPE html> <html> <head> <title>www.syaiflash.com - Pseudo-Element</title> <style> p::after { content: " - Teks baru dengan pseudo after"; } </style> </head> <body> <p>Ini adalah paragraf dengan tag p pada kode html</p> </body> </html> |
Pseudo-element lainnya
| 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 |
H. Selector Group
Selector group memungkinkan untuk menggunakan lebih dari satu element tertentu dan menggunakan style css yang sama. Untuk penulisan kodenya dipisahkan dengan koma.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
<!DOCTYPE html> <html> <head> <title>www.syaiflash.com - Selector Group</title> <style> h2, h3, p { font-size: 28px; } </style> </head> <body> <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> </body> </html> |
Leave a Reply