CSS Attribute Selector : Mengenal 20 CSS Selector yang Wajib Anda Kuasai

Last Updated on March 17, 2022 by

Dunia coding CSS akan sangat akrab dengan yang namanya CSS attribute selector atau selector. Apa itu CSS attribute selector? CSS attribute selector artinya rule set pada CSS. Ada pula yang berpendapat CSS attribute selector artinya set aturan untuk memilih elemen pada coding yang Anda ingin berikan gaya khusus (style CSS).

Ada banyak sekali macam-macam selector CSS dan fungsinya. Jika ditotal, ada sekitar 20 macam-macam selector CSS dan fungsinya. Jumlah CSS attribute selector ini bisa jadi akan terus bertambah dari waktu ke waktu jika terdapat update pada bahasa pemrograman CSS, atau programmer berhasil menemukan set rule selector baru.

Kira-kira apa saja jenis-jenis dan cara menulis CSS selector tersebut, ya? Daripada penasaran, yuk kita langsung saja simak pembahasannya berikut ini. Selamat membaca!

20 Tipe CSS Attribute Selector dan Cara Menulis CSS Selector

Anda telah memahami apa itu CSS attribute selector. Selector artinya rule set untuk memilih bagian dari coding untuk diberikan style. Di bawah ini sudah terdapat 20 tipe CSS selector beserta cara menulis CSS selector yang benar pada coding. Yuk dicatat!

1. X

Tipe CSS attribute selector pertama adalah X untuk menargetkan sebuah elemen tertentu secara spesifik. Anda tidak perlu repot memakai selector manual “class” atau “id”, cukup gunakan fungsi ul {…} untuk target daftar unordered, atau fungsi a {…} saat menargetkan elemen link.

Contoh:

a { color: yellow; }
ul { margin-right: 0; }

2. *

CSS attribute selector (*) alias symbol bintang digunakan untuk memilih/fokus ke semua elemen di halaman web. Namun selector (*) banyak keliru digunakan untuk memberi nilai 0 pada padding dan margin di setiap class dan id – sayangnya ini akan membuat file CSS semakin berat ketika diloading di browser.

Jadi, kami tidak menyarankan Anda untuk menggunakan selector * seperti:

* {
margin: 0;
padding: 0;
}

Lebih baik gunakan * untuk memberi nilai (yang bukan 0) pada id dan class. Selector * juga bisa digunakan dengan child selectors seperti:

#container * {
border: 2px solid black;
}

3 .X

Tipe .X adalah selector untuk class. Class adalah style CSS untuk beberapa elemen sekaligus. Berbeda dengan id yang hanya bisa styling pada 1 objek saja. Jadi dengan selector .X, Anda bisa mengubah sejumlah objek di HTML dengan setting yang sama. Tanda “.” di bagian awal kode menunjukkan bahwa selector tersebut digunakan untuk class. Contoh:

.error {
color: blue;
}

4. X:visited dan X:link

Selector :visited digunakan untuk mengaplikasikan styling pada tag anchor page web yang telah diklik. Sementara :link untuk styling semua link yang belum diklik. Contoh:

a:link { color: blue; }
a:visted { color: purple; }</strong

5. X Y

Selector X Y adalah descendant selector yang dapat digunakan untuk memilih elemen yang lebih spesifik, semisal semua tag anchor web. Dengan fungsi ini, Anda bisa cukup memilih 1 selector dalam

selector utama saja. Contoh penulisan:

li a {
text-decoration: none;
}

6. #X

Tanda “#” menandakan bahwa styling terjadi pada id. Selector styling id ini bersifat kaku dan tidak bisa dipakai pada elemen lain. Selector dan styling #X dapat digunakan untuk menetapkan besar width dan margin. Contoh:

#container {
width: 960px;
margin: auto;
}

7. X + Y

Selector X+Y digunakan untuk memilih elemen-elemen yang posisinya berdekatan. Selector ini dapat memilih unsur kedua sesegera setelah unsur pertama dipilih oleh user. Contoh:

ul + p {
color: yellow;
}

8. X[href=”foo”]

Selector X[href=”foo”] dipakai untuk memberikan style warna khusus ke semua tag anchor pada link yang Anda input dalam “foo”. Di luar link tersebut, tag anchor lain tidak akan berubah. Contoh:

a[href="http://namawebanda.com"] {
color: #808080; /* web grey */
}

9. X[title]

Sesuai namanya, selector X[title] dipakai untuk memilih tag-tag anchor dengan atribut “title” saja untuk distyle khusus. Contoh:

a[title] {
color: blue;
}

10. X > Y

Selector X > Y digunakan untuk menargetkan cabang selector secara langsung. Contoh penulisan adalah:

div#container > ul {
border: 2px solid black;
}

Jadi, selector #container > ul hanya akan fokus menargetkan ul sebagai cabang dari div. Di luar aturan itu, selector tidak akan melakukan styling.

11. X[href*=”contoh”]

Berikutnya, selector X[href*=”contoh”] digunakan untuk memberikan styling warna pada tulisan apapun yang Anda cantumkan dalam tanda petik “…”. Jadi, Anda bebas mengganti bagian “tulisan” dengan teks apa saja, semisal nama web Anda sendiri.

Tanda * menunjukkan bahwa sebuah nilai harus muncul di sebuah tempat dalam nilai atribut. Sehingga, setiap link dengan tulisan dalam tanda petik “contoh” akan berubah sesuai dengan warna yang diprogram. Contoh:

a[href*="appkey"] {
color: ; #808080/* contoh grey */
}

Setelah Anda menjalankan code di atas, maka tulisan ‘appkey’ pada nama web seperti appkey.co.id atau appkey.id akan berubah warnanya menjadi abu-abu.

12. X ~ Y

Cara kerja selector X ~ Y mirip dengan X + Y, hanya saja kerjanya lebih umum. Aturan X~Y akan fokus otomatis memilih semua elemen Y setelah X. Contoh coding:

ul ~ p {
color: blue;
}

13. X[href$=”.jpg”]

Simbol “$” merujuk pada selection di bagian akhir string. Kode X[href$=”.jpg”] juga biasanya digunakan untuk melakukan styling pada koding gambar. Untuk itu, tag anchor difokuskan pada semua url yang berakhiran dengan *.jpg. Namun sampai saat ini, CSS attribute selector tersebut masih belum bisa bekerja untuk format *.png dan *.gif. Contoh:

a[href$=".jpg"] {
color: green;
}

14. X[href^=”http”]

Kemudian, kode X[href^=”http”] dipakai untuk menampilkan icon kecil di sebelah link eksternal webnya. Kode ini juga dapat digunakan dalam ekspresi regular untuk merujuk awal string sekaligus memilih semua tag anchor href yang dimulai dengan HTTP. Contoh:

a[href^="http"] {
background: url(path/to/external/icon.png) no-repeat;
padding-left: 8px;
}
 15. X:only-of-type

Selector X:only-of-type digunakan untuk mengelompokkan elemen-elemen tunggal dalam coding untuk kemudian di-styling. Contoh:

li:only-of-type {
font-weight: italic;
}

Anda bisa memadukan kode ini dengan X > Y agar semua elemen tunggal yang dipilih dalam halaman web dapat otomatis ter-styling menjadi sama (dalam contoh ini adalah “italic”). Contoh:

ul > li:only-of-type {
font-weight: italic;
}

16. X:first-child

Aturan ini akan membantu Anda menargetkan elemen child pertama dari parent pada struktur coding. Selector ini juga dapat digunakan untuk menghapus batas dari list item pertama (border-top) dan terakhir (border-bottom) coding. Contoh:

ul li:first-child {
border-top: none;
}

17. X:checked

Selector X:checked menargetkan styling pada elemen-elemen interface pada web, semisal check box atau radio button. Contoh penggunaannya sangat sederhana:

 input[type=radio]:checked {
border: 3px solid black;
}

18. X:not(selector)

Tipe selector selanjutnya adalah X:not(selector) untuk meng-exclude atau mengecualikan salah satu elemen saat styling. Semisal Anda ingin memilih dan menstyling semua elemen div, kecuali elemen div container. Maka selector ini dapat digunakan. Contoh pemakaiannya adalah:

div:not(#container) {
color: green;
}

Ketika dijalankan, maka seluruh elemen div container tidak akan diberikan warna ‘hijau’ sesuai yang diprogram.

19. Universal Selector

Universal selector adalah fungsi untuk memilih semua elemen tag di sebuah halaman HTML web. Nantinya, setiap set tag akan mewakili elemen pada setiap halaman. Biasanya, universal selector digunakan untuk memilih color (warna), line-height (tinggi garis batas), dan ukuran font dan melakukan styling pada ketiga elemen tersebut secara otomatis di halaman web. Contoh coding:

* {
color: blue;
font-size: 28px;
line-heigh: 30px;
}

20. Grouping Selector

Terakhir, ada grouping selector untuk memilih semua elemen HTML yang mempunyai style CSS sama. Contoh penggunaan grouping selector semisal pada elemen-elemen heading (h1, h2, p, dan seterusnya). Sebagai catatan, untuk memilih dengan group selector ini, Anda bisa memisahkan setiap selector dengan tanda koma agar tidak membingungkan.

Contoh coding:

<!DOCTYPE html>
<html>
<head>
<style>
h1, h2, p {
text-align: left;
color: blue;
}
</style>
</head>
<body>

<h1> Selamat Datang!</h1>
<h2>Contoh heading</h2>
<p>Teks paragraph.</p>

</body>
</html>

Ketika coding di atas dijalankan di browser, maka ketiga kalimat ‘selamat datang’, ‘contoh heading’, dan ‘teks paragraph’ akan terformat ke dalam bentuk yang sama yakni berada di margin kiri dengan warna biru. Selamat mencoba!

Demikianlah pembahasan artikel edisi kali ini tentang macam-macam selector CSS dan fungsinya. Terima kasih sudah mengikuti artikel sampai di sini.

Jangan lupa untuk selalu stay tune di Appkey.id agar tidak ketinggalan banyak artikel menarik dan informatif seputar dunia IT. Sampai jumpa lagi di artikel menarik lainnya!