Belajar Selector Basic CSS

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:

  1. <!doctype html>

  2. <html lang="en">

  3. <head>

  4.    <title>Judul Dokumen</title>

  5.    <style>

  6.       /* Semua elemen span */

  7.        span {

  8.            color: red;

  9.        }

  10.    </style>

  11. </head>

  12. <body>

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

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

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

  16. </body>

  17. </html>


Jika berkas tersebut dibuka pada browser, maka teks yang berada pada setiap elemen <span> 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:

  1. <!doctype html>

  2. <html lang="en">

  3. <head>

  4.    <title>Judul Dokumen</title>

  5.    <style>

  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.    </style>

  19. </head>

  20. <body>

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

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

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

  24. <p>Paragraf yang menampilkan teks dengan warna standar tanpa menerapkan styling</p>

  25. </body>

  26. </html>


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</h1>

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


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</h1>

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


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:

  1. <!doctype html>

  2. <html lang="en">kita

  3. <head>

  4.    <title>Judul Dokumen</title>

  5.    <style>

  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.    </style>

  15. </head>

  16. <body>

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

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

  19. </body>

  20. </html>


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 <div> dan <span>. 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:

  1. <!doctype html>

  2. <html lang="en">

  3. <head>

  4.    <title>Judul Dokumen</title>

  5.    <style>

  6.       #special {

  7.           background-color: skyblue;

  8.       }

  9.    </style>

  10. </head>

  11. <body>

  12. <div id="special">

  13.    <p>Ini merupakan konten di dalam sebuah div yang diberi id special.</p>

  14. </div>

  15. <div>

  16.    <p>Ini merupakan konten di dalam sebuah div biasa.</p>

  17. </div>

  18. </body>

  19. </html>


Jika kode di atas dibuka pada browser, maka tampilan akan tampak seperti ini:
20191206173013c3a85e60693d4be94aa802b084b0933b.png
Yang harus kita perhatikan kembali adalah id ini bersifat unik. Jika kita ingin menerapkan sebuah rule pada banyak elemen, sebaiknya gunakan atribut class, bukan dengan id.

  1. <!doctype html>

  2. <html lang="en">

  3. <head>

  4.    <title>Judul Dokumen</title>

  5.    <style>

  6.       #special {

  7.           background-color: skyblue;

  8.       }

  9.    </style>

  10. </head>

  11. <body>

  12. <div id="special">

  13.    <p>Ini merupakan konten di dalam sebuah div yang diberi id special.</p>

  14. </div>

  15. <div id="special"> <!-- ini merupakan contoh yang salah dalam penerapan id -->

  16.    <p>Ini merupakan konten di dalam sebuah div biasa.</p>

  17. </div>

  18. </body>

  19. </html>



Attribute Selector

Attribute selector merupakan cara menetapkan target elemen berdasarkan sebuah atribut yang digunakan atau bahkan bisa lebih spesifik dengan nilainya. Contohnya sebagai berikut:

  1. <!doctype html>

  2. <html lang="en">

  3. <head>

  4.    <title>Judul Dokumen</title>

  5.    <style>

  6.  

  7.        /* <a> element yang menerapkan href attribut */

  8.        a[href] {

  9.            color: blue;

  10.        }

  11.  

  12.        /* <a> element yang menerapkan nilai pada href dengan awalan "#" */

  13.        a[href^="#"] {

  14.            background-color: gold;

  15.        }

  16.  

  17.        /* <a> element yang menerapkan nilai pada href yang mengandung teks "example" */

  18.        a[href*="example"] {

  19.            background-color: silver;

  20.        }

  21.  

  22.        /* <a> element yang menerapkan nilai pada href yang mengandung teks "insensitive" tidak mementingkan huruf kapital*/

  23.        a[href*="insensitive" i] {

  24.            color: cyan;

  25.        }

  26.  

  27.        /* <a> element yang menerapkan nilai pada href dengan akhiran ".org" */

  28.        a[href$=".org"] {

  29.            color: red;

  30.        }

  31.    </style>

  32. </head>

  33. <body>

  34. <ul>

  35.    <ul>

  36.        <li><a href="#internal">Internal link</a></li>

  37.        <li><a href="http://example.com">Example link</a></li>

  38.        <li><a href="#InSensitive">Insensitive internal link</a></li>

  39.        <li><a href="http://example.org">Example org link</a></li>

  40.    </ul>

  41. </ul>

  42. </body>

  43. </html>


Jika kode di atas dibuka pada browser, maka tampilan akan tampak seperti ini:
20191206173231a7d36f42e72da21e177440fb8da9c53b.png
Dari kode di atas terlihat banyak sekali kondisi yang dapat diterapkan pada atribut selector. Agar dapat lebih mudah memahaminya, mari kita rangkum dalam sebuah tabel.

Syntax
Description
[attr]
Menargetkan elemen yang menerapkan atribut attr.
[attr=value]
Menargetkan elemen yang menerapkan atribut attr dengan nilai value.
[attr~=value]
Menargetkan elemen yang menerapkan atribut attr dengan salah satu nilainya adalah value.
[attr^=value]
Menargetkan elemen yang menerapkan atribut attr yang nilainya diawali dengan nilai value.
[attr$=value]
Menargetkan elemen yang menerapkan atribut attr yang nilainya diakhiri dengan value.
[attr*=value]
Menargetkan elemen yang menerapkan atribut attr yang nilainya mengadung value

Komentar

Posting Komentar