CSS Universal Selector (*) digunakan untuk menyeleksi setiap single element dari tipe element apapun. Artinya, penyeleksian berlaku secara keseluruhan untuk semua single element. Penggunaan Universal Selector ditandai dengan karakter arterisk * yang dapat digunakan secara berdiri sendiri ataupun digabungkan dengan tipe selektor lainnya.


Syntax
Penggunaan Sintaksis *

* {
Property: Value;  /* Deklarasi CSS */
}

Example
Contoh *(universal selector)

HTML
<!DOCTYPE html>
<html>
  <head>
    <title>CSS * Selector - contoh 1</title>
  </head>
  <body>
    <p>Ini adalah paragraf</p>
    <table class="table contoh1">
      <tr>
        <td>Kolom 1</td>
        <td>Kolom 2</td>
        <td>Kolom 3</td>
      </tr>
    </table>
    <ol>
      <li>List 1</li>
      <li>List 2</li>
    </ol>
  </body>
</html>
CSS
* {
  font-family: Arial, Helvetica, sans-serif;
  color: red;
}

Kode diatas, menyeleksi semua single element apapun, agar memiliki font Arial atau Helvetica dan warna text green (hijau).

Contoh Lengkap

Contoh source code lengkap disertai dengan link "editor" untuk mencoba (try it) dan melihat hasil (preview) kode.

SOURCE
<!DOCTYPE html>
<html>
  <head>
    <title>CSS universal Selector - apacara.com</title>
    <style>
      * {
          margin: 0;
          padding: 0;
      }
    </style>
  </head>
  <body>
    <p>Ini adalah paragraf</p>
    <table class="table contoh1">
      <tr>
        <td>Kolom 1</td>
        <td>Kolom 2</td>
        <td>Kolom 3</td>
      </tr>
      <tr>
        <td>Baris 1</td>
        <td>Baris 2</td>
        <td>Baris 3</td>
      </tr>
    </table>
    <ol>
      <li>List 1</li>
      <li>List 2</li>
    </ol>
  </body>
</html>
TIPS

Untuk pembahasan selanjutnya, gunakan Code Editor diatas untuk uji coba dengan cara copy-paste kedalam editor tersebut, ataupun mengetiknya secara manual.

Contoh 2
div *

Seleksi <div> dan semua single element apapun di dalamnya.

HTML
<h1>Tutorial CSS Universal Selector</h1>

<div>
    <em>Ditandai dengan asterik atau tanda bintang</em>
    <p> Kita biasa menyebutnya dengan <em>tanda bintang</em>.
    </p>
    <span>Tanda bintang inilah yang menandakan selektor <em>universal</em>.</span>
    <p>penyeleksiannnya berlaku untuk setiap single element secara <em>keseluruhan</em> </p>.

    <ul>
      <li>Ini contoh unordered list pertama dari <em>universal Selector</em></li>
    </ul>
</div>
CSS
div *{
  font-family: sans-serif;
  color: tomato;
}

Artinya, Seleksi semua single element apapun di dalam <div> agar memiliki style dengan font dan warna teks sebagaimana dalam kode CSS diatas.

Contoh 3
div * em

Seleksi <div> + element apapun + <em> di dalamnya.

HTML
<h1>Panduan Belajar <em>Universal Selector</em></h1>
<em>Universal Selector</em> ditandai dengan <em>asterisk</em> <code>*</code>

<div>
    <em>Tanda Bintang?</em>
    <p>Ya, Kita biasa menyebutnya dengan <em>tanda bintang</em>.
    </p>
    <span>Tanda bintang inilah yang menandakan selektor <em>universal</em>.</span>
    <p>Jadi, penyeleksiannnya digunakan untuk setiap single element secara <em>keseluruhan</em> </p>.

    <ul>
      <li>Ini contoh unordered list pertama dari <em>universal Selector</em></li>
    </ul>
</div>
CSS
div * em{
  font-family: sans-serif;
  color: tomato;
}

Artinya:
Seleksi <div>, kemudian element (keturunan) apapun didalam div tersebut yang memiliki tag <em>.
Singkatnya, hanya seleksi div + element apapun + em.

Pada contoh diatas, <em> pada <h1> tidak terseleksi, karena tidak berada didalam <div>.