CSS Dasar Selector

📌 Pengertian CSS

Setelah kita belajar tentang Dasar Dasar HTML dan Contoh Script dalam HTML kali ini kita akan belajar mengenai CSS , apa itu sih CSS ?

CSS adalah Cascading Style Sheet biasannya digunakan untuk mengatur tampilan elemen yang tertuntu pada HTML sehingga terlihat menarik dan indah

Dengan CSS, kita dapat mengatur layout (tata letak) , warna , font , garis, background, dan lain lain. Namun pada kesempatan kali ini kita akan belajar tentang selector.

📝 Pengertian Selector CSS

CSS selector adalah salah satu rangkaian aturan dari CSS yang berfungsi untuk memilih suatu elemen yang ingin diberi style (gaya) 

Dan hari ini kita akan membahas tentang

• Type Selector dan Attribute Selector
• ID dan Class Selector
• Child dan Descendant Selector

📃 Type Selector 

Selector Type digunakan style pada dokument html berdasarkan tag atau element tertentu contohnya p {color : yellow} yang artinya elemen <p>........</p> akan memiliki teks berwarna biru. Didalam type selector dapat mendeklarasikan dengan nama elemen tersebut

Contoh :

Maka akan menghasilkan Output seperti ini :

📥 Contoh Lainnya :

📤 Output :

📃 Attribut Selector 

Attribut Selector atau Atribut selector adalah selector CSS yang digunakan untuk mencari elemen HTML menggunakan nilai atribut dari tag  html . Untuk menggunakan atribute selector perlu menuliskan di dalam tanda kurung siku seperti contoh :[href], img[width="100px"].

Contoh

untuk Membuat warna teks menjadi warna merah pada seluruh tag html yang memiliki atribut href.

Karena biasanya atribut href digunakan dalam tag <a> jadi pada umumnya di tulis menjadi seperti ini.

Jika ingin mencari seluruh tag <img> yang memiliki atribut title maka bisa menggunakan selector seperti ini.

📃 ID dan Class Selector

• ID Selector
  ID Selector digunakan untuk menyeleksi elemen berdasarkan ID tertentu. Dalam penggunaan ID selectior diawali dengan tanda pagar (#) . Contoh didalam css #intro{color:brown}, Contoh itu menyeleksi element yang memiliki attribute ID dengan value "intro" agar tulisan berwarna coklat pada HTML
  
  Contoh :
  
  
  
  📤 Output 
  
  
  
  
  
  
• Class Selector
  
  Class Selector digunakan untuk menyeleksi elemen berdasarkan nama class atau nilai (value) dari atribut class yang sama pada html element yang sebelumnya telah ditentukan. Penulisan class selector diawali dengan tanda titik (.) atau dot kemudian diikuti dengan nama class
  
  Contoh :
  
  

  
  
  

  📤 Output
  
  

  

  
  
  

📃 Child dan Descendant Selector

• Child Selector
  
  Child Selector adalah selector didalam CSS penggunaanya didasarkan struktur urutan tag HTML. Karena tag tag HTML dapat berisi tag lain maka struktur HTML dapat diibaratkan "Pohon Keluarga" dimana sebuah tag dapat disebut sebagai "Induk" dari tag lain, dan dapat di katakan "Anak " dari tag lainnya . Istillah "Anak" ini menjadi kata "Child".
  
  Contoh struktur "Pohon Keluarga" berikut
  
  
  
  
  
  

  Seperti yang terlohat seluruh tag HTML memiliki hubungan "Kekeluargaan" satu sama lain. Tag <em> merupakan "child" tag <p> dan tag <p> merupakan "Child" dari tag <div>
  
  
  Selector ini dapat mengizinkan kita untuk menyeleksi tag HTML berdasarkan aturan child panah ini. Contoh
  
  

  
  

  

  
  
  

  Tanda ">" dalam selector di atas menandakan Child selector div > h2 , berarti bagi seluruh tag <h2> yang merupakan Child atau anak dari tag <div> tag h2 inilah yang di tangkap dengan selector div > h2
  
  Contoh Lainnya : 
  
  
  

  

  
  
  

  📤 Output
  
  

  

  
  
  

  
  
• Discendant Selector
  
  Meng-Select / Pemilihan keturunan dalam pemrograman CSS merupakan pilihan yang dapat diatur khusu untuk sebuah ID atau Class yang di buat oleh webmaster dalam mendefinisikan suatu element
  
  

  

  
  
  Dibawah ini merupakan contoh penulisan discendant Selector 
  
  
  

  

  
  📤 Output