Cara Penggunaan Selector CSS Yang Wajib Kamu Ketahui

Penggunaan Selector CSS

dalam tutorial sebelumnya saya sudah menyinggung sedikit tentang penggunaan selector, misalnya kita bisa membuat style pada tag p yang memiliki class “para” . Tag p selain class “para” tidak ikut ikut berubah tampilan nya.

Nah dalam css kita bisa menggabungkan selector untuk mencari tag yang ingin di ubah tampilan nya. satu tag html bisa dijadikan untuk lebih dari satu selector.

contoh saya memiliki tag h2, h3 dan tag p, saya ingin tag h2 tulisannya italic (miring) warnanya merah. tag h3 tulisannya default warnanya merah. tag p tulisannya italic warnanya default.

contoh penulisan selectornya seperti dibawah ini

h2, h3 {
color: red;
}

kode style css ini akan membuat tag h2 dan h3 menjadi merah. oke selesai satu masalah.

tadi saya katakan saya ingin tag h2 tulisannya italic. tag p juga italic, karena dua-duanya italic kita gabungkan kedua tag ini menjadi group.

h2, p {
font-style: italic;
}

dengan begitu tag h2 akan berwarna merah dan tulisannya miring, sedangkan tag p tulisannya italic warnanya default.

Dibawah ini saya akan memberikan contoh html yang sudah dilengkapi dengan code selector css. Dan saya akan menjelaskan semua fungsi dari selector-selectornya.

Cara Penggunaan Secector CSS

Dalam jenis-jenis selector yang pernah saya bahas terdapat 6 jenis selector, Universal Selector, Tag Selector, Class Selector , ID Selector, Attribute Selector dan Group Selector.

dalam tutorial ini saya akan menjelaskan lebih dalam tentang cara menggunakan dari ke 6 (enam) selector ini.

Contoh Penggunaan Selector CSS

<!DOCTYPE html>
<html>
<head>
<title>CSS Selector</title>

<style>
h2, h3 {
color: red;
}
p strong {
color:blue;
}
h2.title , .paragraf {
font-style: italic;
}
#isi, p#belajar, h3.subjudul {
background-color: lightblue;
}
</style>
</head>
<body>
<h2 class="title">Judul Artikel</h2>
<p> CSS <strong>adalah</strong> sebuah <em>Kode</em> untuk merubah tampilan</p>

<p id="isi" class="paragraf" > Saya suka belajar Css di
<a href="https://phpdanmysql.com" target="_blank">Phpdanmysql.com</a></p>

<p id="belajar" class="paragraf">
Belajar CSS itu ternyata asik</p>
<h3 class="subjudul">Sub Judul</h3>
</body>
</html>

Penjelasan Penggunaan Selector :
h2 , h3 {
color: red;
}
Ini adalah selector group, saya gabungkan h1 dan h3 karena Property nya sama yaitu properti color.
properti color ini akan membuat warna teks h2, dan h3, dalam contoh ini warnanya menjadi merah.

p strong {
color:blue;
}
Selector Ini berfungsi untuk mencari tag strong dalam elemen p, jika ada akan dibuat warnanya menjadi biru.

h2.title, .paragraf {
font-style: italic;
}
Selector ini berfungsi untuk mencari tag h2 yang memiliki class title dan class paragraf, jika ada akan diubah font nya menjadi italic atau miring.

tadi diatas ada selector h2, sekarang saya pakai lagi tag h2 ini… nah inilah contohnya bahwa satu elemen html bisa menjadi lebih dari satu selector.

#isi, p#belajar, h3.subjudul {
background-color: lightblue;
}
Selector ini berfungsi mencari tag yang memiliki id isi, kemudian id belajar didalam tag p, dan class subjudul di tag h3. Dan merubah warna background nya menjadi lightblue.

dari contoh penggunaan selector ini dapat dilihat bahwa penggunaan selector group itu lebih mudah diatur.

kita bisa membuat satu tag html memiliki id dan juga class, satu tag html bisa kita buat style css nya lebih dari satu style.

Lanjut ke Bab selanjutnya Mengenal Kode-Kode Warna Dalam CSS

Get real time updates directly on you device, subscribe now.

loading...

Ingin Berkomentar?

×
Lewat ke baris perkakas