CSS Selector: 12 Contoh CSS Selector Beserta Fungsinya

Saat ini, ada berbagai CSS selector yang dapat membantu kita untuk menulis kode CSS dengan mudah. Setiap selector memiliki fungsi dan penulisannya masing-masing. Lalu, apa saja contoh CSS selector yang sering digunakan?

Contoh CSS Selector yang Sering Dipakai

Pengertian CSS selector adalah penghubung antara script CSS dengan HTML. Selain contoh di atas, masih ada banyak selector yang bisa kita gunakan dalam mengoding CSS. Apa saja itu? Cus disimak…

1.*

* {
margin: 0;
padding: 10px;
}

Bintang ini juga bisa disebut dengan “all”. Jika kita menggunakan * sebagai selector, maka styling yang ada didalamnya akan berdampak pada semua DOM / elemen HTML yang ada. Menggunakan * sebagai selector memang memudahkan, tapi hal ini akan berdampak buruk pada halaman di browser nantinya. Dampaknya ialah webpage akan menjadi lebih berat ketika dimuat.

Untuk mengantisipasinya, gunakan selector * di saat setelah ada selector yang lain (child selector). Jadi tidak akan berefek pada yang tidak dibutuhkan. Contoh script-nya :

<style>
.container 
{
 margin: 0;
}
</style>
<div class="container">Halo dunia</div>

CSS selector yang satu ini sudah pernah kita coba sebelumnya. Selector ini namanya class. Jadi, styling-nya bisa diterapkan hanya pada elemen HTML dengan atribut class saja, tentunya value atributnya sama dengan nama selectornya.

2. #X

<style>
 #mySelector { color: #454545; }
</style>
<div id='mySelector'>Halo dunia</div>

Kalau yang ini namanya selector ID, yang berart hanya akan berdampak pada elemen HTML dengan atribut id saja. Bedanya dengan selector class, selector ID hanya bisa satu buah elemen saja. Jika di selector class kita bisa menerapkan ke semua elemen dengan class yang sama, namun yang ID tidak. Makanya gunakan selector ID hanya pada elemen tertentu saja, yang jumlahnya tidak lebih dari satu.

3. X

<style>
h1 { font-weight: bold; }
</style>
<h1>Halo dunia</h1>

Hampir sama nih seperti selector *. Selector ini bakalan ngefek ke semua elemen yang ada. Tetapi bedanya ini hanya berlaku pada elemen tertentu saja. Jika kita menggunakan selector “li” berarti akan berlaku pada semua elemen <li>, jika kita memakai “p” berarti akan berefek pada semua elemen <p>.

4. X Y

<style>
ul li
{
list-style: none;
}
</style>
<ul>
<li>Home</li>
<li>About</li>
</ul>

Sekarang kita masuk ke tahap yang lebih rumit nih. Sebelumnya kita belajar mengenai selector yang independen saja. Nah, bagaimana jika selectornya berada di dalam selector? Biasanya kasus ini terjadi saat menggunakan elemen <ul>. Di dalam <ul> kan pasti ada <li>. Nah, bagaimana cara kita nge-stylingnya? Ya pakai method ini lah 😀

Mungkin kita bisa menggunakan selector class untuk kasus ini. Tapi percaya deh, menggunakan class selector saat situasi seperti ini adalah cara yang salah. Misal nih, saya punya 2 menu yang memiliki beberapa styling yang sama, tapi ada juga yang berbeda. Misalnya, menu pertama background-nya ijo, dan menu kedua bg-nya merah. Di saat ini lah kita menggunakan selector ini.

5. X > Y

Fungsi dan penggunaannya hampir sama dengan sebelumnya. Yang membedakan ialah siapa saja yang berdampak. Contoh :

<ul>
  <li>Home</li>
  <li>Menu</li>
  <ul>
    <li>subMenu</li>
  </ul>
</ul>

Jika kita menggunakan selector sebelumnya, semua <li> akan berefek, termasuk pada subMenu. Tentunya styling Home (juga Menu) dan subMenu ini berbeda. Maka dari itu, kita gunakan selector ke-6 ini untuk mengatasinya.

<style>
ul > li { background: red; }
</style>

Kalau begini, yang akan berefek hanya pada li pertama saja, yakni Home dan Menu, subMenu-nya gak ikut. Dan jika ingin nge-styling li yang subMenu menggunakan selector ini, bisa lihat contoh berikut

<style>
ul > li > ul > li { color: red; }
</style>

6. X ~ Y

<style>
#button ~ #area { color: red; }
</style>
<button id=’btn’>myBtn</button>
<div id=’area’>Halo dunia</div>

Masih berhubungan dengan sebelumnya, “selector yang berteman”. Bedanya selector ini dengan 2 sebelumnya ialah selector ini digunakan pada 2 elemen yang sama sekali tidak berhubungan secara parent/child. Biasanya ini dipakai saat menggunakan selector :hover, :focus, dan sebagainya yang akan kita bahas pada poin berikutnya.

7. X[attribute]

Balik lagi mengingat class dan ID. Saat menggunakan class, CSS selector akan mengidentifikasi elemen HTML yang mempunyai atribut class, begitu juga dengan ID. Nah, bagaimana jika kita mempunyai elemen tetapi atribut-nya bukanlah class maupun ID? Kita bisa memakai selector yang satu ini.

<style>
div[myAttribute] { color: red; }
</style>
<div myAttribute>Halo dunia</div>

Penggunaan CSS selector ini juga bisa lebih spesifik lagi dengan ditambahkan value-nya. Contoh:

<style>
input[type=text] { color: #454545; }
</style>
<input type=’text’>

Selain itu selector ini juga bisa dikombinasikan dengan seletor lainnya, class misalnya :

<style>
.container[myAttribute=value] { background: red; }
</style>
<div class=’container’ myAttribute=”value”>Halo dunia</div>

8. X:hover

Kalau CSS selector yang sekarang ini kita lagi bahas, membuat webpage kita menjadi lebih interaktif. Yang pertama ada hover. Hover ini maksudnya, style css pada elemen akan berubah ketika pointer berada di atas elemen HTML. Contoh:

<style>
#area { color: red; }
#area:hover { color: green; }
</style>
<div id=’area’>Halo dunia</div>

Sekarang coba arahkan mouse/pointer tepat di atas tulisan “Halo dunia”. Tulisan yang awalnya berwarna merah akan berubah menjadi warna hijau.

9. X:focus

<style>
#myInput:focus { border: 1px solid red; }
</style>
<input type=’text’ id=’myInput’>

Maksud dari focus ialah, style akan diterapkan jika elemen HTML diperhatikan sama web browser. Gini penjelasannya. Coba bikin input text biasa deh, terus klik input text itu, nanti akan muncul garis berkedip. Nah, saat seperti itulah yang namanya focus. Kalau di elemen lain biasanya akan muncul outline berwarna biru jika menggunakan browser chrome.

10. X:checked

<style>
input[type=radio]:checked { display: none; }
</style>
<input type=’radio’>

Kalau selector yang satu ini hanya berlaku pada elemen input radio dan checkbox saja, yang mana hanya kedua elemen ini-lah yang memiliki atribut checked. Styling akan berdampak ketika input radio atau checkbox memiliki atribut checked, yang berarti akan berefek setelah kita mengklik/mencentang-nya.

11. X:nth-child(n)

Dalam sebuah kasus, kita mempunyai banyak elemen HTML dengan selector yang sama. Akan tetapi, kita ingin memberikannya styling khusus kepada salah satu dari mereka. Di sinilah nth-child berperan.

<style>
.myDiv { background: red; }
.myDiv:nth-child(3) { background: blue; }
</style>
<div class=’myDiv’>Halo dunia</div>
<div class=’myDiv’>Halo dunia</div>
<div class=’myDiv’>Halo dunia</div>
<div class=’myDiv’>Halo dunia</div>

Apabila kita coba script ini, maka akan muncul tulisan “Halo dunia” berbackground merah. Sedangkan tulisan yang ke-3 warnanya biru sendiri. Ini gara-gara nth-child().

Terus, bagaimana kalau saya ingin memberi style khusus tapi tidak hanya di urutan ke-3 saja? Bisa berlaku pada urutan ke-6, ke-9, ke-12, … dst.

Kita gunakan “n” untuk memberi tahu bahwa ini berlaku untuk kelipatan.

<style>
.myDiv:nth-child(3n) { background: blue; }
</style>

Selain itu, kita juga bisa memberlakukan sistem ganjil genap loh. Coba tuliskan script ini dan jalankan di browser untuk melihat hasilnya.

<style>
.myDiv { color: #fff; }
.myDiv:nth-child(odd) { background: red; }
.myDiv:nth-child(even) { background: blue; }
</style>

Nah, itulah beberapa CSS selector yang sering digunakan. Dengan bantuan CSS selector, Anda dapat membuat kode CSS Anda menjadi lebih rapi dan terstruktur.

Alexandromeo Lawrence

I’m an experienced SEO Specialist who can grow a website through organic channel. I’m also passionate about digital marketing and web development