Skip to main content

B.6.9. Not

Pada chapter ini kita akan membahas pseudo-class :not(). Pseudo-class ini sangat berguna untuk menargetkan elemen yang tidak sesuai dengan selektor tertentu.

Jadi, kalau biasanya kita menggunakan selektor untuk memilih elemen, dengan :not(), kita justru bisa mengecualikan elemen yang kita tidak inginkan. Simpelnya, ini seperti "kecuali" dalam CSS. Hehe, bukan berarti kita suka ngecualikan, tapi ini trik yang keren lho!

Pseudo-class :not() menerima argumen selektor apa pun, dan akan mengecualikan elemen-elemen yang cocok dengan selektor tersebut. Ini membantu saat kita ingin mengatur style pada elemen, kecuali beberapa elemen tertentu. Let's code!

<form class="registration-form">
  <!-- Username -->
  <div class="input-group">
    <label for="username" class="label">Username</label>
    <input
      type="text"
      name="username"
      id="username"
      class="input-field"
      placeholder="johndoe"
    />
  </div>
  <!-- E-mail -->
  <div class="input-group">
    <label for="email" class="label">E-mail</label>
    <input
      type="email"
      name="email"
      id="email"
      class="input-field"
      placeholder="johndoe@example.com"
    />
  </div>
  <!-- Pasword -->
  <div class="input-group">
    <label for="password" class="label">Password</label>
    <input
      type="password"
      name="password"
      id="password"
      class="input-field"
      placeholder="type strong pass"
    />
  </div>
</form>

kode di atas ketika teman-teman buka di web browser maka hasilnya akan terlihat seperti:

Pada form di atas, terdapat beberapa input seperti username, e-mail dan password yang ketika kita klik maka border dan outline nya akan berubah warna. Nah bagaimana jika kita ingin kecualikan input yang type="password" agar ketika di klik border dan outline nya tidak berubah sama sekali?

Kita bisa menggunakan :not() untuk melakukannya lho! coba teman-teman perhatikan kode berikut.

.registration-form {
  /* ...... */
}

.input-group {
  /* ...... */
}

.label {
  /* ...... */
}

.input-field {
  /* ..... */
}

.input-field:focus:not([type="password"]) {
  border: 1px solid blueviolet;
  outline: 3px solid rgba(185, 131, 236, 0.47);
  outline-offset: 1px;
}

Nah ini akan membuat input dengan type="password" tidak akan terkena efek dari penerapan pseudo-class :focus.

Kasian ya <input type="password"> ga di anggep:D

Tapi teman-teman bisa memberikan style khusus untuk <input type="password"> ya. Nah sekarang, bagaimana jika kita ingin mengecualikan lebih dari satu? teman-teman bisa lakukan ekspresi chaining atau rantai. Contohnya seperti ini:

.input-field:focus:not([type="password"]):not([type="email"]) {
  border: 1px solid blueviolet;
  outline: 3px solid rgba(185, 131, 236, 0.47);
  outline-offset: 1px;
}

Ekspresi di atas akan mengecualikan <input type="password"> dan <input type="email">. Mengapa disebut chaining? karena terlihat seperti rantai yang saling terhubung dan terkait satu sama lain ya teman-teman.

Yap, itulah pseudo-class :not(), sangat fleksibel bukan? hehe:D
Teman-teman bisa menggunakannya sesuai dengan kebutuhan dan case nya masing-masing ya.

info

Source code pada chapter ini tersedia di GitHub
https://github.com/mframadann/webdev-dasar-example/tree/main/b-css/chapter-B.6-pseude-class/B.6.9-not