Selector Dasar CSS

Mengenal jenis-jenis selector dasar CSS

css memiliki jenis jenis selector yang beragam,sesuai kebutuhan kita untuk mendisain sebuah web.kali ini saya akan membahas 5 jenis selector dalam css,selector didalam css tidak hanya ada lima ,namun dalam kebanyakan kasus sudah mencukupi untuk membuat sebuah halaman web HTML+CSS.
selector adalah sebuah pola yang digunakan untuk mencari suatu tag di Html.

css memiliki banya selector,saya akan membahas tentang beberapa selector saja

---

Universal Selector

Universal selector hanya ada 1 di dalam CSS, yaitu tanda bintang “*”. Selector ini bertujuan untuk ‘mencari’ semua tag yang ada.

Contoh Universal Selector CSS:

* {    color: pink;    background-color: yellow;}  }

kode cssdi atas bermaksud untuk seluruh tag html berwana pink,dan backgroundnya berwarna kuning

---

Element type selector


Elemen type selector atau tag selector adalah istilh untuk selector yang nilainya merupakan tag HTML itu sendiri ,setip tag HTML bisa digunakan sebaigai selector,dan seluruhnya tag tersebut akan ditangkap oleh selector ini
 contoh:

h1 {

   text-decoration: underline;

   }

p {

  font-size:14px;

  }

 contoh kode css diatas ,yang text nya berukuran h1 dia akan bergaris bawah,dan seluruh tag akan berukuran 14pexel.

---

class selector
class selector adalah salah satu selector yang paling umum dan sering digunkan.

Untuk penggunaan Class Selector, kita harus memiliki tag HTML yang mempunyai atribut class.

<p class=”paragraf_pertama”> Ini adalah sebuah paragraf pertama</p>

<h1 class=”judul”>Judul Artikel</h1>

<h2 class=”judul penting berwarna”>Sub Judul Artikel<h2>

Perhatikan bahwa untuk semua tag diatas, kita menambahkan atribut class dengan nilainya adalah nama dari kelas itu sendiri. Sebuah nama class dapat dimiliki oleh lebih dari 1 tag, dan dalam sebuah tag dapat memiliki lebih dari 1 class.
Contohnya dalam baris terakhir pada contoh diatas,tag h2 memiliki atribut class=”judul penting berwarna”. Tag ini teridiri dari 3 class, yaitu judul, penting, dan class berwarna.



ffhff sedangkan css class selector  sebagai berikut:

.paragraf_pertama {

                  color: red;

                  }

.judul {

       font-size:20px;

       }

.penting {        color:red;        font-size: 1em;        } sebelum kita menggunakan class selector,kita harus menggunakan tanda titik dulu sebelum nama dari class

---

id selector

ID Selector bersama-sama dengan class selector merupakan selector paling umum dan juga sering dipakai (walau tidak sesering class selector). Penggunaan ID selector hampir sama dengan class selector, dengan perbedaan jika pada Class Selector kita menggunakan atribut class untuk tag HTML, untuk ID selector, kita menggunakan atribut id.
 contoh atribut ID pada html

<p id=”paragraf_pembuka”> Ini adalah sebuah paragraf pembuka</p>

<h1 id=”judul_utama”>Judul Artikel</h1>

<h2 id=”sub_judul”>Sub Judul Artikel<h2>

Atribut id selain untuk selector CSS, juga berperan sebagai kode unik untuk masing-masing tag (terutama dipakai untuk kode JavaScript). Karena hal tersebut, id yang digunakan harus unik dan tidak boleh sama. Dengan kata lain, id hanya bisa digunakan satu kali dalam sebuah halaman web dan tidak boleh sama.

#paragraf_ pembuka {

                   color: red;

                   }

#judul utama {

             font-size:20px

             }

kenapa saya  menggunakan tanda'#',dikarenaka kita hanya mencari hanaya tag yang dituju saja

---

Attribute Selector

Contoh penggunaan Attribute Selector kode CSS adalah sebagai berikut:

[href] {

       font-size:20px ;

       }

[type="submit"] {

                width:30px;

                }

Seperti yang dapat dilihat dari contoh diatas, setiap atribut selector harus berada diantara tanda kurung siku “[” dan “]”.
[href] akan cocok dengan seluruh tag yang memiliki atribut href, apapun nilai dari href (href biasanya terdapat pada tag <a>). Untuk contoh [type=”submit”] akan cocok dengan tag yang memiliki atribut type dengan nilai submit, yang dalam hal ini adalah tombol submit dalam form.