Deskripsi
Pengertian & Penjelasan universal selector (*)

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)

<!DOCTYPE html>
<html>
  <head>
    <title>Demo by:dul</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>
* {
font-family: Arial, Helvetica, sans-serif;
color: green;
}

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

Contoh Lengkap
Demo dengan Source Code Editor

Demo Editor
Demo CSS universal selector
Code Editor
  Tips!

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

Contoh
div *

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

<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>
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
div * em

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

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