CSS Universal Selector

CSS Fadlullah Fadul December 3, 2018

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
editor 
<!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
editor 
<!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
editor 
<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
editor 
<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>.
SHARE
Previous Article