CSS Selector

 

    Selector digunakan pada CSS untuk mengenali sebuah element HTML yang akan diberi style. Untuk selector kita bisa menggunakan element HTML, id, class atau complex selector.

Contoh penggunaan :

    

    Diatas saya sudah mempunyai h1, ol, ul, h2  dan 2 buah paragraf. Sekarang kita coba membuat seluruh tulisan menjadi arial. Caranya kita berikan selector body lalu berikan font-family: arial; . selector body artinya satu halaman html :

    kita coba ubah warna h1 menjadi hijau, caranya kita gunakan selector h1 :

    jika kita ingin merubah h2 menjadi hijau kita bisa menggunakan selector h2 lalu tulis color: green; atau kita juga bisa menggunakan separator koma lalu tulis selectornya. koma bisa diartikan sebagai dan. contohnya :

    jika kita ingin merubah h2 menjadi miring kita gunakan selector h2 beri property font-style: italic; contohnya:

    Sekarang kita ingin merubah ol menjadi warna oren dan ul menjadi warna merah kita tidak bisa menggunakan selector ol karena itu hanya akan merubah warna ol didalamnya. dan jika kita menggunakan selector a maka akan merubah seluruh a :

    karena kita ingin membedakan warnanya maka kita harus menuliskan selector lwbih spesifik untuk membedakan keduanya yaitu dengan menggunakan selector ol li a lalu tuliskan property color: orange; . separator spasi dapat diartikan didalam, jadi selector tersebut bisa diartikan kita ingin merubah a didalam li didalam ol. contohnya :

    sekarang kita coba membuat warna kedua paragraf dengan oren dan merah, jika kita menggunakan selector p maka akan merubah warna keduanya dan p tidak didalam apapun jadi tidak mempunyai element pembeda. Caranya kita buat sendiri pembeda menggunakan class atau id, tapi penggunaan id tidak disarankan untuk CSS jadi kita gunakan claas. cara menggunakannya kita tambahkan atribut class pada element html, nama class nya bebas. lalu kita panggil pada css dengan awalan titik sebagai pembeda bahwa selector tersebut adalah class. contohnya :

Semoga bermanfaat