Cara menggunakan fungsi kelas di css

Jangan ngaku jago CSS kalau belum tahu yang ini. Apakah Anda pernah belajar CSS? . atau apakah Anda sudah menguasai dasar-dasar penyeleksi dalam CSS seperti penyeleksi

li a {
text-decoration: none;
}

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

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

1. *

* {
 margin: 0;
 padding: 0;
}

Mari kita mulai dengan yang paling sederhana untuk pemula, sebelum beralih ke penggunaan pemilih CSS yang lebih kompleks

Simbol bintang (*) akan fokus pada semua elemen di halaman. Banyak developer menggunakan trik ini untuk memberikan nilai null pada

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

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

A

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

#container * {
 border: 1px solid black;
}

Anda juga bisa menggunakan simbol bintang (*) untuk memberi nilai pada sebuah id atau class. Pada contoh di atas, artinya semua elemen di dalam wadah id akan memiliki batas hitam

Lihat Demo

CSS di atas kompatibel dengan browser berikut

• IE6+
• Firefox
• Chrome
• Safari
• Opera

2. #X

#container {
 width: 960px;
 margin: auto;
}

Simbol hash awalan / pagar (#) memungkinkan kita memberi gaya pada

li a {
text-decoration: none;
}

li a {
text-decoration: none;
}

Bertanya pada diri sendiri. apakah Anda benar-benar perlu menerapkan

li a {
text-decoration: none;
}

_9 ke elemen ini?

Selector

li a {
text-decoration: none;
}

Lihat Demo

CSS di atas kompatibel dengan browser berikut

• IE6+
• Firefox
• Chrome
• Safari
• Opera

3. . X

.error {
color: red;
}

Ini adalah pemilih

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

li a {
text-decoration: none;
}

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

Lihat Demo

CSS di atas kompatibel dengan browser berikut

• IE6+
• Firefox
• Chrome
• Safari
• Opera

4. XY

li a {
text-decoration: none;
}

Berikutnya adalah

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

Pro-tip - Jika Anda membuat sintaks CSS seperti

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

3, itu berarti Anda melakukan sesuatu yang salah. Tanyakan pada diri Anda, apakah itu benar-benar perlu

Lihat Demo

CSS di atas kompatibel dengan browser berikut

• IE6+
• Firefox
• Chrome
• Safari
• Opera

5. X

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

Bagaimana jika Anda ingin menargetkan elemen tertentu? . Ini tidak boleh dipersulit, Anda tidak perlu lagi menggunakan penyeleksi seperti

li a {
text-decoration: none;
}

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

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

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

Lihat Demo

CSS di atas kompatibel dengan browser berikut

• IE6+
• Firefox
• Chrome
• Safari
• Opera

6. X. dikunjungi dan X. tautan

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

Jadi di sini, kami menggunakan pseudo-class

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

Atau, kami juga menggunakan kelas semu

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

Lihat Demo

CSS di atas kompatibel dengan browser berikut

• IE7+
• Firefox
• Chrome
• Safari
• Opera

7. X + Y

ul + p {
 color: red;
}

Ini disebut pemilih kedekatan. Ini akan memilih elemen yang langsung didahului oleh elemen pendahulunya

Lihat Demo

CSS di atas kompatibel dengan browser berikut

• IE7+
• Firefox
• Chrome
• Safari
• Opera

8. X > Y

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

Perbedaan antara standar

ul + p {
 color: red;
}

ul + p {
 color: red;
}

 <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>

Pemilih dari

ul + p {
 color: red;
}

ul + p {
 color: red;
}

ul + p {
 color: red;
}

li a {
text-decoration: none;
}

ul + p {
 color: red;
}

ul + p {
 color: red;
}

ul + p {
 color: red;
}

Untuk alasan ini, ada manfaat kinerja dalam menggunakan kombinasi cabang (anak). Faktanya, ini direkomendasikan saat bekerja dengan JavaScript berbasis pemilih CSS

Lihat Demo

CSS di atas kompatibel dengan browser berikut

• IE7+
• Firefox
• Chrome
• Safari
• Opera

9. X ~ Y

#container * {
 border: 1px solid black;
}

Kombinator ini mirip dengan

ul + p {
 color: red;
}

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

Lihat Demo

CSS di atas kompatibel dengan browser berikut

• IE7+
• Firefox
• Chrome
• Safari
• Opera

10. X[judul]

#container * {
 border: 1px solid black;
}

Disebut pemilih atribut, dalam contoh kita di atas, ini akan memilih tag jangkar yang memiliki atribut

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

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

Lihat Demo

CSS di atas kompatibel dengan browser berikut

• IE7+
• Firefox
• Chrome
• Safari
• Opera

11. X[href="foo"]

#container * {
 border: 1px solid black;
}

Pemilih di atas akan memberi gaya pada semua tag jangkar yang ditautkan ke http. //bersih. tutsplus. com; . Namun, tag jangkar lainnya tidak akan terpengaruh

Perhatikan bahwa kami membungkus nilai dalam tanda kutip (“…”). Jangan lupa untuk melakukan ini saat menggunakan pemilih JavaScript CSS. Jika memungkinkan, selalu gunakan pemilih CSS3 pada metode lain

Ini bekerja dengan baik, meskipun agak kaku. Tautan ini memang mengarah langsung ke Nettuts +, tetapi bagaimana jika tujuannya adalah alamat nettuts. com dengan url lengkap (http. //bersih. tutsplus. com/x/x/x) ?

Lihat Demo

CSS di atas kompatibel dengan browser berikut

• IE7+
• Firefox
• Chrome
• Safari
• Opera

12. X[href*="nettuts"]

#container * {
 border: 1px solid black;
}

Bintang menunjukkan bahwa suatu nilai harus muncul di suatu tempat dalam nilai atribut. Dengan begitu, ini mencakup setiap tautan yang berisi teks "tuts" akan berwarna hijau, contoh teks yang berisi teks "tuts" adalah nettuts. com, bersih. tutsplus. com, dan tutsplus. com

Perlu diingat bahwa ini adalah pernyataan yang luas. Bagaimana jika tag jangkar ditautkan ke beberapa situs non-Envato dengan string tuts di url?

Lihat Demo

CSS di atas kompatibel dengan browser berikut

• IE7+
• Firefox
• Chrome
• Safari
• Opera

13. X[href^="http"]

#container * {
 border: 1px solid black;
}

Pernah bertanya-tanya bagaimana beberapa situs dapat menampilkan ikon kecil di sebelah tautan eksternal? . Ini berfungsi sebagai penanda bahwa tautan tersebut akan mengarahkan Anda ke situs web lain

Ini paling sering digunakan dalam ekspresi reguler untuk menunjuk ke awal string. Jika kita ingin menargetkan semua tag jangkar yang memiliki href yang dimulai dengan http, kita dapat menggunakan pemilih yang mirip dengan pemilih di atas

Perhatikan bahwa kami tidak mencari

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

5 itu tidak perlu, dan jangan menghitung url yang dimulai dengan

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

6

Sekarang, bagaimana jika kita ingin membatasi style ke beberapa anchor yang memiliki link?

Lihat Demo

CSS di atas kompatibel dengan browser berikut

• IE7+
• Firefox
• Chrome
• Safari
• Opera

14. X[href$=". jpg"]

#container * {
 border: 1px solid black;
}

Sekali lagi, kami menggunakan simbol ekspresi reguler, $, untuk merujuk ke akhir string. Dalam hal ini, kami mencari semua jangkar yang menggunakan gambar - atau setidaknya url yang diakhiri dengan

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

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

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

Lihat Demo

CSS di atas kompatibel dengan browser berikut

• IE7+
• Firefox
• Chrome
• Safari
• Opera

15. X[data-*="foo"]

#container * {
 border: 1px solid black;
}

Lihat kembali nomor delapan. Bagaimana kita menyeimbangkan berbagai jenis gambar.

 <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>

 <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>

 <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>

 <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>

#container * {
 border: 1px solid black;
}

Tapi, itu tidak efisien. Solusi lain yang mungkin adalah dengan menggunakan atribut khusus. Bagaimana jika kita menambahkan atribut

 <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>

#container * {
 border: 1px solid black;
}

Kemudian, dengan menghubungkannya, kita dapat menggunakan pemilih atribut standar untuk menargetkan jangkar tertentu

#container * {
 border: 1px solid black;
}

Lihat Demo

CSS di atas kompatibel dengan browser berikut

• IE7+
• Firefox
• Chrome
• Safari
• Opera

16. X[foo~="bar"]

#container {
 width: 960px;
 margin: auto;
}

Ini satu hal khusus yang akan mengesankan teman-teman Anda. Tidak banyak orang yang tahu tentang trik ini. Simbol ini

 <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>

Dimulai dengan atribut khusus dari nomor lima belas di atas, kita dapat membuat

 <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>

#container {
 width: 960px;
 margin: auto;
}

Dengan adanya markup, kita sekarang dapat menargetkan setiap tag yang memiliki salah satu dari nilai tersebut, menggunakan trik ~ atribut pemilih

#container {
 width: 960px;
 margin: auto;
}

Cukup bagus kan?

Lihat Demo

CSS di atas kompatibel dengan browser berikut

• IE7+
• Firefox
• Chrome
• Safari
• Opera

17. X. diperiksa

#container {
 width: 960px;
 margin: auto;
}

Kelas semu ini hanya akan menargetkan pengguna elemen antarmuka yang telah dicentang - seperti tombol radio atau kotak centang. Sangat sederhana bukan?

Lihat Demo

CSS di atas kompatibel dengan browser berikut

• IE9+
• Firefox
• Chrome
• Safari
• Opera

18. X. setelah

Setiap hari, tampaknya, orang menemukan cara baru dan kreatif untuk menggunakannya secara efektif. Mereka hanya menghasilkan konten di seluruh elemen yang dipilih

Banyak yang pertama kali diperkenalkan ke kelas-kelas ini ketika mereka mencari peretasan yang jelas

#container {
 width: 960px;
 margin: auto;
}

Peretasan ini menggunakan kelas semu

 <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>

 <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>

Untuk penggunaan kreatif lainnya dari ini, lihat tip cepat yang saya buat untuk membuat efek bayangan dengan CSS3.

Menurut spesifikasi Pemilih CSS3, Anda harus secara teknis menggunakan sintaks elemen semu dua titik dua

 <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>

9. Namun, agar tetap kompatibel, pengguna juga akan menerima penggunaan titik dua tunggal. Nyatanya, pada titik ini, lebih pintar menggunakan versi titik dua tunggal dalam proyek Anda

CSS di atas kompatibel dengan browser berikut

• IE8+
• Firefox
• Chrome
• Safari
• Opera

19. X. arahkan kursor

#container {
 width: 960px;
 margin: auto;
}

Oh ayolah. Apakah kamu tidak tahu masakan seperti ini? . Istilah resmi untuk ini adalah pengguna tindakan kelas semu. Kedengarannya membingungkan, tetapi sebenarnya tidak. Pernahkah Anda menerapkan gaya tertentu saat kursor mouse berada di atas suatu elemen?

Perlu diingat bahwa versi Internet Explorer yang lebih lama tidak merespons ketika pseudo-class

#container * {
 border: 1px solid black;
}

00 diterapkan ke pemilih apa pun, selain tag jangkar

Anda akan sering menggunakan pemilih ini saat membuat permintaan. Misalnya,

#container * {
 border: 1px solid black;
}

#container {
 width: 960px;
 margin: auto;
}

Pro-tip -

#container * {
 border: 1px solid black;
}

02 terlihat lebih baik daripada

#container * {
 border: 1px solid black;
}

03

CSS di atas kompatibel dengan browser berikut

• IE6+ (Dalam IE6,. hover harus diterapkan ke elemen jangkar)
• Firefox
• Chrome
• Safari
• Opera

20. X. tidak(pemilih)

#container {
 width: 960px;
 margin: auto;
}

#container * {
 border: 1px solid black;
}

li a {
text-decoration: none;
}

ul + p {
 color: red;
}

Atau, jika saya ingin memilih setiap elemen (tidak disarankan) kecuali tag paragraf, kita bisa melakukannya

#container {
 width: 960px;
 margin: auto;
}

Lihat Demo

CSS di atas kompatibel dengan browser berikut

• IE9+
• Firefox
• Chrome
• Safari
• Opera

21. X. pseudoElement

#container {
 width: 960px;
 margin: auto;
}

Kita dapat menggunakan pseudo element (ditunjukkan dengan

 <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>

Elemen semu terdiri dari dua titik dua

 <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>

9

Targetkan Huruf Pertama Paragraf

.error {
color: red;
}

Cuplikan ini adalah abstraksi yang akan menemukan semua paragraf di halaman, lalu mensub-targetkan hanya huruf pertama dari elemen tersebut

Ini paling sering digunakan untuk membuat gaya seperti surat kabar untuk kata-kata pertama dari sebuah artikel

Menargetkan Baris Pertama Paragraf

#container {
 width: 960px;
 margin: auto;
}

Demikian pula,

 <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>

"Untuk kompatibilitas dengan style sheet yang ada, agen pengguna juga harus menerima terlebih dahulu notasi single-gut untuk elemen semu yang diperkenalkan di CSS level 1 dan 2 (mis. garis pertama,. surat pertama,. sebelum dan. setelah). Kompatibilitas ini tidak diperbolehkan untuk elemen semu baru yang diperkenalkan dalam spesifikasi ini. "- Sumber

Lihat Demo

CSS di atas kompatibel dengan browser berikut

• IE6+
• Firefox
• Chrome
• Safari
• Opera

22. X. n-anak(n)

.error {
color: red;
}

Pernahkah Anda mengalami saat kami tidak memiliki cara untuk menargetkan elemen tertentu di tumpukan?

Harap perhatikan bahwa

#container * {
 border: 1px solid black;
}

#container * {
 border: 1px solid black;
}

Kami bahkan dapat menggunakan ini untuk memilih satu set variabel anak. Misalnya, kita dapat melakukan

#container * {
 border: 1px solid black;
}

Lihat Demo

CSS di atas kompatibel dengan browser berikut

• IE9+
• Firefox 3. 5+
• Chrome
• Safari

23. X. ke-n-anak-terakhir(n)

.error {
color: red;
}

Bagaimana jika Anda memiliki banyak daftar item di

ul + p {
 color: red;
}

Teknik ini bekerja hampir identik dari nomor enam belas di atas, namun perbedaannya adalah teknik ini dimulai di akhir koleksi, dan bekerja kembali.

Lihat Demo

CSS di atas kompatibel dengan browser berikut

• IE9+
• Firefox 3. 5+
• Chrome
• Safari
• Opera

24. X. nth-of-type(n)

.error {
color: red;
}

Akan ada saatnya Anda harus memilih

#container * {
 border: 1px solid black;
}

#container * {
 border: 1px solid black;
}

Bayangkan mark-up yang berisi lima register yang tidak terurut. Jika Anda ingin menerapkan gaya hanya ke

ul + p {
 color: red;
}

li a {
text-decoration: none;
}

#container * {
 border: 1px solid black;
}

Lihat Demo

CSS di atas kompatibel dengan browser berikut

• IE9+
• Firefox 3. 5+
• Chrome
• Safari

25. X. nth-last-of-type(n)

.error {
color: red;
}

Kemudian, agar tetap konsisten, kita juga dapat menggunakan

#container * {
 border: 1px solid black;
}

CSS di atas kompatibel dengan browser berikut

• IE9+
• Firefox 3. 5+
• Chrome
• Safari
• Opera

26. X. anak pertama

.error {
color: red;
}

Struktur pseudo-class ini memungkinkan kita untuk menargetkan anak pertama dari elemen induk. Anda akan sering menggunakan ini untuk menghapus batas dari daftar item pertama dan terakhir

Misalnya, katakanlah Anda memiliki daftar baris, dan masing-masing memiliki

#container * {
 border: 1px solid black;
}

#container * {
 border: 1px solid black;
}

Banyak desainer web menerapkan kelas

#container * {
 border: 1px solid black;
}

#container * {
 border: 1px solid black;
}

Lihat Demo

CSS di atas kompatibel dengan browser berikut

• IE7+
• Firefox
• Chrome
• Safari
• Opera

27. X. anak terakhir

.error {
color: red;
}

Ini kebalikan dari

#container * {
 border: 1px solid black;
}

#container * {
 border: 1px solid black;
}

Contoh

Mari buat contoh sederhana untuk menunjukkan salah satu kemungkinan penggunaan kelas-kelas ini. Kami akan membuat daftar item bergaya

Markup

.error {
color: red;
}

Tidak ada yang istimewa di sini;

CSS

.error {
color: red;
}

Penataan gaya ini akan mengubah latar belakang, menghapus padding default browser pada

ul + p {
 color: red;
}

ul + p {
 color: red;
}

ul + p {
 color: red;
}

Untuk menambahkan kedalaman pada register Anda, terapkan

#container * {
 border: 1px solid black;
}

01 ke setiap li yang satu atau dua tingkat lebih gelap dari warna latar belakang

ul + p {
 color: red;
}

8. Selanjutnya, terapkan

#container * {
 border: 1px solid black;
}

_24 dengan beberapa nuansa ringan

Satu-satunya masalah, seperti yang ditunjukkan pada gambar di atas, adalah perbatasan akan diterapkan ke basis paling atas dan daftar tidak berurutan - yang terlihat aneh. Mari gunakan kelas semu

#container * {
 border: 1px solid black;
}

li a {
text-decoration: none;
}

Haha, ini menyelesaikan masalah.

Lihat Demo

CSS di atas kompatibel dengan browser berikut

• IE9+
• Firefox
• Chrome
• Safari
• Opera

Ehemm - IE8 didukung

#container * {
 border: 1px solid black;
}

#container * {
 border: 1px solid black;
}

28. X. anak tunggal

li a {
text-decoration: none;
}

Anda mungkin tidak akan terlalu sering menggunakan kelas semu ________7______40. Namun, ada kemungkinan Anda akan membutuhkannya dari waktu ke waktu

Hal ini memungkinkan Anda untuk menargetkan elemen yang hanya merupakan turunan dari induknya. Misalnya referensi di atas, hanya paragraf yang

#container * {
 border: 1px solid black;
}

Mari kita asumsikan dengan markup berikut

li a {
text-decoration: none;
}

Dalam hal ini, paragraf kedua

ul + p {
 color: red;
}

#container * {
 border: 1px solid black;
}

Lihat Demo

CSS di atas kompatibel dengan browser berikut

• IE9+
• Firefox
• Chrome
• Safari
• Opera

29. X. satu-satunya jenis

li a {
text-decoration: none;
}

Kelas semu struktural ini dapat digunakan dalam beberapa cara cerdas. Ini akan menargetkan elemen yang tidak memiliki saudara di wadah induknya. Misalnya, mari targetkan semua

ul + p {
 color: red;
}

Pertama, tanyakan pada diri Anda bagaimana Anda akan menyelesaikan tugas ini? . Satu-satunya solusi adalah menggunakan

#container * {
 border: 1px solid black;
}

li a {
text-decoration: none;
}

Lihat Demo

CSS di atas kompatibel dengan browser berikut

• IE9+
• Firefox 3. 5+
• Chrome
• Safari
• Opera

30. X. tipe pertama

#container * {
 border: 1px solid black;
}

Pengujian

Untuk lebih memahami ini, mari kita lakukan tes. Salin markup berikut ke editor kode Anda

li a {
text-decoration: none;
}

Sekarang, tanpa membaca lebih lanjut, coba cari cara untuk menargetkan hanya "Item Daftar 2". Ketika Anda telah menemukan jawabannya (atau menyerah), baca terus

Solusi Pertama

Ada berbagai cara untuk memecahkan tes ini. Kami akan meninjau beberapa kode. Mari kita mulai dengan menggunakan

#container * {
 border: 1px solid black;
}

li a {
text-decoration: none;
}

Cuplikan ini pada dasarnya mengatakan, "temukan daftar pertama yang tidak diurutkan pada halaman, lalu temukan hanya turunan langsung, yang merupakan daftar item. Selanjutnya, filter ke bawah untuk hanya mencantumkan item kedua dalam kumpulan

Solusi kedua

Pilihan lainnya adalah menggunakan pemilih terdekat

li a {
text-decoration: none;
}

Dalam skenario ini, kami menemukan bahwa

ul + p {
 color: red;
}

#container * {
 border: 1px solid black;
}

Solusi ketiga

Kita bisa menjadi menjengkelkan atau menyenangkan seperti yang kita inginkan dengan pemilih ini

li a {
text-decoration: none;
}

Kali ini, kami mengambil

ul + p {
 color: red;
}

Lihat Demo

CSS di atas kompatibel dengan browser berikut

• IE9+
• Firefox 3. 5+
• Chrome
• Safari
• Opera

Kesimpulan

Jika Anda masih menggunakan browser lama, seperti Internet Explorer 6, Anda tetap harus berhati-hati saat menggunakan pemilih yang lebih baru. Tapi, jangan biarkan hal itu menghentikan Anda dari belajar. Anda akan merasakan kerugian besar bagi diri Anda sendiri. Pastikan untuk merujuk ke sini untuk melihat daftar kompatibilitas browser yang dapat digunakan. Atau, Anda dapat menggunakan skrip IE9. js dari Dean Edward yang luar biasa untuk memberikan dukungan bagi pemilih ini ke browser lama

Kedua, saat bekerja dengan pustaka JavaScript, seperti jQuery yang populer, selalu coba gunakan pemilih CSS3 asli daripada pustaka metode / pemilih khusus, jika memungkinkan. Itu akan membuat kode Anda lebih cepat

terimakasih telah membaca artikel ini. Semoga bisa menambah ilmu untuk menjadi web designer profesional

Apa fungsi kelas dalam CSS?

Apa fungsi id dan kelas di CSS?

Bagaimana cara menulis pemilih dengan teknik kelas?

Apa kelas Selector di CSS *?