HTML & CSS untuk Pemula (Bagian 26): Cara Mengakses dengan Selektor (1)

Selektor menentukan cara-cara di mana gaya CSS ditetapkan ke elemen-elemen HTML. Dalam definisi yang sesuai, pertama-tama disebutkan nama elemen yang akan diakses oleh selector. Deklarasi sebenarnya kemudian dilakukan di dalam kurung kurawal. Dalam suatu deklarasi, satu atau lebih properti dapat ditentukan. Jadi, sintaks umumnya terlihat seperti ini:

Selektor {
   Properti1: Nilai;
   Properti2: Nilai;
   Properti3: Nilai;
}

Definisi yang sesuai telah kalian temui dalam tutorial sebelumnya.

h1 {
   font-family:"Courier New", Courier, monospace;
   font-size: 200%;
}

Pastikan untuk mengakhiri setiap deklarasi dengan titik koma.

Melihat Selektor Yang Tersedia

Sebenarnya, CSS memiliki sejumlah besar selektor yang menarik, yang akan saya perkenalkan kepada kalian yang paling penting. Karena jelas: Hanya dengan menguasai penggunaan selektor, kita bisa secara masuk akal menentukan properti CSS.

Cara termudah untuk memberikan gaya pada dokumen HTML adalah dengan menggunakan selektor elemen.

Dengan sintaks berikut, semua elemen p diberikan warna hitam.

p { 
   color: #009966; 
}

Jika Anda ingin memberikan gaya yang sama kepada beberapa elemen, itu juga mungkin.

Dalam kasus ini, Anda cukup mencatat elemen-elemen yang bersangkutan secara berurutan, dipisahkan oleh koma.

p, h1,  li { 
   color: #000; 
}

Anda juga dapat memberikan beberapa gaya kepada elemen-elemen. Gaya akan dicatat berurutan oleh titik koma.

p { 
   color: #000; 
   background-color: red;
}

Sebuah kombinasi dari variasi yang disebutkan di atas juga mungkin.

p, h1,  li { 
   color: #009966; 
   background-color: red;
}

Hasilnya bisa terlihat seperti ini:

Area dengan Beberapa Elemen

Seringkali diperlukan untuk memformat sebuah area yang terdiri dari beberapa elemen HTML. Untuk kasus-kasus seperti itu, dalam HTML terdapat dua elemen khusus, yaitu span dan div. Elemen-elemen ini akan sering Anda temui, termasuk dalam seri ini.

Sebagai contoh:

<div class="artikel">
  <h1>Ledakan Warna</h1>
  <p class="thema">Sebuah tutorial untuk membuat ledakan warna dari <span class="autor">MarkusMelzer</span>.</p>
</div>

Perbedaan utama antara div dan span adalah bahwa elemen div memaksa baris baru dalam aliran teks. Sedangkan span tidak membuat baris baru. Dalam contoh yang ditunjukkan, area div didefinisikan, di mana terdapat sebuah judul dan sebuah paragraf. Di dalam paragraf, terdapat sebuah area span.

Selektor ID dan Kelas

Sampai saat ini, selektor elemen telah digunakan. Melalui contoh berikut, semua judul h1 diformat oleh selektor tersebut.

h1 { 
   color: #000; 
   background-color: red;
}

Namun tentu saja tidak selalu diinginkan dalam bentuk seperti ini. Misalnya, bagaimana jika Anda hanya ingin memberikan properti tertentu kepada satu atau beberapa, tetapi tidak semua judul h1? Untuk kasus-kasus tersebut, CSS menyediakan dua pilihan, yaitu selektor kelas dan ID.

Dengan selektor kelas, elemen HTML dengan atribut kelas dapat dipilih secara spesifik. Di dalam elemen HTML yang bersangkutan, atribut class harus disebutkan. Definisi kelas dimulai dengan titik.

Sebagai contoh:

.merah { 
   color: merah; 
}

Kelas merah telah didefinisikan di sini. Untuk menambahkan properti yang ditentukan dalam kelas merah ke elemen HTML, berikan class diikuti dengan nama kelas.

<p class="merah">PSD-Tutorials.de</p>

Selektor ID juga dapat digunakan dengan cara yang sama mudah. Selektor ID diidentifikasi oleh pagar ganda.

#topnavi { 
   color: biru; 
};

Pada contoh ini, ID topnavi didefinisikan. Namun, Perhatian: Sebuah ID sebenarnya hanya boleh ditetapkan satu kali dalam sebuah dokumen. Akses ke properti ID yang didefinisikan kemudian akan terlihat seperti ini:

<div id="topnavi">Di sinilah navigasi</div>

Attribute id menentukan nama ID. Perhatikan bahwa tanda pagar tidak boleh dituliskan di sini.





Informasi yang ditunjukkan juga bisa digabungkan satu sama lain. Sebagai contoh, suatu elemen HTML dapat diberikan beberapa kelas.

<p class="merah besar">PSD-Tutorials.de</p>

Pada contoh ini, dua kelas merah dan besar diberikan kepada paragraf. Jika ingin menentukan sebuah kelas dan sebuah ID, lihat contoh berikut ini:

<p class="merah" id="navi">PSD-Tutorials.de</p>

Elemen dan ID juga dapat digabungkan. Berikut adalah contohnya:

div.navi { 
   color: biru; 
}

Sintaks ini hanya berlaku untuk elemen div dengan kelas navi. Elemen p yang juga memiliki kelas navi tidak akan terpengaruh.

Dalam CSS, ada cara lain untuk menggabungkan pemilih. Coba lihat sintaks berikut ini:

h1 { 
   color: merah;
}
em { 
   color: biru; 
}

Pada kasus ini, semua judul level 1 diberi warna merah. Elemen em sebaliknya diberi warna biru.

Melalui kombinasi kedua perintah ini, kita dapat memastikan bahwa hanya elemen em dengan warna biru yang berada di dalam elemen h1 yang diwarnai.

h1 em { 
   color: biru; 
};

Nama elemen dituliskan tanpa koma di antaranya.

Ini sebenarnya adalah jebakan umum di mana pemula CSS sering terjatuh. Berikut adalah sintaks yang sama, tetapi dengan tambahan koma:

h1, em { 
   color: biru; 
}

Apa arti sintaks ini? Semua elemen h1 dan semua elemen em akan dipilih. Ini sangat berbeda dengan sintaks tanpa koma!

Selector penting lainnya adalah universal selector. Ini memungkinkan pemilihan elemen apa pun. Selector ini didefinisikan dengan menggunakan tanda bintang (*).

* { 
   color: merah; 
}

Dengan sintaks ini, semua elemen akan diwarnai merah. Perlu diperhatikan beberapa kekhususan syntax pada pemilih ini.

#mainnavi * { 
   color: merah; 
}

Pada contoh ini, warna teks semua elemen di dalam elemen dengan ID mainnavi diatur menjadi merah. Namun hal ini tidak berlaku untuk elemennya sendiri.

Jika universal selector berada di awal deklarasi, sebenarnya tidak perlu dituliskan. Oleh karena itu, hal semacam ini sebenarnya tidak diperlukan:

* p { 
   color: merah; 
}

Sintaks ini setara dengan yang berikut:

p { 
   color: merah; 
}

Pada tutorial berikutnya, Anda akan mengenal pemilih lainnya.