Belajar Koding HTML & CSS Bagian 3: Membuat Bagian - Bagian Selectors
.png)
Selector adalah pola yang digunakan untuk mencocokkan, atau memilih, elemen yang ingin Anda beri gaya. Selector juga digunakan dalam JavaScript untuk mengaktifkan pemilihan node DOM yang akan dikembalikan sebagai NodeList .
Dalam CSS (Cascading Style Sheets),
selector digunakan untuk menentukan elemen HTML mana yang akan diberikan
gaya atau style tertentu. Selector memungkinkan Anda untuk menargetkan elemen
berdasarkan nama tag, atribut, id, class, dan hubungan antar elemen. Berikut
adalah beberapa jenis selector dasar dalam CSS beserta contoh penggunaannya:
Selector Elemen (Type Selector): Selector ini menargetkan semua
elemen berdasarkan nama tag HTML-nya.
Contoh:
p {
color: blue;
}
Kode di atas akan mengubah warna
teks semua elemen <p> menjadi biru.
- Selector Class: Menargetkan elemen yang
memiliki atribut class tertentu. Penulisan selector
class diawali dengan tanda titik (.) diikuti nama class.
Contoh:
.highlight {
background-color:
yellow;
}
Untuk menerapkannya pada elemen HTML:
<p class="highlight">Teks ini memiliki latar
belakang kuning.</p>
Semua elemen dengan class highlight
akan memiliki latar belakang kuning.
- Selector ID: Menargetkan elemen berdasarkan
atribut id yang unik. Penulisan selector
ID diawali dengan tanda pagar (#) diikuti nama ID.
Contoh:
#header {
font-size: 24px;
}
Dan pada elemen HTML:
html
Salin
<div id="header">Ini adalah header</div>
Elemen dengan ID header
akan memiliki ukuran font 24 piksel.
- Selector Universal: Menargetkan semua elemen pada
halaman. Ditulis dengan tanda bintang (*).
Contoh:
* {
margin: 0;
padding: 0;
}
Kode ini akan mengatur margin dan
padding semua elemen menjadi 0.
- Selector Atribut: Menargetkan elemen berdasarkan
atribut tertentu atau nilai atribut.
Contoh:
input[type="text"] {
border: 1px solid #000;
}
Selector ini akan memberikan border
pada semua elemen <input> yang memiliki atribut type
dengan nilai text.
- Selector Kombinasi: Menargetkan elemen berdasarkan
hubungan antar elemen. Beberapa jenisnya antara lain:
- Descendant Selector: Menargetkan elemen yang
berada di dalam elemen lain.
Contoh:
div p {
color: red;
}
Semua elemen <p> yang berada di dalam elemen <div>
akan berwarna merah.
- Child Selector (>): Menargetkan elemen yang
merupakan anak langsung dari elemen lain.
Contoh:
div > p {
color: green;
}
Hanya elemen <p> yang merupakan anak langsung dari <div>
yang akan berwarna hijau.
- Adjacent Sibling Selector (+): Menargetkan elemen yang
langsung mengikuti elemen lain.
Contoh:
h1 + p {
font-style: italic;
}
Berikut adalah contoh lengkap kode
HTML dan CSS yang menerapkan berbagai jenis selector CSS yang telah dibahas
sebelumnya:
Kode HTML:
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, initial-scale=1.0">
<title>Contoh
Selector CSS</title>
<link rel="stylesheet"
href="styles.css">
</head>
<body>
<div id="header">
<h1>Selamat
Datang di Website Kami</h1>
</div>
<div class="content">
<p>Ini
adalah paragraf pertama.</p>
<p class="highlight">Ini
adalah paragraf kedua dengan class 'highlight'.</p>
<p>Ini
adalah paragraf ketiga.</p>
<a href="#">Ini
adalah tautan contoh</a>
<div>
<p>Paragraf
di dalam div.</p>
</div>
</div>
<div class="footer">
<p>Hak Cipta
© 2025</p>
</div>
</body>
</html>
Kode CSS (styles.css):
/* Selector Universal */
* {
margin: 0;
padding: 0;
box-sizing:
border-box;
}
/* Selector Elemen */
body {
font-family: Arial,
sans-serif;
line-height: 1.6;
}
p {
color: #333;
}
/* Selector ID */
#header {
background-color: #f4f4f4;
padding: 20px;
text-align: center;
}
/* Selector Class */
.highlight {
background-color:
yellow;
font-weight: bold;
}
.content {
padding: 20px;
}
/* Selector Atribut */
a[href] {
color: blue;
text-decoration:
none;
}
a[href]:hover {
text-decoration:
underline;
}
/* Selector Descendant */
.content p {
margin-bottom: 15px;
}
/* Selector Child */
.content > div > p {
color: red;
}
/* Selector Adjacent Sibling */
p + a {
display: block;
margin-top: 20px;
font-style: italic;
}
/* Selector General Sibling */
p ~ div {
background-color: #eaeaea;
padding: 10px;
}
Tampilan Hasil (Output) Selector CSS
REFERENSI
0 Response to "Belajar Koding HTML & CSS Bagian 3: Membuat Bagian - Bagian Selectors"
Post a Comment