wiblogger

Apa itu CSS selektor ? Daftar CSS Selektor Lengkap

CSS Selektor lengkap

Daftar isi:
  1. Macam-macam CSS selektor
    1. Berdasarkan Elemen
    2. Berdasarkan Class
    3. Berdasarkan ID
    4. Berdasarkan Atribut
      1. Ketersediaan
      2. Value
      3. Kata tertentu
      4. Text tertentu
      5. Awalan
      6. Akhiran
    5. Semua Elemen
  2. Mengkombinasikan beberapa selektor
    1. Elemen yang relevan terhadap beberapa selektor
    2. Mengatur Children (sub) dari elemen tertentu
      1. Children
      2. Direct-children
    3. Preceded selector
      1. Preceded
      2. Direct-preceded
  3. Menerapkan konfigurasi untuk beberapa selektor



Apa itu CSS Selektor ?

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

<p class='blue'>Konten</p>
<p class='blue'>Konten</p>
<div>Konten</div>
.blue {
   color:blue;
}

Konten

Konten

Konten


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:
    <h2>Judul</h2>
    <p>Konten p1</p>
    <div>Konten div</div>
    <p>Konten p2</p>
    
    p {
       color:blue;
    }
    

    Judul

    Konten p1

    Konten div

    Konten p2


    <h2>Judul</h2>
    <p>Konten p1</p>
    <div>Konten div</div>
    <p>Konten p2</p>
    
    p {
       color:blue;
    }
    
    div {
       color:red;
    }
    

    Judul

    Konten p1

    Konten div

    Konten p2




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:
    <p class='blue'>Konten</p>
    <p class='blue'>Konten</p>
    <p>Konten</p>
    
    .blue {
       color:blue;
    }
    

    Konten

    Konten

    Konten


    Untuk mengatur elemen yang memiliki 2 class (atau lebih), pendefinisian selektor dilakukan seperti berikut (selektor 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; /* 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 */                      
    }
    
    
    

    Konten

    Konten

    Konten

    Konten




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:
    <p>Konten 1</p>
    <p id='konten2'>Konten 2</p>
    <p>Konten 3</p>
    
    #konten2 {
       color:blue;
    }
    

    Konten 1

    Konten 2

    Konten 3




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:
    <p title='Blogger'>Blogger</p>
    <p title='blogger'>blogger</p>
    <p>Tidak terdapat atribut</p>
    
    [title] {
       color:blue;
    }
    

    Blogger

    blogger

    Tidak terdapat atribut




1.4.2 Berdasarkan Value

  • Mengatur semua elemen yang memiliki atribut dengan value tertentu
  • Format penulisan: [namaatribut="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




1.4.3 Mengandung Kata tertentu

  • Mengatur semua elemen yang memiliki atribut dengan value yang mengandung kata tertentu
  • Format penulisan: [namaatribut~="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

  • Keterangan:
    <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:
    <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;
    }
    

    B

    Bc

    aB

    aBc

    b

  • Keterangan: Apa yang dimaksud dengan text diatas adalah karakter atau kombinasi beberapa karakter.

    <p title='ABC'/>
    <!-- Pada atribut "title" diatas, 
         apa yang dimaksud dengan "text" adalah:
         - A
         - AB
         - ABC
         - B
         - BC
         - C
     -->
    



1.4.5 Berdasarkan Awalan

  • Mengatur semua elemen yang memiliki atribut dengan value yang diawali dengan text tertentu
  • Format penulisan: [namaatribut^="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




1.4.6 Berdasarkan Akhiran

  • Mengatur semua elemen yang memiliki atribut dengan value yang diakhiri dengan text tertentu
  • Format penulisan: [namaatribut$="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




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

    p

    span



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:
    <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>
    
    /* Kofigurasi berikut hanya akan ditepkan pada 
    elemen "p" yang memiliki class "b" */
    p.b {
       color:blue;
    }
    

    Elemen = p, class = b

    Elemen = p, class = b, title = Blogger

    Elemen = div, class = b, title = Blogger

    <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>
    
    /* Konfigurasi berikut hanya akan diterapkan pada
    elemen "p" yang memiliki class "b" dan dengan title "Blogger" */
    p.b[title="Blogger"] {
       color:blue;
    }
    

    Elemen = p, class = b

    Elemen = p, class = b, title = Blogger

    Elemen = div, class = b, title = Blogger



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:
    <div id='mydiv'>
      #mydiv
      <div>
          #mydiv-div
          <div>#mydiv-div-div</div>
          <div>#mydiv-div-div</div>
      </div>
      <div>
          #div1-div
          <div>#mydiv-div-div</div>
          <div>#mydiv-div-div</div>
      </div>
    </div>
    <div>div outside #mydiv</div>
    
    #mydiv div {
       border:2px solid black;
       color:blue;
       padding:10px;
       margin-bottom:10px;
    }
    
    #mydiv
    #mydiv-div
    #mydiv-div-div
    #mydiv-div-div
    #mydiv-div
    #mydiv-div-div
    #mydiv-div-div
    div outside #mydiv


2.2.2 Direct-children

  • Format penulisan: selektor1 > selektor2
  • Fungsi:Mengatur elemen dengan selektor2 yang merupakan direct-children dari elemen selektor1
  • Contoh:
    <div id='mydiv'>
      #mydiv
      <div>
          #mydiv-div
          <div>#mydiv-div-div</div>
          <div>#mydiv-div-div</div>
      </div>
      <div>
          #div1-div
          <div>#mydiv-div-div</div>
          <div>#mydiv-div-div</div>
      </div>
    </div>
    <div>div outside #mydiv</div>
    
    #mydiv > div {
       border:2px solid black;
       padding:10px;
       margin-bottom:10px;
    }
    
    #mydiv
    #mydiv-div
    #mydiv-div-div
    #mydiv-div-div
    #mydiv-div
    #mydiv-div-div
    #mydiv-div-div
    div outside #mydiv



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:
    <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;
    }
    

    p

    p

    div

    p

    p

    div

    p

    p



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:
    <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;
    }
    

    p

    p

    div

    p

    p

    div

    p

    p




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

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



Next: Prioritas CSS: Bagaimana browser memilih mana konfigurasi yang akan digunakan


Bagikan ke:

Tambahkan komentar untuk:

Apa itu CSS selektor ? Daftar CSS Selektor Lengkap
Berlangganan Artikel
Kami akan mengirimkan berbagai referensi blogging pilihan langsung ke alamat email anda. Pastikan juga anda melakukan konfirmasi pada email yang bersangkutan untuk mengaktifkan layanan. Panduan bagaimana cara berlangganan artikel bisa anda baca disini.
×
Jangan tampilkan lagi