Apa itu CSS Selektor? Daftar CSS Selektor Lengkap

CSS selektor adalah bagian dari konfigurasi/deklarasi CSS yang mendefinisikan tentang elemen mana yang akan diatur.

        
        <p class='blue'>Konten</p>
        <p class='blue'>Konten</p>
        <div>Konten</div>

        
        .blue {
          color:blue;
        }

Konten

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

Macam-macam CSS selektor

Berdasarkan Nama Elemen

Sering juga disebut sebagai selektor berdasarkan nama tag
Penulisan selektor dilakukan dengan cara menuliskan langsung nama elemen HTML terkait

Format penulisan: namaelemen

Contoh:

              
                <p>Konten p1</p>
                <div>Konten div</div>
                <p>Konten p2</p>

              
              p {
                color:blue;
              }

Konten p1

Konten div

Konten p2

Berdasarkan Class

Mengatur elemen dengan class tertentu
Penulisan selektor dilakukan dengan cara menambahkan tanda titik (.) sebelum nama class

Format penulisan: .namaclass

Contoh:

              
<p class='blue'>Konten</p>
<p class='blue'>Konten</p>
<p>Konten</p>

              
				.blue {
                  color:blue;
                }

Konten

Untuk mengatur elemen yang memiliki 2 class (atau lebih), pendefinisian selektor dilakukan seperti pada blok kode ke-3 dibawah.

              
              <p class='blue'>Konten</p>
              <p class='big'>Konten</p>
              <p class='blue big'>Konten</p>
              <p>Konten</p>

              
              .blue {color:blue}
              .big {font-size:200%}
              .blue.big {text-decoration:underline}

Konten

Berdasarkan ID

Mengatur elemen dengan ID tertentu
Penulisan selektor berdasarkan ID ditulis dengan cara menambahkan tanda pagar (#) sebelum nama ID.

Format penulisan: #namaid

                
                  <p>Konten 1</p>
                  <p id='konten2'>Konten 2</p>
                  <p>Konten 3</p>

                
                  #konten2 {color:blue}

Konten 1

Konten 2

Konten 3

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.

Berdasarkan ketersediaan atribut

Mengatur semua elemen yang memiliki atribut tertentu

Format penulisan: [nama-atribut]

Contoh:

                  
  <p title='Blogger'>Blogger</p>
  <p title='blogger'>blogger</p>
  <p>Tidak terdapat atribut</p>

                  
                   [title] {
                     color:blue;
                   }

Blogger

blogger

Tidak terdapat atribut

Berdasarkan value atribut

Mengatur semua elemen yang memiliki atribut dengan value tertentu

Format penulisan: [nama-atribut="value"]

Contoh:

                  
                  <p title='Blogger'>Blogger</p>
                  <p title='blogger'>blogger</p>
                  <p title='Belajar Blogger'>Belajar Blogger</p>

                  
[title="Blogger"] {
  color:blue;
}

Blogger

blogger

Belajar Blogger

Mengandung kata tertentu

Mengatur semua elemen yang memiliki atribut dengan value yang mengandung kata tertentu

Format penulisan: [nama-atribut~="kata"]

Contoh:

                  
<p title='Blogger'>Blogger</p>
<p title='blogger'>blogger</p>
<p title='Bloggers'>Bloggers</p>
<p title='Belajar Blogger'>Belajar Blogger</p>
<p title='Belajar-Blogger'>Belajar-Blogger</p>
<p title='Blogger-CSS'>Blogger-CSS</p>

                  
[title~="Blogger"] {
  color:blue;
}

Blogger

blogger

Bloggers

Belajar Blogger

Belajar-Blogger

Blogger-CSS

Mengandung Text tertentu

Mengatur semua elemen yang memiliki atribut dengan value yang mengandung text tertentu

Format penulisan: [nama-atribut*="text"]

Contoh:

                  
<p title='B'>B</p>
<p title='Bc'>Bc</p>
<p title='aB'>aB</p>
<p title='aBc'>aBc</p>
<p title='b'>b</p>

                  
[title*="B"] {
  color:blue;
}

aBc

Berdasarkan Awalan

Mengatur semua elemen yang memiliki atribut dengan value yang diawali dengan text tertentu

Format penulisan: [nama-atribut^="text"]

Contoh:

                  
<p title='Blogger'>Blogger</p>
<p title='blogger'>blogger</p>
<p title='Belajar Blogger'>Belajar Blogger</p>
<p title='Blogger CSS'>Blogger-CSS</p>
<p title='Blogger-CSS'>Blogger-CSS</p>
<p title='BloggerCSS'>Blogger-CSS</p>

                  
[title^="Blogger"] {
  color:blue;
}

Blogger

blogger

Belajar Blogger

Blogger CSS

Blogger-CSS

BloggerCSS

Berdasarkan Akhiran

Mengatur semua elemen yang memiliki atribut dengan value yang diakhiri dengan text tertentu

Format penulisan: [nama-atribut$="text"]

Contoh:

                  
<p title='Blogger'>Blogger</p>
<p title='blogger'>blogger</p>
<p title='Belajar Blogger'>Belajar Blogger</p>
<p title='Blogger CSS'>Blogger CSS</p>
<p title='CSSBlogger'>CSSBlogger</p>

                  
[title$="Blogger"] {
  color:blue;
}

Blogger

blogger

Belajar Blogger

Blogger CSS

CSSBlogger

Semua Elemen

Mengatur semua elemen. Selektor ini sering kali dikombinasikan dengan selektor Direct-children

Format penulisan: *

Contoh:

                  
<div>
<div>div-div</div>
<p>div-p</p>
</div>
<p>p</p>
<div>div</div>

                  
* {
  color:blue;
}

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

div-div

div-p

span

Lainnya

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.

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

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 di dalam elemen div, mengatur elemen p yang berada tepat setelah elemen div dan lain sebagainya.

Relevan terhadap beberapa selektor

Format penulisan: selektor1selektor2selektorN

Penulisan selektor dilakukan dengan cara menggabungkan beberapa selektor (dua atau lebih) secara langsung tanpa pemisah.

Contoh 1:

                  
<p class='b'>Elemen = p, class = b</p>
<p class='b' title='Blogger'>Elemen = p, class = b, title = Blogger</p>
<div class='b' title='Blogger'>Elemen = div, class = b, title = Blogger</div>

                  
p.b {
  color:blue;
}

Elemen = p, class = b

Elemen = p, class = b, title = Blogger

Elemen = div, class = b, title = Blogger

Selektor p.b merujuk pada elemen p yang memiliki class b

Contoh 2:

                  
<p class='b'>Elemen = p, class = b</p>
<p class='b' title='Blogger'>Elemen = p, class = b, title = Blogger</p>
<div class='b' title='Blogger'>Elemen = div, class = b, title = Blogger</div>

                  
p.b[title="Blogger"] {
  color:blue;
}

Elemen = p, class = b

Elemen = p, class = b, title = Blogger

Elemen = div, class = b, title = Blogger

Selektor p.b[title="Blogger"] merujuk pada elemen p yang memiliki class b serta memiliki atribut title dengan value Blogger

Sub dari elemen tertentu

Pada HTML, terdapat 2 istilah yang digunakan berkaitan dengan sub. Dua istilah ini adalah Children dan Direct Children - Selengkapnya.

Children

Format penulisan: selektor1 selektor2

Mengatur elemen dengan selektor2 yang merupakan children dari elemen selektor1. Setiap selektor dipisahkan dengan Spasi

Contoh:

                      
<div id='mydiv'>
  #mydiv
  <p>
    #mydiv > p
    <div>#mydiv > p > div</div>
  </p>
  <div>#mydiv > div</div>
</div>
<div>div outside #mydiv</div>

                      
#mydiv div {
  color:blue;
}

#mydiv

#mydiv > p
#mydiv > p > div

#mydiv > div

div outside #mydiv

Direct Children

Format penulisan: selektor1 > selektor2

Mengatur elemen dengan selektor2 yang merupakan direct children dari elemen selektor1.

Contoh:

                      
<div id='mydiv'>
  #mydiv
  <p>
    #mydiv > p
    <div>#mydiv > p > div</div>
  </p>
  <div>#mydiv > div</div>
</div>
<div>div outside #mydiv</div>

                      
#mydiv > div {
  color:blue;
}

#mydiv

#mydiv > p
#mydiv > p > div

#mydiv > div

div outside #mydiv

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.

Preceded

Format penulisan: selektor1 ~ selektor2

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:

                      
<p>p</p>
<p>p</p>
<div>div</div>
<p>p</p>
<p>p</p>
<div>div</div>
<div>
  <p>p</p>
</div>
<p>p</p>

                
div ~ p {
  color:blue;
}

div

Direct Preceded

Format penulisan: selektor1 + selektor2

Mengatur elemen dengan selektor2 yang berada tepat setelah elemen dengan selektor1 pada level yang sama.

Contoh:

                      
<p>p</p>
<p>p</p>
<div>div</div>
<p>p</p>
<p>p</p>
<div>div</div>
<div>
  <p>p</p>
</div>
<p>p</p>

                
div + p {
  color:blue;
}

div

Menerapkan satu blok kode untuk beberapa grup selektor

Suatu blok kode dapat memiliki beberapa grup selektor. Hal ini dilakukan ketika beberapa selektor memiliki deklarasi yang sama. Adapun cara mempersingkat penulisan ini dilakukan dengan memisahkan setiap selektor dengan tanda koma.

	  
div {
  color:blue;
}

p {
  color:blue;
}

span {
  color:blue;
}

.mydiv > * {
  color:blue;
}

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

Modul CSS Selanjutnya: Prioritas CSS: Bagaimana browser memilih mana konfigurasi yang akan digunakan