Belajar Selector pada CSS

Belajar Selector pada CSS

Pada kesempatan ini, kita akan belajar mengenai Selector pada CSS. Apa itu Selector pada CSS? bagi kalian yang belum paham, jangan khawatir, disini akan kita pelajari bersama-sama. Buat kalian yang baru melihat artikel ini di JogjaXploit, kalian dapat membaca terlebih dahulu artikel sebelumnya mengenai Sintaks CSS.

Baca Juga - > Sintaks CSS

Kita mulai pembelajaran kita mengenai Belajar Selector pada CSS

CSS Selector digunakan untuk mencari dan memberi pada elemen HTML mana yang akan di beri style

Terdapat lima pembagian pada CSS Selector sebagai berikut

• Simple selector ( Memilih elemen berdasarkan nama, id, atau class saja )
• Kombinasi selector ( Memilih elemen berdasarkan kombibasi dari hubungan tertentu di antara mereka )
• Pseudo class selector ( Memilih elemen berdasarkan kondisi tertentu )
• Pseudo element selector ( Memilih dan memberikan style pada elemen tertentu )
• Atribut Selector ( Memilih elemen berdasarkan atribut atau nilai atributnya )

Pada kesempatan kali ini, kita akan membahas sebagian besar mengenai Simpe selector yang mana paling sering digunakan

Pemberian style atau CSS berdasarkan pada elemen HTML mana yang akan di beri style

Untuk lebih jelasnya, kalian bisa melihat contoh di bawah ini

p {
  text-align: center;
  color: red;
}

Yang mana elemen p ( paragraf ) diatas akan diberikan style. Untuk hasil nya seperti ini.

CSS Selector Id

Yang mana pemilihan dan pemberian style pada elemen HTML berdasarkan pada Id yang diberikan pada elemen tersebut.

Id pada elemen HTML unik, yang mana hanya terdapat satu Id pada elemen HTML tersebut. Untuk penulisan Id diawali dengan hash (#). Daripada bingung, kalian dapat melihat contoh di bawah ini.

#para1 {
  text-align: center;
  color: red;
}

Catatan saja : Id tidak dapat diawali dengan angka.

Hasil dari Pemberian style berdasarkan Id diatas sebagai berikut.

CSS Selector Class

Hampir sama dengan CSS Selector Id, hanya saja pemilihan dan pemberian style pada elemen HTML nya berdasarkan pemberian nama class.

Class pada elemen HTML tidak unik, yang artinya dalam satu elemen HTML boleh terdapat beberapa class. Untuk penulisan Class diawali dengan titik (.). Kita lihat saja contohnya di bawah ini

.center {
  text-align: center;
  color: red;
}

Kalian juga bisa memberikan secara spesifik mengenai elemen mana yang diberi style. Contoh nya sebagai berikut


Dalam contoh ini hanya elemen p dengan class center yang akan diberikan style

p.center {
  text-align: center;
  color: red;
}

Hasil dari penulisan diatas sebagai berikut.

Mungkin cukup sekian yang dapat kami bagikan mengenai Selector pada CSS. Materi selanjutnya saya akan meneruskan lagi pembahasan ini yang mana kalau saya teruskan disini terlalu panjang.

Sampai jumpa dan Terima kasih.