Hostingheaderbarlogoj
Join InMotion Hosting for $3.49/mo & get a year on Tuts+ FREE (worth $180). Start today.
Advertisement

30 CSS Selector Yang Harus Anda Ketahui

by
This post is part of a series called CSS3 Mastery.
10 CSS3 Properties you Need to be Familiar With
Getting to Work with CSS3 Power Tools

Indonesian (Bahasa Indonesia) translation by Mahesa Kama (you can also view the original English article)

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 id, class, and descendant selectors? Pada perkembangannya CSS selalu mengalami perubahan fitur pada setiap versinya (yang terbaru adalah CSS3). Hingga sampai saat ini banyak penggunaan CSS selector yang masih awam bagi sebagian orang. Harus anda ketahui bahwa CSS3 sebagian besar hanya di support oleh web browser modern.

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 margin dan paddinguntuk setiap id maupun class. Meskipun ini cara yang cepat, namun ini bukanlah hal yang tepat. Saya tidak merekomendasikan anda menggunakan ini dalam kode CSS anda. Ini akan membuat file CSS semakin berat jika diakses pada browser. Tapi jika diperlukan ada baiknya anda gunakan cara seperti berikut.

Sebuah * bisa juga digunakan dengan child selectors.

#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 id. Ini adalah cara yang mudah pada penggunaan yang paling umum, namun berhati-hati ketika menggunakan selektor id.

Tanyakan kepada diri anda sendiri: apakah anda memang perlu untuk menerapkan id pada elemen ini?

Selector id sesungguhnya bersifat kaku dan tidak memungkinkan untuk digunakan kembali pada element yang lainnya. Jika memungkinkan, lebih baik gunakan class untuk mendifinisikan element yang ingin anda beri nilai.

Lihat Demo

Untuk CSS di atas kompatibel dengan browser berikut:

  • IE6+
  • Firefox
  • Chrome
  • Safari
  • Opera

3. .X

.error {
color: red;
}

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 (.).

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 descendant selector. Bila Anda perlu untuk lebih spesifik dengan selector anda, Anda dapat menggunakan selector ini. Sebagai contoh jika anda menargetkan semua tag anchor, Anda hanya perlu menargetkan sebuah selector yang berada dalam suatu selector induknya.

Pro-tip - Jika anda membuat syntax CSS seperti X Y Z A B.error, 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 id atau class. Jika Anda perlu untuk menargetkan semua daftar unordered, gunakan ul {…} atau jika perlu menargetkan link, gunakan a {…}.

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 :link pseudo-class untuk menargetkan semua tag yang belum diklik.

Atau, kami juga menggunakan :visited pseudo class, memungkinkan kita untuk menerapkan styling khusus untuk hanya tag anchor pada halaman yang telah diklik atau telah dikunjungi.

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

Lihat Demo

Untuk CSS di atas kompatibel dengan browser berikut:

  • IE7+
  • Firefox
  • Chrome
  • Safari
  • Opera

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. Gimana? Sudah mulai mual melihat CSS yang membuat kepala anda jadi pusing? Jadi, belajarnya pelan-pelan saja ya..

Lihat Demo

Untuk CSS di atas kompatibel dengan browser berikut:

  • IE7+
  • Firefox
  • Chrome
  • Safari
  • Opera

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?

Lihat Demo

Untuk CSS di atas kompatibel dengan browser berikut:

  • IE7+
  • Firefox
  • Chrome
  • Safari
  • Opera

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.

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

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 ^ dan &, untuk referensi awal dan akhir dari masing-masing string.

Lihat Demo

Untuk CSS di atas kompatibel dengan browser berikut:

  • IE7+
  • Firefox
  • Chrome
  • Safari
  • Opera

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.

Perhatikan bahwa kita tidak mencari http:// itu tidak perlu, dan tidak memperhitungkan url yang dimulai dengan https://.

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

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 *.jpg. Perlu diingat bahwa ini pasti tidak akan bekerja untuk *.gif dan *.png.

Lihat Demo

Untuk CSS di atas kompatibel dengan browser berikut:

  • IE7+
  • Firefox
  • Chrome
  • Safari
  • Opera

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

a[data-filetype="image"] {
 color: red;
}

Lihat kembali ke nomor delapan. Bagaimana kita mengimbangi berbagai jenis gambar: png, jpeg, jpg, gif? Nah, kita bisa membuat beberapa penyeleksi, seperti:

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 data-filetype kami untuk setiap anchor yang memiliki link ke gambar?

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

Untuk CSS di atas kompatibel dengan browser berikut:

  • IE7+
  • Firefox
  • Chrome
  • Safari
  • Opera

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 ~ memungkinkan kita untuk menargetkan atribut yang memiliki daftar spasi yang dipisahkan nilai.

Mulai dengan atribut khusus dari nomor lima belas di atas, kita bisa membuat data-info atribut, yang dapat menerima daftar dipisahkan dengan spasi dari apa pun yang kita butuhkan untuk membuat catatan. Dalam hal ini, kita akan membuat catatan dari link eksternal dan link ke gambar - hanya untuk contoh.

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

Untuk CSS di atas kompatibel dengan browser berikut:

  • IE7+
  • Firefox
  • Chrome
  • Safari
  • Opera

17. X:checked

input[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 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.

.clearfix:after {
  content: "";
  display: block;
  clear: both;
  visibility: hidden;
  font-size: 0;
  height: 0;
  }

.clearfix { 
 *display: inline-block; 
 _height: 1%;
}

Hack ini menggunakan :after pseudo class untuk menambahkan spasi setelah elemen, dan kemudian menghapusnya. Ini adalah trik yang sangat baik untuk anda miliki, terutama dalam kasus-kasus ketika overflow: hidden; Metode ini tidak mungkin bekerja.

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

div: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!

Perlu diingat bahwa versi lama dari Internet Explorer tidak merespon ketika :hover pseudo-class jika diterapkan pada selector apa pun, selain sebuah tag anchor.

Anda akan sering menggunakan selector ini saat mengajukan permintaan. Misalnya, border-bottom untuk tag anchor, ketika cursor melewati sebuah elemen.

a:hover {
 border-bottom: 1px solid black;
}

Pro-tip - border-bottom: 1px solid black; terlihat lebih baik daripada text-decoration: underline;.

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)

div:not(#container) {
 color: blue;
}

negation pseudo class sangatlah bermanfaat. Katakanlah saya ingin memilih semua div, kecuali untuk satu yang memiliki id container. Selector di atas akan bekerja dengan sempurna.

Atau, jika saya ingin memilih setiap elemen tunggal (tidak disarankan) kecuali untuk tag paragraf, kita bisa lakukan:

*:not(p) {
color: green;
}
Lihat Demo

Untuk CSS di atas kompatibel dengan browser berikut:

  • IE9+
  • Firefox
  • Chrome
  • Safari
  • Opera

21. X::pseudoElement

p::first-line {
 font-weight: bold;
 font-size: 1.2em;
}

Kita dapat menggunakan pseudo element (ditunjuk oleh ::) fragmen gaya elemen, seperti baris pertama, atau huruf pertama. Perlu diingat bahwa ini harus diterapkan untuk memblokir elemen-elemen tingkat untuk berlaku.

Sebuah pseudo-elemen terdiri dari dua titik dua ::

Target the First Letter of a Paragraph

p::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 Paragraph

p::first-line {
 font-weight: bold;
 font-size: 1.2em;
}

Demikian pula, :: link ini pertama elemen semu akan, seperti yang diharapkan, gaya baris pertama dari elemen saja.

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

li:nth-child(3) {
 color: red;
}

Apakah anda pernah mengalami ketika kita tidak punya cara untuk menargetkan elemen tertentu dalam tumpukan? Sebuah nth-child pseoudo class dapat memecahkan masalah itu!

Harap dicatat bahwa nth-child menerima integer sebagai parameter, namun, hal ini tidak berbasis nol. Jika Anda ingin menargetkan daftar item yang kedua, menggunakan li:nth-child(2).

Kita bahkan dapat menggunakan ini untuk memilih satu set variabel anak-anak. Sebagai contoh, kita bisa melakukan li:nth-child(4n) untuk memilih setiap item daftar keempat.

Lihat Demo

Untuk CSS di atas kompatibel dengan browser berikut:

  • IE9+
  • Firefox 3.5+
  • Chrome
  • Safari

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

li:nth-last-child(2) {
 color: red;
}

Bagaimana jika Anda memiliki daftar besar item dalam ul, dan hanya diperlukan untuk mengakses, katakanlah, ketiga item terakhir? Daripada melakukan li:nth-child(397), Anda malah bisa menggunakan nth-child pseudo class.

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)

ul:nth-of-type(3) {
 border: 1px solid black;
}

Akan ada saat-saat dimana anda harus memilih sebuah child, Anda perlu memilih sesuai dengan type elemen.

Bayangkan mark-up yang berisi lima daftar unordered. Jika Anda ingin menerapkan style hanya untuk ul ketiga, dan tidak memiliki id yang unik untuk menghubungkan ke dalamnya, Anda bisa menggunakan nth-of-type(n) pseudo class. Dalam potongan di atas, hanya ul ketiga akan memiliki perbatasan di sekitarnya.

Lihat Demo

Untuk CSS di atas kompatibel dengan browser berikut:

  • IE9+
  • Firefox 3.5+
  • Chrome
  • Safari

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 nth-last-of-type akan dimulai pada akhir daftar selector, dan bekerja dengan cara kami untuk kembali menargetkan elemen yang diinginkan.

Untuk CSS di atas kompatibel dengan browser berikut:

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

26. X:first-child

ul 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 border-top dan border-bottom. Nah, dengan pengaturan itu, pertama dan terakhir item dalam set yang akan terlihat agak ganjil.

Banyak web desainer menerapkan kelas first dan last untuk mengkompensasi hal ini. Sebaliknya, Anda dapat menggunakan pseudo class tersebut.

Lihat Demo

Untuk CSS di atas kompatibel dengan browser berikut:

  • IE7+
  • Firefox
  • Chrome
  • Safari
  • Opera

27. X:last-child

ul > li:last-child {
 color: green;
}

Ini adalah kebalikan dari first-child, last-child menargetkan item terakhir dari parent elemen.

Contoh

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

CSS

ul {
 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 ul, dan menerapkan border pada li untuk menegaskan style dari li

Styled List

Untuk menambah kedalaman daftar Anda, menerapkan border-bottom pada setiap li yang satu atau dua warna lebih gelap dari warna latar belakang li itu. Selanjutnya, menerapkan border-top 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 :first-child dan :last-child pseudo class untuk memperbaiki hal ini.

li:first-child {
  border-top: none;
}

li:last-child {
 border-bottom: none;
}
Fixed

Haha, ini dapat memecahkan masalah...!

Lihat Demo

Untuk CSS di atas kompatibel dengan browser berikut:

  • IE9+
  • Firefox
  • Chrome
  • Safari
  • Opera

Ehemm - IE8 supported :first-child, tapi tidak untuk :last-child.

28. X:only-child

div p:only-child {
 color: red;
}

Anda mungkin tidak akan menemukan diri Anda menggunakan only-child pseudo class terlalu sering. Meskipun demikian, mungkin saja sewaktu-waktu Anda akan membutuhkannya.

Hal ini memungkinkan Anda untuk menargetkan elemen-elemen yang merupakan anak tunggal dari induknya. Sebagai contoh, referensi potongan di atas, hanya paragraf yang merupakan only-child dari div tersebut akan berwarna, merah.

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 div kedua akan tidak ditargetkan; hanya div pertama. Segera setelah Anda menerapkan lebih dari satu child ke elemen, only-child pseudo class akan berhenti berlaku.

Lihat Demo

Untuk CSS di atas kompatibel dengan browser berikut:

  • IE9+
  • Firefox
  • Chrome
  • Safari
  • Opera

29. X:only-of-type

li: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 ul, yang hanya memiliki daftar item tunggal.

Pertama, tanyakan pada diri Anda bagaimana Anda akan menyelesaikan tugas ini? Anda bisa melakukan ul li, tapi, ini akan menargetkan semua item daftar. Satu-satunya solusi adalah dengan menggunakan only-of-type.

ul > li:only-of-type {
 font-weight: bold;
}
Lihat Demo

Untuk CSS di atas kompatibel dengan browser berikut:

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

30. X:first-of-type

First-of-type pseudo class memungkinkan Anda untuk memilih saudara pertama dari jenisnya.

Pengujian

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

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

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 Dua

Pilihan lain adalah dengan menggunakan pemilih yang berdekatan.

p + ul li:last-child {
 font-weight: bold;
}

Dalam skenario ini, kita menemukan bahwa ul segera melanjutkan tag p, dan kemudian menemukan last child dari elemen.

Solusi ke Tiga

Kita 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 ul pertama pada halaman, dan kemudian menemukan item daftar pertama, tapi mulai dari bawah! :)

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!

Advertisement