Selektor CSS dan HTML
Ada banyak cara untuk memilih elemen HTML mana yang ingin dihias. Pelajari tentang selektor CSS
Ada banyak cara kita bisa menargetkan, elemen HTML mana yang ingin dihias. Berikut macam-macam selektor.
Selektor tag HTML
Kita bisa memilih elemen HTML dengan nama tagnya langsung.
Hiasan akan diaplikasikan langsung untuk semua tag HTMLnya.
Contoh
p {
color: blue;
}
Berarti semua tag p yang ada di halaman, akan menjadi warna biru
Selektor dengan atribut id HTML
Memilih elemen mana yang dihias, bisa juga dengan atribut id pada tag HTMLnya.
Cara: masukkan nama id yang diawali dengan tanda pagar di antara tag style.
contoh
<!DOCTYPE html>
<html>
<head>
<style>
#heading {
background-color: lightblue;
color: white;
}
</style>
</head>
<body>
<h1 id="heading"> Heading utama </h1>
<h1> Heading lainnya </h1>
</body>
</html>
Heading utama
Heading lainnya
Hasilnya: hanya `h1` yang punya id `heading` yang terhias.
Selektor dengan atribut class HTML
Selain atribut id, menargetkan HTML bisa juga dengan atribut class pada tag HTMLnya.
Cara: masukkan nama class yang diawali dengan tanda titik (.) di antara tag style.
contoh
<!DOCTYPE html>
<html>
<head>
<style>
.styled-box {
background-color: orange;
color: white;
}
</style>
</head>
<body>
<p> box 1</p>
<p class='styled-box'> box 2</p>
<p> box 3</p>
<p class='styled-box'> box 4</p>
</body>
</html>
box 1
box 2
box 3
box 4
Hasilnya: hanya `p` yang punya class `styled-box` yang terhias
