Jangan ngaku jago CSS kalo belum tahu yang satu ini. Apakah kamu sudah pernah belajar CSS? Iyaa kamuuu.. atau anda sudah menguasai dasar-dasar selector pada CSS seperti Show
1. ** { margin: 0; padding: 0; } Mari kita mulai dengan 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 Sebuah #container * { border: 1px solid black; } Simbol bintang (*) juga bisa anda gunakan untuk memberi nilai dalam sebuah id atau class. Pada contoh di atas berarti, pada semua element yang berada di dalam id container akan memiliki border (garis pinggir) berwarna hitam. Lihat DemoUntuk CSS di atas kompatibel dengan browser berikut:
2. #X#container { width: 960px; margin: auto; } Awalan simbol hash / pagar (#) memungkinkan kita untuk memberi style pada
Selector Lihat DemoUntuk CSS di atas kompatibel dengan browser berikut:
3. .X.error { color: red; } Ini adalah sebuah Lihat DemoUntuk CSS di atas kompatibel dengan browser berikut:
4. X Yli a { text-decoration: none; } Berikutnya adalah
Lihat DemoUntuk CSS di atas kompatibel dengan browser berikut:
5. Xa { 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 Lihat DemoUntuk CSS di atas kompatibel dengan browser berikut:
6. X:visited and X:linka:link { color: red; } a:visted { color: purple; } Jadi di sini, kami menggunakan Atau, kami juga menggunakan Lihat DemoUntuk CSS di atas kompatibel dengan browser berikut:
7. X + Yul + p { color: red; } Hal ini disebut sebagai pemilih yang berdekatan. Ini akan memilih suatu unsur yang segera didahului oleh elemen pendahulunya. Lihat DemoUntuk CSS di atas kompatibel dengan browser berikut:
8. X > Ydiv#container > ul { border: 1px solid black; } Perbedaan antara standar <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 Untuk alasan ini, ada manfaat kinerja dalam menggunakan combinator cabang (anak). Bahkan, dianjurkan ketika bekerja dengan JavaScript berbasis CSS selector. Lihat DemoUntuk CSS di atas kompatibel dengan browser berikut:
9. X ~ Yul ~ p { color: red; } Combinator ini mirip dengan Lihat DemoUntuk CSS di atas kompatibel dengan browser berikut:
10. X[title]a[title] { color: green; } Disebut sebagai attributes selector, dalam contoh
kita di atas, ini akan memilih tag anchor yang memiliki atribut Lihat DemoUntuk CSS di atas kompatibel dengan browser berikut:
11. X[href="foo"]a[href="http://net.tutsplus.com"] { color: #1f6053; /* nettuts green */ } Selector di atas akan memberikan suatu style ke semua tag anchor yang di link ke http://net.tutsplus.com; warna tulisannya akan berubah menjadi warna hijau. Namun, tag anchor lainnya tidak akan terpengaruh.
Ini bekerja dengan baik, meskipun agak kaku. Link ini memang langsung mengarah ke Nettuts +, tapi bagaimana jika yang dituju adalah alamat nettuts.com dengan url penuh (http://net.tutsplus.com/x/x/x) ? Dalam kasus-kasus ini kita dapat menggunakan sedikit ekspresi sintaks biasa. Lihat DemoUntuk CSS di atas kompatibel dengan browser berikut:
12. X[href*="nettuts"]a[href*="tuts"] { color: #1f6053; /* nettuts green */ } Bintang menunjuk bahwa suatu nilai harus muncul di suatu tempat di nilai atribut itu. Dengan begitu, ini meliputi setiap link yang berisikan tulisan “tuts” akan berwarna hijau, contoh tulisan yang berisikan tulisan “tuts” adalah nettuts.com, net.tutsplus.com, dan tutsplus.com. Perlu diingat bahwa ini adalah pernyataan yang luas. Bagaimana jika tag anchor dikaitkan dengan beberapa situs non-Envato dengan tuts string dalam url? Bila Anda perlu untuk lebih spesifik, gunakan Lihat DemoUntuk CSS di atas kompatibel dengan browser berikut:
13. X[href^="http"]a[href^="http"] { background: url(path/to/external/icon.png) no-repeat; padding-left: 10px; } Pernah bertanya-tanya bagaimana cara yang dilakukan beberapa situs agar mampu menampilkan icon kecil di sebelah link eksternal? Saya yakin Anda pernah melihat ini sebelumnya. Hal ini berfungsi sebagai penanda bahwa link akan mengarahkan anda ke situs web yang berbeda. Ini paling sering digunakan dalam ekspresi reguler untuk menunjuk awal string. Jika kita ingin menargetkan semua tag anchor yang memiliki href yang dimulai dengan http, kita bisa menggunakan pemilih mirip dengan selector di atas.
Sekarang, bagaimana jika kita ingin membatasi style untuk beberapa anchor yang memiliki link? katakanlah, sebuah foto? Dalam kasus tersebut, mari kita mencari akhir dari string. Lihat DemoUntuk CSS di atas kompatibel dengan browser berikut:
14. X[href$=".jpg"]a[href$=".jpg"] { color: red; } Sekali lagi, kita menggunakan simbol ekspresi reguler, $, untuk
merujuk ke akhir string. Dalam hal ini, kita cari semua anchor yang menggunakan gambar - atau setidaknya url yang berakhir dengan Lihat DemoUntuk CSS di atas kompatibel dengan browser berikut:
15. X[data-*="foo"]a[data-filetype="image"] { color: red; } Lihat kembali ke nomor delapan. Bagaimana kita mengimbangi berbagai jenis gambar: a[href$=".jpg"], a[href$=".jpeg"], a[href$=".png"], a[href$=".gif"] { color: red; } Tapi, itu tidak efisien. Solusi lain yang mungkin adalah dengan menggunakan atribut khusus. Bagaimana jika kita menambahkan sendiri atribut <a href="path/to/image.jpg" data-filetype="image"> Image Link </a> Kemudian, dengan mengaitkannya di tempat, kita bisa menggunakan selector atribut standar untuk menargetkan anchor khusus. a[data-filetype="image"] { color: red; } Lihat DemoUntuk CSS di atas kompatibel dengan browser berikut:
16. X[foo~="bar"]a[data-info~="external"] { color: red; } a[data-info~="image"] { border: 1px solid black; } Berikut adalah salah satu khusus yang akan kesan teman-teman Anda. Tidak terlalu banyak orang tahu tentang trik ini. Simbol ini Mulai dengan atribut khusus dari nomor lima belas di atas, kita bisa membuat "<a href="path/to/image.jpg" data-info="external image"> Click Me, Fool </a> Dengan markup di tempat, sekarang kita dapat menargetkan setiap tag yang memiliki salah satu dari nilai-nilai tersebut, dengan menggunakan trik ~ atribut selector. /* Target data-info attr that contains the value "external" */ a[data-info~="external"] { color: red; } /* And which contain the value "image" */ a[data-info~="image"] { border: 1px solid black; } Cukup bagus ya? Lihat DemoUntuk CSS di atas kompatibel dengan browser berikut:
17. X:checkedinput[type=radio]:checked { border: 1px solid black; } Pseudo class ini hanya akan menargetkan pengguna elemen interface yang telah diperiksa - seperti radio button atau check box. Sangat sederhana bukan? Lihat DemoUntuk CSS di atas kompatibel dengan browser berikut:
18. X:afterSetiap hari, tampaknya, orang yang menemukan cara-cara baru dan kreatif untuk menggunakannya secara efektif. Mereka hanya menghasilkan konten di seluruh elemen yang dipilih. Banyak yang diperkenalkan pertama kali ke kelas-kelas ini ketika mereka mencari clear-fix hack. .clearfix:after { content: ""; display: block; clear: both; visibility: hidden; font-size: 0; height: 0; } .clearfix { *display: inline-block; _height: 1%; } Hack ini menggunakan Untuk penggunaan kreatif lain ini, lihat tips cepat yang saya buat untuk menciptakan efek shadow dengan CSS3. .
Untuk CSS di atas kompatibel dengan browser berikut:
19. X:hoverdiv:hover { background: #e3e3e3; } Oh, ayolah.. masak yang beginian belum kenal? Anda pasti tahu yang satu ini. Istilah resmi untuk ini adalah pengguna class action semu. Kedengarannya membingungkan, tetapi sebenarnya tidak. Apakah anda pernah menerapkan style tertentu ketika cursor mouse berada di atas sebuah elemen? Ini akan memberikan efek atau style yang berbeda ketika sebelum dilewati cursor!
Anda akan sering menggunakan selector ini saat mengajukan permintaan. Misalnya, a:hover { border-bottom: 1px solid black; }
Untuk CSS di atas kompatibel dengan browser berikut:
20. X:not(selector)div:not(#container) { color: blue; }
Atau, jika saya ingin memilih setiap elemen tunggal (tidak disarankan) kecuali untuk tag paragraf, kita bisa lakukan: *:not(p) { color: green; } Lihat DemoUntuk CSS di atas kompatibel dengan browser berikut:
21. X::pseudoElementp::first-line { font-weight: bold; font-size: 1.2em; } Kita dapat menggunakan pseudo element (ditunjuk oleh
Target the First Letter of a Paragraphp::first-letter { float: left; font-size: 2em; font-weight: bold; font-family: cursive; padding-right: 2px; } Potongan ini adalah sebuah abstraksi yang akan menemukan semua paragraf pada halaman, dan kemudian sub-target hanya huruf pertama dari elemen tersebut. Hal ini paling sering digunakan untuk membuat style seperti koran untuk kata-kata pertama dari sebuah artikel. Target the First Line of a Paragraphp::first-line { font-weight: bold; font-size: 1.2em; } Demikian pula,
Lihat DemoUntuk CSS di atas kompatibel dengan browser berikut:
22. X:nth-child(n)li:nth-child(3) { color: red; } Apakah anda pernah mengalami ketika kita tidak punya cara
untuk menargetkan elemen tertentu dalam tumpukan? Sebuah Harap dicatat bahwa Kita bahkan dapat menggunakan ini untuk memilih satu set variabel anak-anak. Sebagai contoh, kita bisa melakukan Lihat DemoUntuk CSS di atas kompatibel dengan browser berikut:
23. X:nth-last-child(n)li:nth-last-child(2) { color: red; } Bagaimana jika Anda memiliki daftar besar item dalam Teknik ini bekerja hampir identik dari nomor enam belas di atas, bagaimanapun, perbedaan adalah bahwa hal itu dimulai pada akhir koleksi, dan bekerja jalan kembali. Lihat DemoUntuk CSS di atas kompatibel dengan browser berikut:
24. X:nth-of-type(n)ul:nth-of-type(3) { border: 1px solid black; } Akan ada saat-saat dimana anda harus memilih sebuah Bayangkan mark-up yang berisi lima daftar unordered. Jika Anda ingin menerapkan style hanya untuk Lihat DemoUntuk CSS di atas kompatibel dengan browser berikut:
25. X:nth-last-of-type(n)ul:nth-last-of-type(3) { border: 1px solid black; } Kemudian, untuk tetap konsisten, kita juga bisa menggunakan Untuk CSS di atas kompatibel dengan browser berikut:
26. X:first-childul li:first-child { border-top: none; } Struktural pseudo-class ini memungkinkan kita untuk menargetkan child pertama dari elemen parent. Anda akan sering menggunakan ini untuk menghapus batas dari daftar item pertama dan terakhir. Sebagai contoh, katakanlah Anda memiliki daftar baris, dan masing-masing memiliki Banyak web desainer menerapkan kelas Lihat DemoUntuk CSS di atas kompatibel dengan browser berikut:
27. X:last-childul > li:last-child { color: green; } Ini adalah kebalikan dari ContohMari kita membangun sebuah contoh sederhana untuk menunjukkan salah satu kemungkinan penggunaan kelas-kelas ini. Kami akan membuat daftar item yang bergaya. Markup<ul> <li> List Item </li> <li> List Item </li> <li> List Item </li> </ul> Tidak ada yang istimewa di sini; hanya daftar sederhana. CSSul { width: 200px; background: #292929; color: white; list-style: none; padding-left: 0; } li { padding: 10px; border-bottom: 1px solid black; border-top: 1px solid #3c3c3c; } Styling ini akan merubah background, menghapus browser-default padding pada
Satu-satunya masalah, seperti yang ditunjukkan pada gambar di atas, adalah bahwa perbatasan akan diterapkan ke dasar paling atas dan daftar unordered - yang tampak ganjil. Mari kita gunakan li:first-child { border-top: none; } li:last-child { border-bottom: none; } Haha, ini dapat memecahkan masalah...! Lihat DemoUntuk CSS di atas kompatibel dengan browser berikut:
Ehemm - IE8 supported 28. X:only-childdiv p:only-child { color: red; } Anda mungkin tidak akan menemukan diri Anda menggunakan Hal ini memungkinkan Anda untuk menargetkan elemen-elemen yang merupakan anak tunggal dari induknya. Sebagai contoh, referensi potongan di atas, hanya paragraf yang merupakan Mari kita asumsikan dengan markup berikut. <div><p> My paragraph here. </p></div> <div> <p> Two paragraphs total. </p> <p> Two paragraphs total. </p> </div> Dalam
hal ini, paragraf Lihat DemoUntuk CSS di atas kompatibel dengan browser berikut:
29. X:only-of-typeli:only-of-type { font-weight: bold; } Struktural pseudo class ini dapat digunakan dalam beberapa cara pintar. Ini akan menargetkan elemen-elemen yang tidak memiliki saudara kandung dalam wadah induknya. Sebagai contoh, mari kita menargetkan semua Pertama, tanyakan pada diri Anda bagaimana Anda akan menyelesaikan tugas ini? Anda bisa melakukan ul > li:only-of-type { font-weight: bold; } Lihat DemoUntuk CSS di atas kompatibel dengan browser berikut:
30. X:first-of-type
PengujianUntuk lebih memahami hal ini, mari kita tes. Salin mark-up berikut ke dalam kode editor Anda: <div> <p> My paragraph here. </p> <ul> <li> List Item 1 </li> <li> List Item 2 </li> </ul> <ul> <li> List Item 3 </li> <li> List Item 4 </li> </ul> </div> Sekarang, tanpa membaca lebih lanjut, cobalah untuk mencari tahu bagaimana untuk menargetkan hanya "List Item 2". Bila Anda telah menemukan jawabannya (atau menyerah), baca terus. Solusi PertamaAda berbagai cara
untuk memecahkan tes ini. Kami akan meninjau beberapa dari kode. Mari kita mulai dengan menggunakan ul:first-of-type > li:nth-child(2) { font-weight: bold; } Potongan ini pada dasarnya mengatakan, "menemukan daftar unordered pertama pada halaman, kemudian menemukan hanya anak-anak langsung, yaitu daftar item. Berikutnya, filter yang turun ke hanya daftar item kedua dalam set itu. Solusi ke DuaPilihan lain adalah dengan menggunakan pemilih yang berdekatan. p + ul li:last-child { font-weight: bold; } Dalam skenario ini, kita menemukan bahwa
Solusi ke TigaKita bisa jengkel atau main-main seperti yang kita inginkan dengan pemilih ini. ul:first-of-type li:nth-last-child(1) { font-weight: bold; } Kali ini, kita ambil Lihat DemoUntuk CSS di atas kompatibel dengan browser berikut:
KesimpulanJika Anda masih menggunakan browser lama, seperti Internet Explorer 6, Anda masih harus berhati-hati saat menggunakan selector yang lebih baru. Tapi, jangan biarkan hal itu menghalangi Anda untuk belajar. Anda akan merasakan kerugian besar untuk diri sendiri. Pastikan untuk merujuk di sini untuk melihat daftar kompatibilitas browser yang bisa digunakan. Atau, Anda dapat menggunakan script IE9.js dari Dean Edward yang luar biasa untuk membawa dukungan untuk selector ini untuk browser lama. Kedua, ketika bekerja dengan JavaScript libraries, seperti jQuery populer, selalu mencoba untuk menggunakan penyeleksi CSS3 asli atas library metode kustom / selector, bila memungkinkan. Itu akan membuat kode Anda lebih cepat. Terima kasih sudah membaca artikel ini. Semoga bisa menambah ilmu anda untuk menjadi seorang professional web designer! |