Artikel Pendek · Kode Program
Original PostPenggunaan Selector dalam CSS
Hello guys, Berjumpa lagi dengan Miniblog dari Inzaghi's Blog! Selain HTML, kita juga memerlukan yang namanya CSS. Selector sanggatlah penting dalam memilih gaya di dalam CSS.
Sumber : W3schools.com dan juga menggunakan ChatGPT
Dalam CSS (Cascading Style Sheets), selector adalah pola yang digunakan untuk memilih dan memberi gaya pada elemen HTML di halaman web. Selector memungkinkan Anda menargetkan elemen-elemen tertentu atau kelompok elemen untuk menerapkan gaya, menjadikannya bagian mendasar dari pembuatan tata gaya pada halaman web.
Berikut adalah beberapa Jenis Selector secara umum :
1. Type Selector
Menargetkan elemen-elemen dari jenis tertentu. Misalnya, p menargetkan semua elemen <p> (Paragraf).
p {color: blue;}
2. Class Selector
Menargetkan elemen-elemen dengan atribut class tertentu. Dinyatakan dengan titik (dot) diikuti oleh nama class. Misalnya, .highlight menargetkan semua elemen dengan class="highlight".
.highlight {background-color: yellow;}
3. ID Selector
Menargetkan elemen tertentu dengan atribut ID unik. Dinyatakan dengan tanda pagar (#) diikuti oleh ID. Misalnya, #header menargetkan elemen dengan id="header".
#header {font-size: 24px;}
4. Attribute Selector
Menargetkan elemen berdasarkan atribut-atribut mereka. Misalnya, [type="text"] menargetkan semua elemen dengan type="text".
input[type="text"] {border: 1px solid #ccc;}
5. Descendant Selector
Menargetkan elemen yang merupakan turunan dari elemen yang ditentukan. Misalnya, nav a menargetkan semua elemen <a> (anchor) yang berada di dalam elemen <nav>.
nav a {color: white;}
6. Pseudo-class Selector
Menargetkan elemen berdasarkan keadaan atau posisi mereka, seperti :hover untuk efek mouseover atau :nth-child untuk memilih anak-anak tertentu. Misalnya, a:hover menargetkan tautan ketika mouse berada di atasnya.
a:hover {text-decoration: underline;}
7. Universal Selector
Menargetkan semua elemen di halaman. Dinyatakan dengan asterisk (*). Misalnya, * menargetkan semua elemen.
* {margin: 0;padding: 0;}
Selector juga dapat digabungkan dan disusun bersarang untuk membuat pemilihan yang lebih spesifik dan kompleks. Sebagai contoh, .container p menargetkan semua elemen paragraf yang merupakan turunan dari elemen dengan class "container." Memahami dan menggunakan selector dengan efektif sangat penting untuk membuat halaman web yang rapi dan terstruktur dengan baik.
Untuk menerapkan selector di atas ke dalam HTML, Anda bisa menyisipkan kode CSS ke dalam elemen <style> di bagian <head> dokumen HTML Anda. Berikut adalah contoh HTML yang menggunakan selector tersebut :
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Contoh CSS Selector</title><style>/* Type Selector */p {color: blue;}/* Class Selector */.highlight {background-color: yellow;}/* ID Selector */#header {font-size: 24px;}/* Attribute Selector */input[type="text"] {border: 1px solid #ccc;}/* Descendant Selector */nav a {color: white;}/* Pseudo-class Selector */a:hover {text-decoration: underline;}/* Universal Selector */* {margin: 0;padding: 0;}</style></head><body><!-- Contoh penggunaan elemen dengan Type Selector --><p>Ini adalah contoh teks paragraf.</p><!-- Contoh penggunaan elemen dengan Class Selector --><div class="highlight">Ini adalah elemen dengan class "highlight".</div><!-- Contoh penggunaan elemen dengan ID Selector --><div id="header">Ini adalah elemen dengan ID "header".</div><!-- Contoh penggunaan elemen dengan Attribute Selector --><input type="text" placeholder="Ini adalah input text"><!-- Contoh penggunaan elemen dengan Descendant Selector --><nav><a href="#">Link Navigasi</a></nav><!-- Contoh penggunaan elemen dengan Pseudo-class Selector --><a href="#">Hover me</a><!-- Contoh penggunaan elemen dengan Universal Selector --><div><p>Ini adalah paragraf di dalam div.</p></div></body></html>
Hasil Output :
Mohon maaf apabila ada kesalahan sedikitpun pada Kode Program ini.
Terima Kasih 😀😊😘👌👍 :)
.png)
.png)
.png)