@PrasAbdilah: Berbagai CSS Selector

Ada banyak cara untuk mentarget elemen html. Dalam artikel kali ini saya akan membahas banyak cara tadi.
Tanpa basa-basi lagi, mari kita mulai.

1. Selector *

Selector * artinya mentarget seluruh elemen html yang ada.
Dibawah ini contoh langsungnya, karena saya rasa akan lebih gampang dipahami kalo dengan contoh langsung.

*{
    background: green;
}

article *{
    background: yellow;
}

See the Pen Selector * by pras abdilah (@pras) on CodePen.

Seperti yang terlihat di contoh, seluruh halaman akan menjadi berwarna hijau karena selector * juga mentarget <body>. Sedangkan dengan selector article * akan mentarget seluruh elemen html di dalam <article>. Oh iya, selector article * tuh pake selector turunan juga, ntar dibawah dibahas.

The star symbol will target every single element on the page.

2. HTML Tag

HTML tag apa saja bisa jadi selector dalam CSS; <p>, <small>, <div>, <span>, bahkan <body> dan <html>. Selector ini akan mentarget seluruh tag yang sama dalam suatu halaman web.

p{
  color : green;
}

small{
  color : red;
}

div{
  color : blue;
}

See the Pen Selector HTML tag by pras abdilah (@pras) on CodePen.

3. Id Selector ( #X = #namaId )

Id merupakan atribut html. Nah, untuk memakai selector yang satu ini cukup dengan menambahkan tanda # disusul dengan nama Id-nya. Langsung contoh lagi nih.

h1{
  color: black;
}

#targeted{
  color: blue;
}

See the Pen ID Selector by pras abdilah (@pras) on CodePen.

Buat mengingatkan, sebaiknya tidak ada Id yang sama dalam satu page, kalau mau pakai selector yang sama sebaiknya pakai selector yang berikut ini.

4. Class Selector ( .X = .namaClass )

Seperti halnya Id, class juga merupakan atribut dalam suatu tag html. Bila Id digunakan dengan prefix #, maka class menggunakan prefix .(titik). Ok, lanjut contoh.

.color-orange{
  color: orange;
}

.background-green{
  background-color: green;
}

See the Pen Selector Class by pras abdilah (@pras) on CodePen.

Berbeda dengan Id, class bisa digunakan beberapa kali dalam satu halaman. Selain itu satu tag HTML bisa memiliki beberapa class sekaligus, cukup pisahkan dengan tanda spasi. Karenanya, saya lebih suka memakai class dalam styling.

5. Descendant Selector / Turunan ( X Y )

Selector ini digunakan untuk target yang lebih spesifik. Contoh kasusnya, selector tag "p" akan men-target seluruh "p" dalam satu halaman, sementara yang kita butuhkan adalah hanya "p" yang berada dalam "div", dengan kata lain "p" yang merupakan turunan "div".

div p{
  color: blue;
}

div #background-orange{
  background: orange;
}

p .background-green{
  background: green;
}

See the Pen GgReEx by pras abdilah (@pras) on CodePen.

Seperti yang saya berikan dalam contoh, turunan bisa dalam HTML tag, class, Id, ataupun lainnya termasuk yang selector *, silakan scroll kembali keatas sebentar.
Turunan ini juga bisa bertingkat-tingkat seperti contoh terakhir, tetapi sebaiknya jangan terlalu banyak tingkatnya.

6. Adjacent Selector / Berdekatan ( X + Y )

Maksud berdekatan disini adalah tepat disamping suatu element HTML, bukan turunan lho ya, bisa dibilang setingkat. Selector ini akan mentarget element yang terakhir. Misal ada "p" tepat setelah "div", dan selectornya adalah "div + p", maka yang ditarget adalah "p".

/*This will target the <p> located immediately after <div>*/
div + p{
  color: blue;
}


/*This will work too, but you have to ask yourself whether it really necessay */
h2 + h3 + h4{
  color : red;
}

See the Pen ZYYpeL by pras abdilah (@pras) on CodePen.

Selector ini dapat dibuat bertingkat (X + Y + Z dst), tetapi adjacent selector yang bertingkat ini sebaiknya dipakai jika memang diperlukan saja.

7. Direct Children Selector/ Turunan langsung(X > Y)

Terdapat sebuah <div>, dalam <div> tersebut terdapat <p>, dalam <p> terdapat <p> juga.
Kemudian kita buat selector div > p, maka yang terkena styling adalah semua <p> yang tepat satu tingkat di bawah <div>.

@PrasAbdilah

Monday 10 November 2014

Berbagai CSS Selector