Regex di CSS

Kalian tahu Regex kan? Itu loh tulisan random yang suka ada di baris kode untuk validasi tulisan. Regex bisa diterapkan di HTML untuk validasi input dengan bantuan attribute pattern seperti:

<input type="text" name="email" pattern="^[\w.-]+@[\w.-]+\.\w{2,}$" required>

Selain di html, Regex paling sering digunakan di bahasa pemrograman sehingga lebih kuat dan fleksibel penggunaannya. Contoh di bahasa Javascript:

const regex = /^[A-Z]{2}\d{4}$/;
const test = "AB1234";
console.log(regex.test(test)); // true

Contoh lain di bahasa PHP:

$pattern = "/^[a-z0-9_]{3,16}$/";
$username = "user_123";
if (preg_match($pattern, $username)) {
  echo "Username valid";
}

Apakah kalian tahu kalau Regex bisa diterapkan di CSS? Kalau kalian tidak tahu, coba tebak menurut kalian Regex di CSS diterapkan di mana? Apakah digunakan sebagai validasi juga seperti di HTML dan bahasa pemrograman? Jawabannya adalah Tidak ada Regex di CSS, tapi ada Attribute selectors yang mengadopsi sebagian Regex. Pada Attribute selectors hanya mendukung 5 Regex operator *, $, ~, |, dan ^. Setiap operator tersebut berfungsi sama seperti di Regex yaitu sebagai validasi.

---

Mengenal Attribute Selectors

Attribute Selectors adalah salah satu selector di CSS yang menargetkan attribute html. Aturan penulisan attribute adalah diapit oleh kurung siku. Contoh:

/* semua elemen yang punya atribut x-data */
[x-data] {
  outline-color: cyan;
}

/* semua elemen <a> yang punya atribut href */
a[href] {
  color: blue;
}

---

Jenis-jenis Attribute Selectors

1. Existence Selector → [attr]

Memilih elemen yang punya atribut tersebut, tanpa peduli nilainya.

/* semua elemen <img> yang punya atribut alt */
img[alt] {
  border: 2px solid green;
}

2. Exact Match → [attr="value"]

Memilih elemen yang punya atribut tersebut dengan value sama persis.

/* semua elemen <input> yang punya atribut type dengan value text */
input[type="text"] {
  background: #eee;
}

3. Prefix Match → [attr^="value"]

Memilih elemen yang punya atribut tersebut dengan value diawali.

/* semua elemen <a> yang punya atribut href dengan value diawali https */
a[href^="https"] {
  color: green;
}

4. Suffix Match → [attr$="value"]

Memilih elemen yang punya atribut tersebut dengan value diakhiri.

/* semua elemen <a> yang punya atribut href dengan value diakhiri .pdf */
a[href$=".pdf"] {
  color: red;
}

5. Substring Match → [attr*="value"]

Memilih elemen yang punya atribut tersebut dengan value mengandung tulisan.

/* semua elemen yang punya atribut class dengan value mengandung tulisan btn */
[class*="btn"] {
  background: pink;
}

Contoh 4 elemen yang akan menerapkan style di atas:

<button class="btn">Klik aku!</button>
<button class="btn-primary">Klik aku!</button>
<button class="sm-btn">Klik aku!</button>
<button class="ghost-btn-danger">Klik aku!</button>

6. Word Match → [attr~="value"]

Memilih elemen yang punya atribut tersebut dengan value mengandung kata.

/* semua elemen yang punya atribut class dengan value mengandung kata btn */
[class~="btn"] {
  padding: 8px;
}

Contoh 2 elemen yang akan menerapkan style di atas:

<button class="btn">Klik aku!</button>
<button class="btn primary">Klik aku!</button>

7. Dash Match → [attr|="value"]

Memilih elemen yang punya atribut tersebut dengan value sama persis atau diawali lalu diikuti dengan strip (-).

/* semua elemen yang punya atribut lang dengan value sama persis atau diawali en- */
[lang|="en"] {
  font-style: italic;
}

Contoh 2 elemen yang akan menerapkan style di atas:

<button lang="en">click me!</button>
<button lang="en-US">click me!</button>

---

Penutup

Semoga tulisan saya ini dapat mengupgrade kemampuan css kamu sebagai frontend developer.

Kalau kamu suka artikel ini, jangan lupa 💖 save, 🗨️ comment, dan 🔁 share ke teman developer lainnya!

Sampai jumpa di tulisan berikutnya 👋