Rabu, 22 September 2021

Jenis-Jenis Selector Pada CSS

Mengetahui jenis-jenis selector pada CSS itu sangat penting, dan ini akan menjadi landasan dasar untuk menggunakan CSS. CSS memiliki beberapa cara untuk memilih (selector) pada dokument HTML yang ingin di beri style. Pada tutorial ini saya akan menjelaskan selector yang paling sering digunakan untuk memilih element HTML.


Jenis-Jenis Selector Pada CSS

1. Tag Selector

Tag selector menggunakan tag HTML sebagai selectornya, misalnya apabila ingin memilih tag HTML paragraf (<p>) pada HTML, maka pada CSS selectornya cukup ditulis dengan p. Dan begitu juga dengan tag HTML lainnya. Untuk lebih jelasnya silakan lihat kode dibawah ini :

https://www.serbakomputer.com/jenis-jenis-selector-pada-css/

Pada kode CSS diatas terdapat dua tag selector CSS yaitu pada baris nomor 2 terdapat tag selector h1, dan baris nomor 6 terdapat tag selector p. pada selector h1 berarti akan membuat seluruh tag HTML h1 hurufnya akan berubah menjadi warna hitam dan awalan hurufnya huruf besar. Selanjutnya pada selector p akan membuat seluruh tag HTML paragraf akan mempunyai warna background biru dan warna tulisan warna putih.

2. ID Selector

ID selector menggunakan atribut “id” pada element HTML sebagai selectornya. Apabila kita lihat penggunaan tag selector, maka tag yang dipilih semua tag dalam file HTML tersebut akan ikut berubah. Misalnya kita memilih tag “h2” sebagai selector kemudian diberi warna merah, maka semua tag “h2” yang terdapat pada file HTML tersebut akan memiliki warna merah semua. Tentunya dengan cara tag selector tersebut kita tidak bisa merubah warna “h2” dengan warna merah kemudian tag “h2” selanjutnya berwarna hujau. Maka untuk membuat seperti itu kita memerlukan “id” selector, untuk contoh penggunaannya sebagai berikut :

https://www.serbakomputer.com/jenis-jenis-selector-pada-css/

Pada contoh kode diatas ID selector terdapat pada baris nomor 5 dan 8, untuk mengawali ID selector diawali dengan tanda pagar (#). Selanjutnya perhatikan pada baris nomor 14 dan 15 terdapat dua buah tag h1 dengan atribut “id” dengan nilai title dan title2. Nilai atribut ID itulah yang digunakan sebagai ID selector pada CSS. Namun yang perlu kamu ingat ID selector ini mempunyai aturan, nilai atau value pada ID tidak boleh sama dalam satu file HTML (nilai dari value atribut ID harus unik).

3. Class Selector

Class selector cara menggunakannya hampir sama dengan ID selector, namun pada class selector tentunya menggunakan atribut class pada element HTML yang akan dipilih. Perbedaan class selector dan ID selector yaitu untuk class selector bisa digunakan pada beberapa tag sekaligus, atau 1 nama (value) dari atribut class bisa digunakan berkali-kali. Ini berbeda dengan ID selector yang menurut aturan hanya boleh menggunakan 1 nama pada setiap value dari atribut ID. Maka kelebihannya dari class selector adalah kita tinggal menggunakan nama class yang sama apabila ingin menggunakan style yang sama.

https://www.serbakomputer.com/jenis-jenis-selector-pada-css/

Pada contoh kode diatas class selector terdapat pada baris nomor 8, dan untuk mengawali class selector ditulis dengan tanda titik (.). Kemudian perhatikan pada baris nomor 16 sampai 18 terdapat 3 buah tag “h2” yang memiliki atribut class yang berisi sub_title, atribut itulah yang digunakan class selector pada CSS.

4. 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:

https://www.serbakomputer.com/jenis-jenis-selector-pada-css/
Kode CSS diatas bermaksud untuk membuat seluruh tag HTML berwarna hijau, dan background berwarna hitam.

5. Attribute Selector

Attribute selector sedikit lebih advanced dibandingkan dengan selector-selector sebelumnya. Atribut Selector ini digunakan untuk mencari seluruh tag yang memiliki atribut yang dituliskan.

Contoh penggunaan Attribute Selector kode CSS adalah sebagai berikut:
https://www.serbakomputer.com/jenis-jenis-selector-pada-css/
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. Walaupun memiliki kemampuan mencari tag yang sangat spesifik, namun atribut selector ini tidak terlalu sering digunakan.

Itulah mengenai jenis-jenis selector pada CSS, kelima selector tersebut sudah cukup untuk mengawali untuk belajar CSS dasar. Silahkan bagikan atau share artikel ini jika dirasa ada yang membutuhkan.

  • Share Post:
related posts
about author

Seseorang yang suka belajar sesuatu yang baru, terutama tentang pemrograman web. Senang berbagi tentang pengetahuan dan belajar dari yang lain.

recent posts
categories
trending posts
SERBA KOMPUTER © 2017 - 2019, ALL RIGHTS RESERVED.