7 

days of WordPress plugins, themes & templates ­ for free!*  Start 7­Day Free Trial Ὕ
Skip to content

Advertisement

Code   Web Development

30 CSS Selector Yang Harus
Anda Ketahui
Jeffrey WaySep 25, 2020

  170 likes|  Read Time: 18 mins|   Bahasa Indonesia

Web Development Front­End HTML CSS CSS Selectors

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. *
1 * {
2  margin: 0;
3  padding: 0;
4 }

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

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

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
1 #container {
2  width: 960px;
3  margin: auto;
4 }

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
1 .error {
2 color: red;
3 }

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
1 li a {
2 text‐decoration: none;
3 }
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
1 a { color: red; }
2 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
1 a:link { color: red; }
2 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
1 ul + p {
2  color: red;
3 }

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
1 div#container > ul {
2 border: 1px solid black;
3 }

Perbedaan antara standar  X Y  dan  X > Y  akan menargetkan ke cabang

selector secara langsung. Sebagai contoh, perhatikan markup berikut.

01 <div id="container">
02    <ul>
03       <li> List Item
04         <ul>
05            <li> Child </li>
06         </ul>
07       </li>
08       <li> List Item </li>
      <li> List Item </li>
       <li> List Item </li>
09       <li> List Item </li>
10       <li> List Item </li>
11    </ul>
12 </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
1 ul ~ p {
2  color: red;
3 }

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]
1 a[title] {
2  color: green;
3 }

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"]
1 a[href="http://net.tutsplus.com"] {
2 color: #1f6053; /* nettuts green */
3 }

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"]
 1 a[href*="tuts"] {
2 color: #1f6053; /* nettuts green */
3 }

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"]
1 a[href^="http"] {
2  background: url(path/to/external/icon.png) no‐repeat;
3  padding‐left: 10px;
4 }

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"]
1 a[href$=".jpg"] {
2  color: red;
3 }

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  . Perlu diingat bahwa ini pasti
­ 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"]
1 a[data‐filetype="image"] {
2  color: red;
3 }

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

1 a[href$=".jpg"],
2 a[href$=".jpeg"],
3 a[href$=".png"],
4 a[href$=".gif"] {
5  color: red;
6 }

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

1 a[data‐filetype="image"] {
2  color: red;
3 }

Lihat Demo

Untuk CSS di atas kompatibel dengan browser berikut:
IE7+
Firefox
Chrome
Safari
Opera

16. X[foo~="bar"]
1 a[data‐info~="external"] {
2  color: red;
3 }
4  
5 a[data‐info~="image"] {
6  border: 1px solid black;
7 }

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

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

1 /* Target data‐info attr that contains the value "external" */
2 a[data‐info~="external"] {
3  color: red;
4 }
5  
6 /* And which contain the value "image" */
7 a[data‐info~="image"] {
8 border: 1px solid black;
9 }

Cukup bagus ya?

Lihat Demo

Untuk CSS di atas kompatibel dengan browser berikut:
IE7+
Firefox
Chrome
Safari
Opera

17. X:checked
1 input[type=radio]:checked {
 border: 1px solid black;
 1 input[type=radio]:checked {
2  border: 1px solid black;
3 }

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.

01 .clearfix:after {
02   content: "";
03   display: block;
04   clear: both;
05   visibility: hidden;
06   font‐size: 0;
07   height: 0;
08   }
09  
10 .clearfix { 
11  *display: inline‐block; 
12  _height: 1%;
}
 12  _height: 1%;
13 }

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
1 div:hover {
2 background: #e3e3e3;
3 }

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.

1 a:hover {
2  border‐bottom: 1px solid black;
3 }

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)
1 div:not(#container) {
2  color: blue;
}
 2  color: blue;
3 }

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:

1 *:not(p) {
2 color: green;
3 }

Lihat Demo

Untuk CSS di atas kompatibel dengan browser berikut:
IE9+
Firefox
Chrome
Safari
Opera

21. X::pseudoElement
1 p::first‐line {
2  font‐weight: bold;
3  font‐size: 1.2em;
4 }

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

1 p::first‐letter {
2  float: left;
3  font‐size: 2em;
4  font‐weight: bold;
5  font‐family: cursive;
6  padding‐right: 2px;
7 }

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

1 p::first‐line {
2  font‐weight: bold;
3  font‐size: 1.2em;
4 }

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. "­
 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)
1 li:nth‐child(3) {
2  color: red;
3 }

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:
Untuk CSS di atas kompatibel dengan browser berikut:
IE9+
Firefox 3.5+
Chrome
Safari

23. X:nth­last­child(n)
1 li:nth‐last‐child(2) {
2  color: red;
3 }

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)
 1 ul:nth‐of‐type(3) {
2  border: 1px solid black;
3 }

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)
1 ul:nth‐last‐of‐type(3) {
2  border: 1px solid black;
3 }

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
1 ul li:first‐child {
2  border‐top: none;
3 }

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
1 ul > li:last‐child {
2  color: green;
3 }

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

1 <ul>
2    <li> List Item </li>
3    <li> List Item </li>
4    <li> List Item </li>
5 </ul>

Tidak ada yang istimewa di sini; hanya daftar sederhana.

CSS

01 ul {
02  width: 200px;
03  background: #292929;
04  color: white;
05  list‐style: none;
06  padding‐left: 0;
07 }
08  
09 li {
10  padding: 10px;
11  border‐bottom: 1px solid black;
 border‐top: 1px solid #3c3c3c;
 11  border‐bottom: 1px solid black;
12  border‐top: 1px solid #3c3c3c;
13 }

Styling ini akan merubah background, menghapus browser­default padding
pada  ul , dan menerapkan border pada  li  untuk menegaskan style dari  li

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 {
 1 li:first‐child {
2   border‐top: none;
3 }
4  
5 li:last‐child {
6  border‐bottom: none;
7 }

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
1 div p:only‐child {
2  color: red;
3 }

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.

1 <div><p> My paragraph here. </p></div>
2  
3 <div>
4  <p> Two paragraphs total. </p>
5  <p> Two paragraphs total. </p>
6 </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
1 li:only‐of‐type {
2  font‐weight: bold;
3 }

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 .

1 ul > li:only‐of‐type {
2  font‐weight: bold;
3 }

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:

01 <div>
02  <p> My paragraph here. </p>
03  <ul>
04     <li> List Item 1 </li>
05     <li> List Item 2 </li>
06  </ul>
07  
08  <ul>
09     <li> List Item 3 </li>
10     <li> List Item 4 </li>
11  </ul>   
12 </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 .

1 ul:first‐of‐type > li:nth‐child(2) {
2  font‐weight: bold;
3 }

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.

1 p + ul li:last‐child {
2  font‐weight: bold;
3 }

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.

1 ul:first‐of‐type li:nth‐last‐child(1) {
2  font‐weight: bold;   
3 }

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!

Did you find this post useful?

  Yes   No

Want a weekly email summary?

Subscribe below and we’ll send you a weekly email summary of all new Code
tutorials. Never miss out on learning about the next big thing.

Sign up
 Jeffrey Way

I used to be the editor of Nettuts+ and head of web development 
courses at Tuts+.

jeffrey_way

 FEED  LIKE  FO LLO W

Advertisement Advertisement

LOOKING FOR SOMETHING TO HELP KICK START YOUR NEXT
PROJECT?

Envato Market has a range of items for
sale to help get you started.
 WordPress Plugins PHP Scripts
From $5 From $5

Unlimited Downloads  Over 9 Million Digital Assets
From $16.50/month Everything you need for your next
Get access to over one million creative creative project.
assets on Envato Elements.

QUICK LINKS ­ Explore popular categories

ENVATO TUTS+ JOIN OUR COMMUNITY HELP

About Envato Tuts+ Teach at Envato Tuts+ FAQ

Terms of Use Translate for Envato Tuts+ Help Center
Advertise Forums

30,820 1,316 50,290

Tutorials Courses Translations
Envato Envato Elements Envato Market Placeit by Envato Milkshake All

products Careers Sitemap

© 2022 Envato Pty Ltd. Trademarks and brands are the property of their respective owners.