Selector Basic

Pada modul sebelumnya kita sudah mengetahui apa itu selector, dan menggunakannya. Yang kita gunakan tersebut merupakan selector basic. Sebenarnya terdapat beberapa macam dari selector basic, yakni:

  • Type Selector
  • Class Selector
  • ID Selector
  • Attribute Selector
  • Universal Selector
Mari kita bahas satu persatu tipe selector basic yang ada.

Type Selector

Type Selector menggunakan nama elemen sebagai target untuk diterapkannya rule. Dengan kata lain, ketika menggunakan selector ini tentu rule akan diterapkan pada seluruh elemen target yang ada pada dokumen HTML. Contohnya sebagai berikut:



  2. <html lang="en">


  4.    Judul Dokumen

  5.    

  6.       /* Semua elemen span */

  7.        span {

  8.            color: red;

  9.        }

  10.    



  13. Ini merupakan sebuah teks yang berada pada elemen span. Seharusnya elemen ini ditampilkan dengan warna teks merah.

  14. Ini merupakan sebuah teks yang berada pada elemen paragraf, teks ini tidak seharusnya tidak akan terpengaruh oleh rule.

  15. Ini merupakan sebuah teks yang berada pada elemen span lainnya. Seharusnya elemen ini ditampilkan dengan warna teks merah juga.




Jika berkas tersebut dibuka pada browser, maka teks yang berada pada setiap elemen  akan berwarna merah.
20191206170939aff2a79a99303c49ea6cab24a6586da4.png

Class Selector

Class selector menetapkan target elemen berdasarkan nilai dari atribut class yang diterapkan pada elemennya. Untuk penulisan selector, awali dengan tanda titik (.) kemudian lanjutkan dengan nama class-nya. Contoh:



  2. <html lang="en">


  4.    Judul Dokumen

  5.    

  6.        .red {

  7.            color: red;

  8.        }

  9.  

  10.        .skyblue-bg {

  11.            background-color: skyblue;

  12.        }

  13.  

  14.        .fancy {

  15.            font-weight: bold;

  16.            text-shadow: 4px 4px 3px #77f;

  17.        }

  18.    



  21. <p class="red">Paragraf dengan teks berwarna merah

  22. <p class="skyblue-bg">Paragraf dengan background berwarna biru langit

  23. <p class="fancy">Paragraf dengan gaya fancy

  24. Paragraf yang menampilkan teks dengan warna standar tanpa menerapkan styling




Jika berkas tersebut dibuka pada browser, maka akan nampak seperti ini:
2019120617104826d24e63ad227436e5931769ede38d06.png
Class bersifat shareable, sehingga dapat diterapkan pada banyak elemen dengan tipe elemen yang berbeda-beda. Misalkan sebuah class red dapat diterapkan pada elemen paragraf dan juga heading untuk menampilkan teks berwarna merah.


  1. <h1 class="red">Heading dengan teks berwarna merah

  2. <p class="red">Paragraf dengan teks berwarna merah


Tidak hanya itu, sebuah elemen juga mungkin memiliki banyak nilai class, sehingga kita dapat menerapkan lebih dari satu rule atau gabungan rule pada elemen target. Untuk menggunakannya, pada atribut class kita cukup tuliskan nama kelasnya dan pisahkan tiap nilai kelasnya dengan spasi.


  1. <h1 class="red skyblue-bg">Heading dengan teks berwarna merah dan background biru langit

  2. <p class="red fancy">Paragraf dengan teks berwarna merah dan bergaya fancy


Kita juga bisa menargetkan elemen secara spesifik yang memiliki sebuah class. Bagaimana jika kita ingin menerapkan gaya yang berbeda ketika menggunakan kelas bergaya keren alias fancy pada sebuah paragraf? untuk melakukannya, pada selector kita tuliskan nama elemen target diikuti dengan titik (.) kemudian nama kelasnya. Perhatikan contoh berikut:



  2. <html lang="en">kita


  4.    Judul Dokumen

  5.    

  6.        .fancy {

  7.            font-weight: bold;

  8.            text-shadow: 4px 4px 3px #77f;

  9.        }

  10.  

  11.        p.fancy {

  12.            text-shadow: 4px 4px 3px #00c8eb;

  13.        }

  14.    



  17. <h1 class="fancy">Heading dengan teks bergaya fancy

  18. <p class="fancy">Paragraf dengan teks bergaya fancy




Jika berkas tersebut dibuka pada browser, maka gaya fancy yang diterapkan pada elemen heading dan elemen paragraf akan berbeda.
20191206171308ab690ae4e57f8f9267d7d7b9ba27b0ab.png

ID Selector

ID selector menetapkan target elemen berdasarkan nilai dari atribut id yang diterapkan pada elemennya. Sama seperti class, atribut id dapat diterapkan pada seluruh elemen HTML, dan kebanyakan atribut ini digunakan untuk memberikan sebuah arti pada generic element seperti 

 dan . Namun atribut id ini tidak bersifat shareable, yang artinya nilai id ini harus unik dan digunakan pada satu elemen saja.
Untuk menetapkan selector dengan menggunakan id, kita gunakan tanda octothorpe (#) atau lebih familiar disebut dengan hash. Berikut contohnya:



  2. <html lang="en">


  4.    Judul Dokumen

  5.    

  6.       #special {

  7.           background-color: skyblue;

  8.       }

  9.    



  12. <div id="special">

  13.    
    Ini merupakan konten di dalam sebuah div yang diberi id special.



  •    

    Ini merupakan konten di dalam sebuah div biasa.