Belajar CSS Selector

Oleh Unknown

Friday, May 22, 2015

Belajar CSS Selector - CSS Selector memungkinkan kamu untuk memilih dan memanipulasi elemen HTML. CSS Selector digunakan untuk menemukan atau memilih elemen HTML yang ingin dimanipulasi dengan style CSS berdasarkan id, class, type, attribute, dan dll yang ada pada elemen HTML. Untuk lebih jelasnya apa itu selector pada CSS bisa menengok kembali pembahasan tentang Mengenal Syntax Kode CSS.

Contoh-contoh CSS Selector

Sebagaimana disampaikan sebelumnya, bahwa untuk menentukan bagian tertentu pada elemen HTML yang ingin dimodifikasi dengan style CSS bisa berdasar id, class, attribute, dan sebagainya. Di bawah beberapa contoh cara menggunakan CSS Selector.

Element Selector

Yaitu cara mendesain elemen HTML dengan CSS berdasarkan nama elemennya. Sebagai contoh misalnya di bawah ini saya akan memilih dan mendesain elemen paragraf dengan CSS, dengan posisi tulisan berada di tengah dan warna tulisan merah.

<style>
p {
    text-align: center;
    color: red;
} 
</style>

<p>Aku paragraf pertama yang kena dampak style CSS</p>
<p>Aku sebagai paragraf kedua juga kena</p>
<p>Ternyata Aku paragraf ketiga juga kena</p>

hasilnya :

Aku paragraf pertama yang kena dampak style CSS

Aku sebagai paragraf kedua juga kena

Ternyata Aku paragraf ketiga juga kena

Contoh tersebut menunjukkan bahwa semua paragraf dengan style tampilan yang sama, yaitu warna merah dan posisi di tengah. Karena yang kita tentukan adalah semua elemen paragraf yang didefinisikan dengan "p" pada kode tersebut.

id Selector

Untuk menentukan bagian tertentu pada elemen HTML secara lebih spesifik. Misal di bawah ini style CSS hanya ditujukan untuk paragraf pertama yang saya beri nama id "p1". Cara penulisan style CSS untuk id selector adalah diawali hashtag (#) seperti terlihat di atas.

<style>
#p1 {
    text-align: center;
    color: blue;
}
</style>

<p id="p1">Tuh kan, Aku paragraf pertama kelihatan biru</p>

hasilnya :

Tuh kan, Aku paragraf pertama kelihatan biru

Class Selector

Untuk menentukan bagian attribute class tertentu pada elemen HTML yang ingin diberi style CSS. Cara penulisannya yaitu dengan tanda titik kemudian diikuti nama attribute class nya. Di bawah ini contoh sederhana style CSS untuk attribute class yang saya beri nama "coba".

<style>
.coba {
    text-align: center;
    color: green;
}
</style>

<h1 class="coba">Aku jadi hijau</h1>
<p class="coba">Aku juga jadi hijau</p>

hasilnya :

Aku jadi hijau

Aku juga jadi hijau

Itulah pembahasan tentang CSS Selector yang semoga bisa menambah wawasan coding, khususnya untuk coding CSS. Sampai jumpa lagi pada postingan sinahu coding selanjutnya.

---