Coding How to HTML CSS Web Desain

30 CSS Selector Yang Penting untuk diingat. (Part 1)

30 CSS Selector Yang Penting untuk diingat. (Part 1) Agustus 11, 2015Leave a comment

HUMAYRAA merupakan salah satu bagian dari web Bestariweb Studio. HUMAYRAA.COM kami khususkan untuk berbagi pengalaman dan tutorial kepada seluruh pembaca yang berminat menggeluti dunia IT dan desain. Kunjungi pula web kami yang lainnya: Bestariweb Studio | BestariwebHost

Belajar CSS, Tutorial CSS3

Pada perkembangannya CSS selalu mengalami perubahan fitur pada setiap versinya (Saat artikel ini ditulis, versi CSS yang terbaru adalah CSS3). Walaupun demikian, sampai saat ini banyak penggunaan CSS selector yang masih awam bagi sebagian orang. Dan yang Perlu Anda ketahui juga, bahwa CSS3 sebagian besar hanya di support oleh web browser modern.

1. *

* {
 margin: 0;
 padding: 0;
}
Contoh Penggunaan CSS Selector *

Kita mulai tutorial ini dengan membahas CSS Selector yang paling mudah untuk pemula, sebelum melanjutkan ke tahap penggunaan CSS selector yang lebih rumit.

Simbol bintang (*) akan fokus pada semua elemen pada halaman. Banyak pengembang menggunakan trik ini untuk memberi nilai nol pada margin dan paddinguntuk setiap id maupun class. Meskipun ini cara yang cepat, namun ini bukanlah hal yang tepat. Hal seperti ini sangat tidak direkomendasikan karena akan membuat file CSS semakin berat jika diakses pada browser.

  • IE6+
  • Firefox
  • Chrome
  • Safari
  • Opera

2. #X

#container {
 width: 960px;
 margin: auto;
}
Contoh penggunaan CSS Selector #X

Awalan simbol hash / pagar (#) memungkinkan kita untuk memberi style pada id. Ini adalah cara yang mudah pada penggunaan yang paling umum, namun berhati-hati ketika menggunakan selektor id. Karena bersifat unik dan hanya bisa digunakan sekali.

 

3 .X

.error {
color: red;
}
Contoh penggunaan CSS Selector .X

Ini adalah sebuah class selector. Perbedaan antara id dan class adalah ID hanya bisa digunakan untuk satu objek saja, diawali dengan tanda pagar (#). Class adalah style dari CSS yang bisa digunakan untuk beberapa elemen, dengan adanya class ini memungkinkan anda untuk merubah beberapa objek pada html dengan settingan yang sama, dengan menuliskan satu perintah saja, class diawali dengan tanda titik (.)

 

4. X Y

li a {
text-decoration: none;
}

Selector seperti ini digunakan bila Anda merasa perlu untuk lebih spesifik dengan selector anda. Sebagai contoh jika anda menargetkan semua tag anchor, Anda hanya perlu menargetkan sebuah selector yang berada dalam suatu selector induknya.

5. X

a { color: red; }
ul { margin-left: 0; }

Bagaimana jika Anda ingin menargetkan pada suatu elemen tertentu? Misalkan saja pada link (a). Hal ini seharusnya jangan dibuat sulit, anda tidak perlu lagi menggunakan selector seperti id atau class. Jika Anda perlu untuk menargetkan semua daftar unordered, gunakan ul {…} atau jika perlu menargetkan link, gunakan a {…}.

 

6. X:visited dan x:link

a:link { color: red; }
a:visted { color: purple; }

Gunakan :link pseudo-class untuk menargetkan semua tag yang belum diklik.

Atau, gunakan :visited pseudo class, untuk menerapkan styling khusus untuk hanya tag anchor pada halaman yang telah diklik atau telah dikunjungi.

 

7. X + Y

ul + p {
 color: red;
}

Hal ini disebut sebagai selector yang berdekatan. Ini akan memilih suatu unsur yang segera didahului oleh elemen pendahulunya.

8. X > Y

div#container > ul {
border: 1px solid black;
}

Perbedaan antara standar X Y dan X > Y akan menargetkan ke cabang selector secara langsung. Sebagai contoh, perhatikan markup berikut:

<div id="container">
<ul>
	<li> List Item
<ul>
	<li> Child</li>
</ul>
</li>
	<li> List Item</li>
	<li> List Item</li>
	<li> List Item</li>
</ul>
</div>

Sebuah pemilih dari #container > ul hanya akan menargetkan ul yang menjadi cabang (anak-anak) dari div dengan id dari container. Ini tidak akan menargetkan, misalnya, ul yang merupakan cabang (anak) dari li pertama.

Untuk alasan ini, ada manfaat kinerja dalam menggunakan combinator cabang (anak). Bahkan, dianjurkan ketika bekerja dengan JavaScript berbasis CSS selector.

9. X ~ Y

ul ~ p {
 color: red;
}

Combinator ini mirip dengan X + Y, jika (ul + p) hanya akan memilih elemen pertama yang didahului oleh nama parameter yang di pilih, yang satu ini lebih umum. Ini (x~y) akan memilih semua elemen y setelah x, mengacu pada contoh kita di atas, setiap elemen p, selama mereka mengikuti ul a.

10. X[title]

a[title] {
 color: green;
}

Disebut sebagai attributes selector, dalam contoh kita di atas, ini akan memilih tag anchor yang memiliki atribut title . Tag yang bukan anchor title, tidak akan menerima styling tertentu. Tapi, bagaimana jika Anda perlu untuk lebih spesifik?

 

Sumber: http://code.tutsplus.com/id/tutorials/the-30-css-selectors-you-must-memorize–net-16048

Incoming search terms:

HUMAYRAA merupakan salah satu bagian dari web Bestariweb Studio. HUMAYRAA.COM kami khususkan untuk berbagi pengalaman dan tutorial kepada seluruh pembaca yang berminat menggeluti dunia IT dan desain. Kunjungi pula web kami yang lainnya: Bestariweb Studio | BestariwebHost

Tinggalkan Balasan

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *