9 Langkah Menguasai CSS Selector

9 Langkah Menguasai CSS Selector

Selector merupakan salah satu komponen terpenting dalam kode CSS. Dengan menggunakan selector, kita bisa menentukan elemen HTML mana yang akan kita beri style. Selector–selector…

Selector merupakan salah satu komponen terpenting dalam kode CSS. Dengan menggunakan selector, kita bisa menentukan elemen HTML mana yang akan kita beri style. Selectorselector yang umum digunakan adalah selector tag, id, class, dan turunan. Tidak sedikit pula yang berpikir menggunakan selector-selector tersebut saja sudah cukup dalam pembuatan CSS untuk website. Hal tersebut tentunya kurang efisien, mengingat banyaknya selector yang bisa kita gunakan untuk membuat style dengan cara yang lebih mudah dan dinamis.

Pada tulisan pertama ini akan saya bahas 10 selector dasar yang sebaiknya dikenali terlebih dahulu. Untuk membantu dalam proses belajar, sediakan dokumen HTML sederhana yang memiliki konten seperti kode berikut.

              <ul>
                     <li title="First Category">Kategori 1</li>
                     <li class="has-sub"><span>Kategori 2</span>
                           <ul id="uniqueCategory">
                                  <li>Subkategori 1</li>
                                  <li>Subkategori 2</li>
                           </ul>
                     </li>
                     <li title="Other Category">Kategori 3</li>
                     <li class="has-sub">Kategori 4
                           <ul>
                                  <li>Subkategori 1</li>
                                  <li>Subkategori 2</li>
                           </ul>
                     </li>
              </ul>

Siapkan pula file CSS yang akan kita isi dengan kode-kode di bawah. Jangan lupa untuk mengintegrasikan CSS tersebut dengan dokumen HTML yang telah disediakan sebelumnya.

1. *

Selector asterisk digunakan untuk memilih semua elemen HTML tanpa terkecuali. Selector ini sering digunakan oleh beberapa developer untuk membuat padding dan margin semua elemen kembali menjadi nol pada saat melakukan reset CSS. Selector ini juga dapat digunakan pada selector turunan untuk memilih semua elemen turunan dari sebuah elemen.

Penggunaan selector asterisk ini sebaiknya diminimalisir karena memberikan beban kerja yang lebih berat kepada browser. Berikut ini adalah implementasi selector asterisk pada CSS.

*{
      color: blue;
}

Kode di atas akan memberikan hasil berupa semua elemen memiliki teks berwarna biru seperti yang tampak pada gambar berikut,

1

Implementasi selector asterisk

2. X

Selector tersebut akan memilih semua elemen dengan tipe tag yang sesuai dengan selector pada satu halaman. Berikut ini adalah contoh implementasi kode CSS yang menggunakan tag selector.

span{
            background-color: blue;
            color: white;
}

Kode di atas akan memberikan hasil semua elemen dengan tag span akan memiliki latar belakang berwarna biru dengan teks berwarna putih seperti yang tampak pada gambar berikut,

2

Implementasi selector tag

3. #X

Selector yang diawali dengan tanda hash akan memilih elemen berdasarkan idnya. Selector ini merupakan salah satu selector yang paling banyak digunakan. Meskipun demikian, karakter id yang sangat kaku dan tidak memperbolehkan adanya elemen dengan id yang sama pada satu halaman menjadi kelemahan selector ini karena praktis hanya satu elemen yang bisa dipilih tiap halamannya. Sebisa mungkin hindari pemakaian selector jenis ini yang terlalu sering karena style dengan selector id memiliki prioritas tertinggi, sehingga susah untuk dioverwrite dengan style lain saat dibutuhkan. Berikut ini contoh implementasinya.

#uniqueCategory{
            background-color: lightblue;
}

Kode di atas akan memberikan hasil elemen dengan id bernama “uniqueCategory” akan memiliki latar belakang berwarna biru muda seperti yang tampak pada gambar berikut,

3

Implementasi selector id

4. .X

Selector yang diawali dengan tanda titik akan memilih elemen berdasarkan classnya. Selector ini merupakan selector yang paling sering digunakan. Karena pada satu halaman HTML class boleh digunakan pada beberapa elemen berbeda, bahkan tipe tag yang berbeda, maka penggunaan selector class lebih dinamis daripada selector id namun lebih spesifik daripada selector tag. Berikut ini contoh penggunaannya.

.has-sub{
           background-color: lightblue;
}

Kode di atas akan memberikan hasil semua elemen yang memiliki class dengan nama “has-sub” akan memiliki latar belakang berwarna biru muda seperti yang tampak pada gambar berikut,

4

Implementasi selector class

5. X Y

Selector tersebut adalah selector turunan. Selector turunan digunakan untuk memilih elemen dengan lebih spesifik, terbatas pada elemen tertentu yang terletak dalam elemen sebelumnya. Berikut ini contoh kode CSS implementasi turunan selector.

.has-sub li{
         text-decoration: underline;
         color: blue;
}

Kode di atas akan memberikan hasil semua elemen bertipe li yang berada dalam elemen dengan class “has-sub” akan memiliki teks berwarna biru dan bergarisbawah seperti yang tampak pada gambar berikut,

5

Implementasi selector turunan

6. X > Y

Selector tersebut juga merupakan selector turunan. Perbedaan selector ini dengan selector turunan sebelumnya adalah selector ini hanya memilih elemen yang merupakan turunan langsung dari elemen tersebut, alih-alih semua elemen turunan yang sesuai. Berikut ini contoh implementasi turunan langsung pada selector.

.has-sub > li{
         text-decoration: underline;
         color: blue;
}

Kode di atas akan memberikan hasil semua elemen bertipe li yang berada tepat di dalam elemen dengan class “has-sub” akan memiliki teks berwarna biru dan bergarisbawah. Namun, karena tidak ada elemen yang sesuai, maka hasilnya akan seperti gambar berikut,

6

Implementasi selector turunan langsung

7. X + Y

Selector tersebut adalah selector saudara. Selector saudara akan memilih elemen yang berada tepat setelah elemen sebelumnya. Berikut ini contoh implementasi selector dengan menggunakan tanda plus.

.has-sub + li{
         background-color: lightblue;
}

Kode di atas akan memberikan hasil semua elemen bertipe li yang berada tepat setelah elemen dengan class “has-sub” akan memiliki latar belakang berwarna biru muda seperti yang tampak pada gambar berikut,

7

Implementasi selector saudara

8. X[]

Selector tersebut adalah selector atribut. Selector atribut akan memilih elemen yang memiliki atribut yang sesuai. Semua elemen yang memiliki atribut sesuai akan terpilih tanpa mempedulikan isi atributnya. Untuk memilih atribut tertentu akan saya bahas di tulisan berikutnya. Berikut ini adalah contoh penggunaan selector dengan atribut pada kode CSS.

li[title]{
        background-color: lightblue;
}

Kode di atas akan memberikan hasil semua elemen bertipe li yang memiliki atribut title akan memiliki latar belakang berwarna biru muda seperti yang tampak pada gambar berikut,

8

Implementasi selector dengan atribut

9. X:

Selector tersebut adalah selector untuk pseudo-class. Pseudo-class adalah kondisi-kondisi khusus pada suatu elemen yang bisa kita akses menggunakan CSS. Salah satu pseudo-class yang paling sering digunakan adalah :hover. Pembahasan lebih detail tentang pseudo-class akan saya tulis di artikel berikutnya. Berikut ini adalah contoh implementasi pseudo-class pada selector.

li:hover{
       background-color: lightblue;
       cursor: pointer;
       font-weight: bold;
}

Kode di atas akan memberikan hasil semua elemen bertipe li yang ditunjuk oleh kursor mouse akan memiliki latar belakang berwarna biru muda seperti yang tampak pada gambar berikut,

9

Implementasi selector hover

9b

Implementasi selector hover saat kursor digeser

10. X::

Penggunaan sepasang tanda titik dua digunakan untuk mendefinisikan pseudo-element. Pseudo-element adalah elemen yang tidak didefinisikan pada HTML namun bisa diakses melalui CSS. Jenis-jenis pseudo-element yang ada adalah ::before, ::after, ::first-line, ::first-letter. Dua pseudo-element pertama berfungsi untuk menghasilkan konten pada elemen, sedangkan dua pseudo-element berikutnya berfungsi untuk memberi style pada baris dan karakter pertama pada teks.

Berikut ini adalah contoh penggunaan selector untuk menghasilkan pseudo-element ::before pada CSS.

li::before{
        content: "Pseudo! ";
        color: red;
}

Kode di atas akan memberikan hasil semua elemen bertipe li akan diawali dengan teks tambahan berwarna merah seperti yang tampak pada gambar berikut,

10

Implementasi selector pseudo-element before

Berikut ini adalah contoh penggunaan selector untuk menghasilkan pseudo-element ::after pada CSS.

li::after{
        content: "Pseudo! ";
        color: red;
}

Kode di atas akan memberikan hasil semua elemen bertipe li akan diakhiri dengan teks tambahan berwarna merah seperti yang tampak pada gambar berikut,

10b

Implementasi selector pseudo-element after

Untuk mencoba implementasi 2 selector selanjutnya, tambahkan kode berikut pada dokumen HTML yang dibuat sebelumnya.

<p>
      Bisa Komputer merupakan website yang berisi tutorial, review, tip dan trik, rekomendasi, dan serba-serbi seputar dunia komputer baik dari segi software, hardware, maupun yang lainnya. Tak hanya mengulas soal komputer, Bisa Komputer juga berbagi artikel mengenai teknologi, online media, rekomendasi aplikasi dan website, serta banyak lagi yang lainnya.
</p>

Kode tersebut akan menambahkan bagian yang kurang lebih seperti berikut pada browser saat dijalankan.

10x

Tampilan awal paragraf

Kode berikut adalah implementasi shortcode ::first-line pada CSS.

p::first-line{
         background-color: lightblue;
         font-style: italic;
}

Kode di atas akan memberikan hasil baris pertama pada tiap paragraf akan memiliki latar belakang berwarna biru muda seperti yang tampak pada gambar berikut,

10c

Implementasi selector first-line pada paragraf

Kode berikut adalah implementasi shortcode ::first-letter pada CSS.

p::first-letter{
          float: left;
          font-size: 300%;
          font-style: italic;
}

Kode di atas akan memberikan hasil karakter pertama pada tiap paragraf akan memiliki tampilan layaknya dropcap seperti yang tampak pada gambar berikut,

10d

Implementasi selector first-letter pada paragraf

Penutup

Itulah beberapa dasar selector yang bisa digunakan untuk membuat style CSS yang baik. Masih ada banyak selector yang akan saya bahas pada tulisan-tulisan berikutnya. Semoga bermanfaat, have a nice day! :)

Tag: , , , , ,

5 Comments

Leave Comment
  1. SENDYYeah says:

    ihirrr…. mantep nih isinya.. bookmark ah…

  2. tips rambut says:

    wah.. ga cukup sekali bacanya klo newbie kaya saya ini bang… mesti bookmark dulu ni.. barang kali ada video youtube nya bang yang bisa di DL..??

  3. fadly says:

    uiiihhh saya menemukan apa yg saya cari!
    semangat buat postingan kaya gini..
    nanti bakal sering mampir..

    bookmark dulu.
    thanks!

Write Comment

Your email will not be published. The marked label is required.