Mengenal Macam Macam Selector Pada Kode CSS

Zona Internetku No Comment May 28, 2019

Selector pada CSS memiliki fungsi untuk menyeleksi atau memilih tag pada kode HTML yang akan dimanipulasi untuk mengubah tampilan element pada hasil akhir.
Selector memiliki berbagai macam atau jenis yang dapat kalian gunakan dalam memanipulasi element html, contohnya saja kalian ingin memanipulasi element html tag <span> ataupun tag yang memiliki class="submenu" dan masih banyak lagi. Dan berikut ini beberapa selector pada kode CSS yang bisa kalian terapkan.

1. Universal Selector
Universal Selector berfungsi untuk menyeleksi semua tag yang ada pada file html tersebut, untuk menggunakan universal selector kalian harus menggunakan tanda "*" sebagai selector.

* {color: red; margin: 0;}

Setelah menerapakan kode di atas maka hasilnya akan memberikan efek mengubah semua warna teks menjadi merah dan mengubah batas margin menjadi 0

2. Element Selector
Element Selector memiliki fungsi untuk memilih seluruh tag tertentu pada element html yang akan dimanipulasi

h1 {font-style: italic}
span {font-size: 17px; clear: both}

dari kode di atas maka semua tag <h1> akan menghasilkan teks bercetak miring dan semua tag <span> menghasilkan ukuran teks sebesar 17 piksel beserta memberikan efek membuat baris baru pada setiap tag <span>

3. Attribute Selector
Setelah ini berguna untuk memilih seluruh tag yang memiliki attribute yang telah ditentukan. untuk menggunakan selector ini kalian harus menggunakan tanda kurung siku [selector] seperti berikut

[href] {font-size: 15px}
[type="submit"] {width: 50px}

atribut [href] akan menyeleksi seluruh tag yang memiliki atribut href tersebut dan apapun nilainya, biasanya terdapat pada tag <a>
[type="submit"] akan menyeleksi seluruh tag yang memiliki atribut type dengan nilai submit saja, biasanya terdapat pada tombol submit pada pengsisian form

4. Attribute ID Selector
Selector ini hanya akan memilih tag yang memiliki attribute ID dengan nilai yang sudah di tentukan, penggunaan nilai pada attribute ID ini tidak boleh sama dan harus unik. Dan untuk menggunakan selector ini kalian harus menggunakan tanda "#" sebagai selector dan memilih nilai pada atribut id yang ingin kalian manipulasi

#title {font-size: 20px}
#sub_title{font-size: 17px}

5. Attribute Class Selector
Sama seperti Attribute ID, yaitu selector ini hanya akan memilih attribute Class dengan nilai yang sesuai. namun penggunaan nilai attribute Class ini kita diperbolehkan untuk menggunakannya berkali kali atau memberikan nilai yang sama pada atribut class yang lainnya. Untuk menggunakan selector ini kalian harus gunakan tanda "." dan nilai yang kalian pilih untuk memanipulasi element html

.title {font-size: 20px}
.sub_title{font-size: 17px}

Untuk memahami lebih lanjut mengenai atribut Class dan ID kalian bisa membaca selengkapnya disini yaitu artikel Mengenal Attribute Class Dan ID Pada Tag HTML

Baca juga :
Memahami Fungsi Selector, Property Dan Value Pada CSS
Mengatur Elemen Dengan CSS Position Property
Memahami Fungsi Margin, Padding Dan Border Di CSS

Demikian pembahasan singkat mengenai Mengenal Macam Macam Selector Pada Kode CSS yang bisa saya tunjukkan kepada kalian semua.

Promo Menarik