Apa itu CSS selektor ? Daftar CSS Selektor Lengkap ~ Liputan Blog

Apa itu CSS Selektor ?

CSS selektor adalah bagian dari konfigurasi CSS yang mendefinisikan tentang Elemen mana yang akan diataur.

HTMLCSSHasil

.blue {
   color:blue;
}

Pada kode diatas, .blue bertindak sebagai selektor, CSS diatas mengatur warna text untuk semua elemen dengan class blue.

1. Macam-macam CSS selektor

1.1 Berdasarkan Elemen

Selektor ini juga sering disebut sebagai selektor berdasarkan nama tag
Penulisan selektor ini dilakukan dengan cara menuliskan langsung nama elemen yang hendak diatur
Format penulisan: namaelemen

Contoh:

HTMLCSSHasil

p {
   color:blue;
}

HTMLCSSHasil

p {
   color:blue;
}

div {
   color:red;
}

1.2 Berdasarkan Class

Mengatur elemen dengan class tertentu
Penulisan selektor ini ditulis dengan cara menambahkan tanda titik (.) sebelum nama class
Format penulisan: .namaclass
Contoh:
HTMLCSSHasil
.blue { color:blue; }
Untuk mengatur elemen yang memiliki 2 class (atau lebih), pendefinisian selektor dilakukan seperti berikut (selektor ke-3 dibawah).
HTMLCSSHasil

.blue {
   color:blue; /* set warna menjadi biru untuk class blue */
}

.big {
   font-size:200%; /* set ukuran font menjadi sebesar 200% untuk class big*/
}

.blue.big { /* konfigurasi ini hanya akan diterapkan pada elemen yang memiliki class keduanya, untuk elemen dengan class blue saja atau big saja, konfigurasi tidak akan diterapkan */
text-decoration:underline; /* Memberikan garis bawah untuk class blue big */
}

1.3 Berdasarkan ID

Mengatur elemen dengan ID tertentu
Penulisan selektor berdasarkan ID ditulis dengan cara menambahkan tanda pagar (#) sebelum nama ID.
Format penulisan: #namaid
Contoh:
HTMLCSSHasil
#konten2 { color:blue; }

1.4 Berdasarkan Atribut

Ada banyak selektor berdasarkan atribut, hal ini seperti berdasarkan ketersediaan, awalan, akhiran dan beberapa lagi lainnya. Pada format penulisan semua selektor dibawah, value, kata, text bersifat Case sensitive.

1.4.1 Berdasarkan ketersediaan

Mengatur semua elemen yang memiliki atribut tertentu
Format penulisan: [namaatribut]
Contoh:
HTMLCSSHasil
[title] { color:blue; }

1.4.2 Berdasarkan Value

Mengatur semua elemen yang memiliki atribut dengan value tertentu
Format penulisan: [namaatribut="value"]
Contoh:
HTMLCSSHasil
[title="Blogger"] { color:blue; }

1.4.3 Mengandung Kata tertentu

Mengatur semua elemen yang memiliki atribut dengan value yang mengandung kata tertentu
Format penulisan: [namaatribut~="kata"]
Contoh:
HTMLCSSHasil
[title="Blogger"] { color:blue; }

Keterangan:

HTML

<p title='Blogger BelajarBlogger Belajar-Blogger'/>
<!-- Pada atribut "title" diatas, 
     apa yang dimaksud dengan "kata" adalah:
     - Blogger BelajarBlogger Belajar-Blogger
     - Blogger
     - BelajarBlogger
     - Belajar-Blogger
 -->

<p title='BelajarBlogger Belajar-Blogger'/>
<!-- Pada atribut "title" diatas, 
     apa yang dimaksud dengan "kata" adalah:
     - BelajarBlogger Belajar-Blogger
     - BelajarBlogger
     - Belajar-Blogger
 -->

1.4.4 Mengandung Text tertentu

Mengatur semua elemen yang memiliki atribut dengan value yang mengandung text tertentu
Format penulisan: [namaatribut*="text"]
Contoh:
HTMLCSSHasil
[title*="B"] { color:blue; }

Keterangan: Apa yang dimaksud dengan text diatas adalah karakter atau kombinasi beberapa karakter.
HTML
<p title='ABC'/>

1.4.5 Berdasarkan Awalan

Mengatur semua elemen yang memiliki atribut dengan value yang diawali dengan text tertentu
Format penulisan: [namaatribut^="text"]
Contoh:
HTMLCSSHasil
[title^="Blogger"] { color:blue; }

1.4.6 Berdasarkan Akhiran

Mengatur semua elemen yang memiliki atribut dengan value yang diakhiri dengan text tertentu
Format penulisan: [namaatribut$="text"]
Contoh:
HTMLCSSHasil
[title$="Blogger"] { color:blue; }

1.5 Semua elemen

Mengatur semua elemen. Selektor ini sering kali dikombinasikan dengan selektor Direct-children (Akan anda jumpai pada bagian 2.2.2 selanjutnya)
Format penulisan: *

Contoh:

HTMLCSSHasil

* {
   color:blue;
}
div > * {
   border:2px solid blue;
   padding:10px;
   margin-bottom:10px;
}

Selain beberapa selektor diatas, masih ada banyak selektor yang tersedia, adapun selektor-selektor lainnya ini dikenal dengan Pseudo-class. Pembahasan mengenai selektor-selektor ini akan dibahas terpisah. Anda bisa melihat lebih lanjut mengenai selektor Pseudo-class melalui link-link pada daftar dibawah (jika telah tersedia). Untuk daftar yang bukan berupa link, itu artinya materi belum tersedia pada blog ini. Manfaatkan pencarian google untuk mencari informasi terkait selektor yang bersangkutan. Anda juga bisa berlangganan artikel kami melalui formulir Berlangganan Artikel yang terdapat di bagian bawah blog ini untuk mendapatkan update materi-materi yang akan kami terbitkan selanjutnya.

::after
::before
::first-letter
::first-line
::selection
::palceholder
:empty
:first-child
:first-of-type
:last-child
:last-of-type
:nth-child(n)
:nth-last-child(n)
:nth-of-type(n)
:nth-last-of-type(n)
:only-of-type
:only-child
:active
:focus
:hover
:link
:visited
:valid
:invalid
:read-only
:read-write
:required
:optional
:checked
:disabled
:enabled
:in-range
:out-of-range
:indeterminate
:lang(language)
:root
:target
:not(selector)

2. Mengkombinasikan beberapa selektor

Kita bisa mengkombinasikan beberapa selektor untuk mengatur elemen berdasarkan kriteria tertentu dengan lebih spesifik. Hal ini seperti misalnya mengatur elemen p yang terdapat didalam elemen div, mengatur elemen p yang berada tepat setelah elemen div dan lain sebagainya.

2.1 Elemen yang relevan terhadap beberapa selektor

Format penulisan: selektor1selektor2selektorN
Penulisan selektor dilakukan dengan cara menggabungkan beberapa selektor (dua atau lebih) secara langsung tanpa pemisah
Konfigurasi hanya akan diterapkan pada elemen-elemen yang relavan dengan semua selektor

Contoh:

HTMLCSSHasil

/* Kofigurasi berikut hanya akan ditepkan pada 
elemen "p" yang memiliki class "b" */
p.b {
   color:blue;
}

HTMLCSSHasil

/* Konfigurasi berikut hanya akan diterapkan pada
elemen "p" yang memiliki class "b" dan dengan title "Blogger" */
p.b[title="Blogger"] {
   color:blue;
}

2.2 Mengatur Children (sub) dari elemen tertentu

Pada HTML, terdapat dua jenis children, dua jenis children ini adalah Children dan Direct-children. Pembahasan tentang dua istilah ini bisa anda baca pada post: Children dan Direct-children.

2.2.1 Children

Format penulisan: selektor1 selektor2
Fungsi:Mengatur elemen dengan selektor2 yang merupakan children dari elemen selektor1
Setiap selektor dipisahkan dengan spasi

Contoh:

HTMLCSSHasil

#mydiv div {
   border:2px solid black;
   color:blue;
   padding:10px;
   margin-bottom:10px;
}

2.2.2 Direct-children

Format penulisan: selektor1 > selektor2
Fungsi:Mengatur elemen dengan selektor2 yang merupakan direct-children dari elemen selektor1

Contoh:

HTMLCSSHasil

#mydiv > div {
   border:2px solid black;
   padding:10px;
   margin-bottom:10px;
}

2.3 Preceded selector: Mengatur elemen yang sebelumnya terdapat elemen tertentu (pada level yang sama)

Terdapat 2 jenis selektor preceded, dua jenis ini adalah Preceded dan Direct-preceded.

2.3.1 Preceded

Format penulisan: selektor1 ~ selektor2
Fungsi:Mengatur elemen dengan selektor2 yang berada setelah elemen dengan selektor1 pada level yang sama. Adapun posisi selektor1 tidak harus berada tepat sebelum selektor2 (bandingkan dengan direct-preceded).
Contoh:
HTMLCSSHasil
div ~ p { color:blue; }

2.3.2 Direct-preceded

Format penulisan: selektor1 + selektor2
Fungsi:Mengatur elemen dengan selektor2 yang berada Tepat setelah elemen dengan selektor1 pada level yang sama.
Contoh:
HTMLCSSHasil
div ~ p { color:blue; }

3. Menerapkan konfigurasi untuk beberapa selektor

Untuk mempersingkat penulisan konfigurasi, kita bisa menerapkan satu konfigurasi (blok kode) untuk beberapa selektor. Hal ini dilakukan ketika beberapa selektor memiliki beberapa konfigurasi properti yang sama. Adapun cara mempersingkat penulisan ini dilakukan dengan memisahkan setiap selektor dengan tanda koma (,).

Metode normalMetode singkat

div, p, span, .mydiv > * { color:blue; }

Liputan Blog

Apa itu CSS selektor ? Daftar CSS Selektor Lengkap