Cara menggunakan css not attribute

The :not() pseudo-class has a number of that you should be aware of before using it.

The :not() pseudo-class requires a comma-separated list of one or more selectors as its argument. The list must not contain another negation selector or a pseudo-element.

:not( <complex-selector-list> )

There are several unusual effects and outcomes when using :not() that you should keep in mind when using it:

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

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

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

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

Sebuah

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

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

Untuk CSS di atas kompatibel dengan browser berikut:

• IE6+
• Firefox
• Chrome
• Safari
• Opera

2. #X

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

Awalan simbol hash / pagar (#) memungkinkan kita untuk memberi style pada

li a {
text-decoration: none;
}

li a {
text-decoration: none;
}

Tanyakan kepada diri anda sendiri: apakah anda memang perlu untuk menerapkan

li a {
text-decoration: none;
}

9 pada elemen ini?

Selector

li a {
text-decoration: none;
}

Lihat Demo

Untuk CSS di atas kompatibel dengan browser berikut:

• IE6+
• Firefox
• Chrome
• Safari
• Opera

3. .X

.error {
color: red;
}

Ini adalah sebuah

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

li a {
text-decoration: none;
}

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

Lihat Demo

Untuk CSS di atas kompatibel dengan browser berikut:

• IE6+
• Firefox
• Chrome
• Safari
• Opera

4. X Y

li a {
text-decoration: none;
}

Berikutnya adalah

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

Pro-tip - Jika anda membuat syntax CSS seperti

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

3, berarti anda sedang melakukan hal yang salah. Bertanya pada diri anda sendiri, apakah hal itu benar-benar diperlukan.

Lihat Demo

Untuk 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 pada suatu elemen tertentu? Misalkan saja pada link (a). Hal ini seharusnya jangan dibuat sulit, anda tidak perlu lagi menggunakan selector 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

Untuk CSS di atas kompatibel dengan browser berikut:

• IE6+
• Firefox
• Chrome
• Safari
• Opera

6. X:visited and X:link

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

Jadi di sini, kami menggunakan

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

Atau, kami juga menggunakan

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

Lihat Demo

Untuk CSS di atas kompatibel dengan browser berikut:

• IE7+
• Firefox
• Chrome
• Safari
• Opera

7. X + Y

ul + p {
 color: red;
}

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

Lihat Demo

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

Sebuah 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 combinator cabang (anak). Bahkan, dianjurkan ketika bekerja dengan JavaScript berbasis CSS selector.

Lihat Demo

Untuk CSS di atas kompatibel dengan browser berikut:

• IE7+
• Firefox
• Chrome
• Safari
• Opera

9. X ~ Y

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

Combinator ini mirip dengan

ul + p {
 color: red;
}

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

Lihat Demo

Untuk CSS di atas kompatibel dengan browser berikut:

• IE7+
• Firefox
• Chrome
• Safari
• Opera

10. X[title]

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

Disebut sebagai attributes selector, dalam contoh kita di atas, ini akan memilih tag anchor yang memiliki atribut

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

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

Lihat Demo

Untuk CSS di atas kompatibel dengan browser berikut:

• IE7+
• Firefox
• Chrome
• Safari
• Opera

11. X[href="foo"]

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

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.

Perhatikan bahwa kita sedang membungkus sebuah nilai di dalam tanda kutip (“…”). Jangan lupa juga untuk melakukan hal ini ketika menggunakan JavaScript CSS selector. Jika memungkinkan, selalu menggunakan selector CSS3 pada metode yang lain.

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 Demo

Untuk CSS di atas kompatibel dengan browser berikut:

• IE7+
• Firefox
• Chrome
• Safari
• Opera

12. X[href*="nettuts"]

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

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

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

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

Lihat Demo

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

Perhatikan bahwa kita tidak mencari

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

5 itu tidak perlu, dan tidak memperhitungkan url yang dimulai dengan

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

6.

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 Demo

Untuk CSS di atas kompatibel dengan browser berikut:

• IE7+
• Firefox
• Chrome
• Safari
• Opera

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

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

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

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

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

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

Lihat Demo

Untuk CSS di atas kompatibel dengan browser berikut:

• IE7+
• Firefox
• Chrome
• Safari
• Opera

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

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

Lihat kembali ke nomor delapan. Bagaimana kita mengimbangi 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 sendiri 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 mengaitkannya di tempat, kita bisa menggunakan selector atribut standar untuk menargetkan anchor khusus.

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

Lihat Demo

Untuk CSS di atas kompatibel dengan browser berikut:

• IE7+
• Firefox
• Chrome
• Safari
• Opera

16. X[foo~="bar"]

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

Berikut adalah salah satu khusus yang akan kesan teman-teman Anda. Tidak terlalu banyak orang 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>

Mulai dengan atribut khusus dari nomor lima belas di atas, kita bisa 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 markup di tempat, sekarang kita dapat menargetkan setiap tag yang memiliki salah satu dari nilai-nilai tersebut, dengan menggunakan trik ~ atribut selector.

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

Cukup bagus ya?

Lihat Demo

Untuk CSS di atas kompatibel dengan browser berikut:

• IE7+
• Firefox
• Chrome
• Safari
• Opera

17. X:checked

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

Pseudo class ini hanya akan menargetkan pengguna elemen interface yang telah diperiksa - seperti radio button atau check box. Sangat sederhana bukan?

Lihat Demo

Untuk CSS di atas kompatibel dengan browser berikut:

• IE9+
• Firefox
• Chrome
• Safari
• Opera

18. X:after

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

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

Hack ini menggunakan

 <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 lain ini, lihat tips cepat yang saya buat untuk menciptakan efek shadow dengan CSS3. .

Menurut spesifikasi CSS3 Selectors, Anda harus secara teknis menggunakan sintaks elemen semu 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. Namun, untuk tetap kompatibel, pengguna akan menerima penggunaan tanda titik dua tunggal juga. Bahkan, pada titik ini, itu lebih cerdas untuk menggunakan versi titik dua tunggal dalam proyek Anda.

Untuk CSS di atas kompatibel dengan browser berikut:

• IE8+
• Firefox
• Chrome
• Safari
• Opera

19. X:hover

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

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!

Perlu diingat bahwa versi lama dari Internet Explorer tidak merespon ketika

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

00 pseudo-class jika diterapkan pada selector apa pun, selain sebuah tag anchor.

Anda akan sering menggunakan selector ini saat mengajukan 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.

Untuk CSS di atas kompatibel dengan browser berikut:

• IE6+ (In IE6, :hover must be applied to an anchor element)
• Firefox
• Chrome
• Safari
• Opera

20. X:not(selector)

#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 tunggal (tidak disarankan) kecuali untuk tag paragraf, kita bisa lakukan:

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

Lihat Demo

Untuk 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 (ditunjuk oleh

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

Target the First Letter of a Paragraph

.error {
color: red;
}

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 Paragraph

#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 sebelumnya notasi satu-usus untuk pseudo-elemen diperkenalkan di tingkat CSS 1 dan 2 (yaitu :first-line, :first-letter, :before dan :after). Kompatibilitas ini tidak diperbolehkan untuk pseudo-elemen baru yang diperkenalkan dalam spesifikasi ini. "- Sumber

Lihat Demo

Untuk CSS di atas kompatibel dengan browser berikut:

• IE6+
• Firefox
• Chrome
• Safari
• Opera

22. X:nth-child(n)

.error {
color: red;
}

Apakah anda pernah mengalami ketika kita tidak punya cara untuk menargetkan elemen tertentu dalam tumpukan? Sebuah

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

Harap dicatat bahwa

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

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

Kita bahkan dapat menggunakan ini untuk memilih satu set variabel anak-anak. Sebagai contoh, kita bisa melakukan

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

Lihat Demo

Untuk CSS di atas kompatibel dengan browser berikut:

• IE9+
• Firefox 3.5+
• Chrome
• Safari

23. X:nth-last-child(n)

.error {
color: red;
}

Bagaimana jika Anda memiliki daftar besar item dalam

ul + p {
 color: red;
}

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

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

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 Demo

Untuk 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 saat-saat dimana anda harus memilih sebuah

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

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

Bayangkan mark-up yang berisi lima daftar unordered. Jika Anda ingin menerapkan style hanya untuk

ul + p {
 color: red;
}

li a {
text-decoration: none;
}

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

ul + p {
 color: red;
}

Lihat Demo

Untuk CSS di atas kompatibel dengan browser berikut:

• IE9+
• Firefox 3.5+
• Chrome
• Safari

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

.error {
color: red;
}

Kemudian, untuk tetap konsisten, kita juga bisa menggunakan

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

Untuk CSS di atas kompatibel dengan browser berikut:

• IE9+
• Firefox 3.5+
• Chrome
• Safari
• Opera

26. X:first-child

.error {
color: red;
}

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

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

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

Banyak web desainer menerapkan kelas

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

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

Lihat Demo

Untuk CSS di atas kompatibel dengan browser berikut:

• IE7+
• Firefox
• Chrome
• Safari
• Opera

27. X:last-child

.error {
color: red;
}

Ini adalah kebalikan dari

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

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

Contoh

Mari kita membangun sebuah contoh sederhana untuk menunjukkan salah satu kemungkinan penggunaan kelas-kelas ini. Kami akan membuat daftar item yang bergaya.

Markup

.error {
color: red;
}

Tidak ada yang istimewa di sini; hanya daftar sederhana.

CSS

.error {
color: red;
}

Styling ini akan merubah background, menghapus browser-default padding pada

ul + p {
 color: red;
}

ul + p {
 color: red;
}

ul + p {
 color: red;
}

Untuk menambah kedalaman daftar Anda, menerapkan

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

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

ul + p {
 color: red;
}

8 itu. Selanjutnya, menerapkan

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

24 dengan beberapa nuansa ringan.

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

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

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

li a {
text-decoration: none;
}

Haha, ini dapat memecahkan masalah...!

Lihat Demo

Untuk CSS di atas kompatibel dengan browser berikut:

• IE9+
• Firefox
• Chrome
• Safari
• Opera

Ehemm - IE8 supported

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

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

28. X:only-child

li a {
text-decoration: none;
}

Anda mungkin tidak akan menemukan diri Anda menggunakan

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

Hal ini memungkinkan Anda untuk menargetkan elemen-elemen yang merupakan anak tunggal dari induknya. Sebagai contoh, referensi potongan di atas, hanya paragraf yang merupakan

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

Mari kita asumsikan dengan markup berikut.

li a {
text-decoration: none;
}

Dalam hal ini, paragraf

ul + p {
 color: red;
}

ul + p {
 color: red;
}

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

Lihat Demo

Untuk CSS di atas kompatibel dengan browser berikut:

• IE9+
• Firefox
• Chrome
• Safari
• Opera

29. X:only-of-type

li a {
text-decoration: none;
}

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

ul + p {
 color: red;
}

Pertama, tanyakan pada diri Anda bagaimana Anda akan menyelesaikan tugas ini? Anda bisa melakukan

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

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

li a {
text-decoration: none;
}

Lihat Demo

Untuk CSS di atas kompatibel dengan browser berikut:

• IE9+
• Firefox 3.5+
• Chrome
• Safari
• Opera

30. X:first-of-type

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

Pengujian

Untuk lebih memahami hal ini, mari kita tes. Salin mark-up berikut ke dalam kode editor Anda:

li a {
text-decoration: none;
}

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 Pertama

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

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

li a {
text-decoration: none;
}

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 Dua

Pilihan lain adalah dengan menggunakan pemilih yang berdekatan.

li a {
text-decoration: none;
}

Dalam skenario ini, kita menemukan bahwa

ul + p {
 color: red;
}

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

Solusi ke Tiga

Kita bisa jengkel atau main-main seperti yang kita inginkan dengan pemilih ini.

li a {
text-decoration: none;
}

Kali ini, kita ambil

ul + p {
 color: red;
}

Lihat Demo

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