Haloo Guys! Ketemu lagi, gimana udah ga sabar buat belajar coding ngga nih? Udah pegel ya nih tangan buat nulis kode-kode? Nah, sebelumnya kan kita udah belajar CSS tuh.Bagi yang belum baca artikel mengenai konsep dasar CSS bisa dibaca-baca dulu nih Belajar Konsep Dasar CSS: Bahasa Pemrogaman Untuk Desain Website.
Nah, dalam artikel sebelumnya kan kita tahu salah satu kita udah bahas yang namanya selektor. Ternyata, selektor sendiri itu punya banyak macam jenisnya loh.
Sekilas mengenai selektor, jadi selektor itu semacam kata kunci untuk mencari element HTML. Okee, langsung saja apa aja macam-macam selektor CSS itu?
Navigasi konten
5 Macam Selektor CSS yang Wajib Diketahui Progammer
1.Selektor Tag
Jadi selektor Tag ini bekerja berdasarkan nama tag. Misal nih, kamu mau buat element <p> bewarna biru. Misal nih, kamu punya file HTML gini
<!Doctype html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="style.css">
<title> Selektor tag </title>
</head>
<body>
<div> Assalamu'alaikum </div>
<p> Halo, nama saya Chan </p>
</body>
</html>Nah, disini misal aku mau warnain tag <p> warna biru lalu aku juga pengen buat rata tengah. Nah, kita bisa melakukannya dengan menambahkan melalui CSS
p {
color: blue;
text-align: center;
}Nah, selektor tag itu yang tulisannya p. Kalau mau lihat hasilnya seperti ini.
2. Selektor Id
Selektor id menggunakan id atribut dari element Html untuk mencari element yang dipilih. Selektor id nanti ditandai dengan tanda pagar (#) yang juga bersifat unik. Artinya hanya boleh digunakan oleh 1 elemen saja.
Nah, sebelumnya dalam file Html nya kita juga harus menuliskannya atribut id nya seperti ini.
<!Doctype html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="style.css">
<title> Selektor tag </title>
</head>
<body>
<div> Assalamu'alaikum </div>
<p id="Dafunda"> Halo, nama saya Chan </p>
</body>
</html>Nah, untuk file CSS nya akan kita tuliskan begini.
#Dafunda {
color: blue;
text-align: center;
}Keliatan kan bedanya sama yang tag selector. Jika selektor tag tadi kita menuliskan langsung tagnya. Sementara, untuk selektor atribut menggunakan id. Ini berfungsi jika temen-temen hanya ingin membuat CSS pada tag tertentu. Kadangkan ada tag yang juga sama, misal kaya gini
<p> Dafunda </p>
<p> Dafunda Tekno </p>
<p> Waduh saya pusing </p>Nah, jika menggunakan selektor tag, semua kata tersebut akan berubah warna. Beda jika menggunakan selektor id, hanya 1 saja yang akan berubah. Tergantung tag mana yang akan diberikan atribut id.
3. Selektor Class
Nah, kalau selektor Class ini hampir sama dengan selektor id. Cuma dalam selektor class ini kamu bebas memanggil berapa aja class dalam satu id html. Contoh yaa aku punya file CSS kaya gini.
.container{
width: 300px;
}
.content{
text-align: center;
}Nah, itu kan ada 2 class coba kita terapin ke HTML
<!Doctype html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="style.css">
<title> Selektor tag </title>
</head>
<body>
<div> Assalamu'alaikum </div>
<p class="container content"> Halo, nama saya Chan </p>
</body>
</html>4. Selektor Grup
Nah, kalau selektor grup ini berfungsi untuk menggabungkan selektor yang ada. Jadi, dengan adanya selektor grup ini bisa meminimalkan jumlah baris kode.
p {
color: blue;
}
h1{
color: blue;
}
h2 {
color: blue;
}
Nah, melalui selektor grup bisa kita persingkat menjadi seperti ini
p, h1, h2 {
color: blue;
}5. Selektor Universal
Selektor universal ini berfungsi untuk menyeleksi semua elemen. Selektor universal ini ditandai dengan tanda (*). Contohnya
* {
color: blue;
}Artinya, nanti semua text akan berganti menjadi warna biru.
Nah, itu 5 Selektor CSS yang wajib progammer ketahui. See you! Next Time kita bakal belajar tentang CSS lebih lanjut.
