CSS Selector

Sebelum kita memulai pembahasan tentang tipe-tipe selector di CSS, mari kita mengenal cara" menulis kode-kode CSS ya teman".

TYPE SELECTOR

'Type Selector' CSS mencocokan elemen dengan nama node. Dengan kata lain, itu memilih semua elemen dari jenis yang diberikan dalam dokumen.

CSS:

HTML:

<p>Contoh Type Selector.</p>
    <a>Contoh Type Selector.</a>
    <p>Contoh Type Selector.</p>
    

Hasil:

ATTRIBUTE SELECTOR

'Attribute Selector CSS' mencocokkan elemen berdasarkan keberadaan atau nilai atribut tertentu.

CSS:

/* Semua div dengan atribut 'lang' adalah tebal. */
    div[lang] {
      font-weight: bold;
    }
    
    /* Semua div tanpa atribut `lang` adalah italic. */
    div:not([lang]) {
      font-style: italic;
    }
    
    /* Semua div dalam bahasa english berwarna biru. */
    div[lang~="en-us"] {
      color: blue;
    }
    
    /* Semua div dalam bahasa portugis berwarna hijau. */
    div[lang="pt"] {
      color: green;
    }
    
    /* Semua div dalam bahasa Mandarin berwarna merah. */
    div[lang|="zh"] {
      color: red;
    }
    
    /* Semua div dalam bahasa Mandarin Kuno
       `data-lang` berwarna ungu. */
    /* Note: kamu bisa menggunakan atribut hyphernated
       tanpa tanda kutip */
    div[data-lang="zh-TW"] {
      color: purple;
    }

HTML:

<div lang="en-us en-gb en-au en-nz">Hello World!</div>
    ="pt">Olá Mundo!</div>
    <div lang="zh-CN">世界您好！</div>
    <div lang="zh-TW">世界您好！</div>
    <div data-lang="zh-TW">世界您好！</div>

Hasil:

ID SELECTOR

CSS ID Selector menyamakan elemen dari value atribut ID. Agar elemen tersebut dapat dipilih, atribut id harus sama persis dengan value yang ada di selector nya.

/* Elemen dengan id="demo" */
    #demo {
      border: red 2px solid;
    
CSS:

#identified {
      background-color: skyblue;
    }
    

HTML:

<div id="identified">This div has a special ID on it!</div>
    <div>This is just a regular div.</div>

Hasil:

This div has a special ID on it!

CLASS SELECTOR:

Class Selector CSS menyamakan elemen dari kontennya atribut class.

CSS:

HTML:

Hasil:

CHILD and DESCENDANT SELECTOR

Child Selector digunakan untuk menyamakan yang darimana adalah anak dari elemen tersebut.

dan

Descendant Selector digunakan untuk menyamakan yang darimana adalah keturunan dari elemen tersebut.

CSS:

HTML:

Hasil: