Selektor CSS

Bersama Bang Kumbang - CSS Selector dalam bahasa CSS atau Cassading Style Sheet ada banyak sekali, namun selektor css saat ini akan saya bahas baru selektor dasar yang sering dipakai dalam koding css
sebagai pemanaasan bagi anda sekalian. Selektor sendiri di fungsikan sebagai sintaks yang menhubungkan sintaks yang berada pada html dengan pemformatan tampilan. Singkatnya, koding gaya tampilan, hehehe.
Selektor css standar yang paling sering kita jumpai pada website adalah universal selector, type selector, id selector, dan class selector. Berikut akan kita bahas satu persatu.....

Sebelum kita membahas tentang selektor selektor tersebut, mula mula siapkan dokumen HTML sederhana berikut.

<div id="selektor-id">
     <div id="selektor-id-left">
          <h1>Selektor CSS</h1>
     </div>
     <div id="seletor-id-right">
          <p class="selektor-class">Type Selektor 1 </p>
          <p class="selektor-class">Type Selektor 2 </p>
     </div>
</div>

Tanpa ada koding css maka tampilannay adalah sebagai berikut.

1. Universal Selector

Universal Selektor atau selektor universal adalah salah satu selektor css yang sikapnya menyeluruh dan berkerja secara umum. Katakan saja, denga selektor css ini seluruh jenis elemen HTML yang menjadi target CSS akan ikut terkena efek dari selektor css ini. Tapi, selektor ini tidak akan berfungsi jika ada selektor ata kode CSS khusus terhadap jenis elemen HTML tertentu. Selektor Universal ini dilambangkan dengan tanda   *   tentu ditambahkan dengan properti css dan nilainya. 
Dan pada umumnya pemakaian selektor css ini ada pada properti padding dan margin. Kedau properti ini sendiri nialinay di reset ata bernilai 0 gunanya agar padding dan margin bawaan browser di reset. Tapi, pada koding ini saya akan menggunakan properti color, kenapa?Aga perubahannya lebih terliah jelas.
Berikut contoh pemakainaannya.

* {color : red }

Lihat hasilnya tanpa uiniversal selktor dan dengan universal selektor

 Dapt kita lihat dengan jelas sluruh tampilan di beri warna merah sesuai format properti css pada universal selector.

Type Selector

Berbeda dengan selktor css sebelumnya yang melakukan format terhadap keseluruhan isi dokumen html, nah selekttor css kali ini hanya memformat berdasarkan tag tertentu saja, selektor ini bernama type selktor atau selektor tipe. Tag yang terkena format selektor ini akan di kenali dan dibaca  browser kemudian ditampilkan sesuai dengan isi propertidan value css nya. Dengan selektor css ini pengaturan style css pada tag html akan lebih kompleks.
Cara pemakaiannya adalah dengan menampilan tag koding secara lengkap. Contoh untuk format tag h1 maka pemakaiaanya adalah  h1 { properti : value }  Nah tidak usah berlama lama langsung saja ke contoh pemakaiaannya.

h1 {
color : blue
text-transform : uppercase;
}

Dengan selektor css diatas, maka tampilan yang kita dapatkan adalah berikut.

Bisa anda lihat sendiri efek dari selektor ini.

ID Selector

Selanjutnya adalah ID Selector atau selektor id. Penggunaan Selektor CSS ini bersifat unik, artinya hanya ada satu pemakaian saja. Pemakaiaan selektor ini selalua diawali dengan tanda  #  dan dibarengi dengan nama selektor yang kita gunakan di tag HTML. 
Untuk pemakaiaannya pada tag html dapat kiat lihat pada koding awal tadi tepatnya pada, 

<div id="selektor-id">
--------
</div>

Kode  id="selektor-id" merupakan tanda dari pemakaian selektor id, dan  selektor-id   merupakan nama dari selktor id. 
Maka pemakaiannya pada koding css adalah...

#selektor-id {
background : black;
padding : 10px ;
}

Dengan kode css pada selektor css tersebut kta dapatkan hasil ..

Class Selector

Sedikit berbeda dengan selektor id yang biasanya penggunaannya bersifat unik, maka selektor class biasanya dipakai secara berulang pada elemen html. Pemakaian selektor ini diawali dengan tanda  .  dan diikuti
nama selektor classnya. Contoh pada koding html diaatas kita temukan  class="selektor-class"  maka pemakaiaannya pada css yaitu.

.selektor-class {
color : red;
txt-decoration : underline;
}

Dari koding selektor css diatas dapat kita temukan hasiil sebagai berikut

Itu masih sebagian selektor css yang saya bahas nantikan kelanjutannya seger untuk selektor css lainnya. Dan juga pemformatan setipa selektor css pada artike lini tida saya pdu padannkan menjadi satu tetapi saya koding satu persatu. kenapa  agar lebih memberikan pemahaman per selektornya. 
Demikian tentang selektor css , jika kira kira anda belum faham betul tentang selektor css silahkan  komen dibawah. :D
Sekian dan terima kasihh...