Ngaku Progammer? 5 Macam Selektor CSS Ini Wajib Kamu Ketahui!


Selektor Css Min

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?

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.

ARTIKEL TERKAIT
5 Bahasa Pemrogaman Terpopuler Untuk Membuat Aplikasi Mobile
Selektor Tag

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.

ARTIKEL TERKAIT
Bikin Websitemu Makin Berwarna, Ini Dia 5 Macam Metode Pewarnaan CSS

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.

ARTIKEL TERKAIT
Buat Apa Sih CSS? Ini Dia 3 Penerapan Pewarnaan CSS

Nah, itu 5 Selektor CSS yang wajib progammer ketahui. See you! Next Time kita bakal belajar tentang CSS lebih lanjut.


Suka? Ayo Bagikan konten ini Ke teman agar makin Seru!

0 Komentar

Bagaimana perasaan kamu setelah membaca konten ini?

Ngakak Ngakak
0
Ngakak
Bingung Bingung
0
Bingung
Takjub Takjub
0
Takjub
Suka Suka
0
Suka
Marah
0
Marah
Sedih
0
Sedih
channabeck

Editor in Chief di Dafunda Tekno. Mahasiswa yang sedang tertatih mengembangkan bisnis startup.

Mau Berbagi Apa Hari ini?
Artikel
Konten Original dari Kamu atau Berita Seputar Geek dan Pop-culture
Daftar / List
Daftar atau List Klasik yang Sering kamu temukan di dunia maya
Peringkat
List Peringkat yang Bisa di Upvote atau Downvote oleh Komunitas untuk menentukan Urutan Terbaik