Media Pengembangan Web & App | by APPKEY

Desain Design Web Apa Itu CSS Selector? Mengenal 20 CSS Selector yang...

Apa Itu CSS Selector? Mengenal 20 CSS Selector yang Wajib Anda Kuasai

-

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

css-selector-2

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.

Artikel Terkait  Yang Perlu Diketahui Tentang Daftar Periksa Pengujian Desain Web Responsif

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:

Artikel Terkait  Mengapa Jest Adalah Salah Satu Framework JavaScript Teratas

#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.

Artikel Terkait  Open Source dalam Pengembangan Software & Kelebihan Open Source
Artikel Terkait  Mengenal Lebih dalam Mengenai Algoritma

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:

Artikel Terkait  Yuk Belajar CodeIgniter | Tutorial Mudah Terlengkap untuk Pemula
Artikel Terkait  Rekomendasi Template Web Gratis untuk Mempercantik Tampilan Web Anda

 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 agar tidak ketinggalan banyak artikel menarik dan informatif seputar dunia IT. Sampai jumpa lagi di artikel menarik lainnya!


Jasa Pembuatan Aplikasi, Website dan Internet Marketing | PT APPKEY
PT APPKEY adalah perusahaan IT yang khusus membuat aplikasi Android, iOS dan mengembangkan sistem website. Kami juga memiliki pengetahuan dan wawasan dalam menjalankan pemasaran online sehingga diharapkan dapat membantu menyelesaikan permasalahan Anda.

Jasa Pembuatan Aplikasi

Jasa Pembuatan Website

Jasa Pembuatan Paket Aplikasi

Jasa Pembuatan Internet Marketing

Subscribe Sekarang

Dapatkan beragam informasi menarik tentang Website, Aplikasi, Desain, Video dan API langsung melalui email Anda. Subscribe sekarang dan terus belajar bersama kami!

Kategori

Blog Post Ranking 10

Rekomendasi 10 Aplikasi Pembuat Animasi 3D Terbaik. Ayo Cek!

Apakah Anda bercita-cita untuk menjadi seorang animator profesional? Belajar membuat animasi kini sudah menjadi hal mudah yang bisa dilakukan...

Pengertian Internet & Dampak Positif dan Negatif Internet

Internet mungkin bukan sesuatu yang asing lagi, sebab semua kalangan pasti tahu apa itu internet. Hanya saja jika ditanya...

Proses Komunikasi: Encoding dan Decoding

Jika kita dapat melihat percakapan antar komputer, mungkin akan terlihat seperti ini: "010110111011101011010010110". Bahasa ini disebut dengan biner, encoding...

Cara Mudah Menambahkan Lokasi Alamat Bisnis Anda di Google Maps

Saat ingin hunting tempat makan atau tempat nongkrong terbaru, tak jarang beberapa dari Anda biasanya mendapatkan informasi terkini melalui...

Metadata Adalah? Fungsi dan Jenis-Jenis Metadata

Pernah mendengar istilah metadata? Mungkin, kita sering mendengar istilah metadata. Tetapi, banyak dari kita yang belum tahu arti dari metadata...

Jasa Pembuatan Website Untuk Toko Online

Perusahaan yang menyediakan Jasa pembuatan website untuk toko online bisa kita temukan dengan mudah di internet. Masing-masing dari perusahaan...

8 Contoh Search Engine Terbaik yang Paling Banyak Digunakan di Indonesia

Dulu jika ingin mencari informasi tentang apapun biasanya kita akan menanyakan kepada seseorang yang lebih mengetahui informasi, atau datang...

Membuat Aplikasi di Playstore dengan Mudah

Membuat aplikasi di Playstore bisa Anda lakukan dengan mudah. Terdapat beberapa situs yang bisa membantu Anda untuk membuat aplikasi...

Looping Adalah Algoritma Perulangan: Berikut Contohnya

Jika anda sudah mendalami atau sedang mendalami dunia pemrograman terdapat sebuah konsep yang dapat memudahkan anda dalam menyusun struktur...

Domain Google? Apa Bedanya Dengan Domain Biasa?

Saat memutuskan untuk membuat website menjadi salah satu bentuk media digital marketing Anda dalam bersaing di zaman digital ini,...

Bisnis

Online Service

Peluang Bisnis

Model Bisnis

Entrepreneurship

Uang

Ketrampilan

Outsourcing

Monetize

Pemasaran

SEO

Internet Marketing

Dasar Pemasaran

Strategi Pemasaran

Situs Web Analitik

Iklan

Teknologi

Teknologi Terbaru

AI

Komputer

Jaringan

Paling Sering dibaca
Mungkin Anda Menyukainya