DEV Community: Eris Sulistina

Regex in CSS

Eris Sulistina — Thu, 02 Oct 2025 03:17:49 +0000

Do you know Regex? That weird-looking string you often see in code for validating text inputs. Regex can be used in HTML with the pattern attribute, for example:

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

Outside HTML, Regex is most commonly used in programming languages where it's more powerful and flexible. For example, in JavaScript:

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

And in PHP:

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

But here's a question: did you know Regex can also be applied in CSS?
If you didn't, where do you think Regex-like behavior appears in CSS? Is it used for validation like in HTML and programming languages?

The answer is: there is no Regex engine in CSS.
However, CSS offers Attribute selectors that adopt a subset of regex-like operators. Attribute selectors support these operators: *, $, ~, |, and ^. They behave similarly to certain regex patterns, but strictly for selecting elements based on attribute values.

Understanding Attribute Selectors

Attribute selectors target HTML attributes and are written inside square brackets. Examples:

/* select all elements that have the x-data attribute */
[x-cloak] {
  display: none !important;
}

/* select all <a> elements that have an href attribute */
a[href] {
  color: blue;
}

Types of Attribute Selectors

Existence Selector → `[attr]`

Selects elements that have the attribute, regardless of its value.

/* all <img> elements that have an alt attribute */
img[alt] {
  border: 2px solid green;
}

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

Selects elements whose attribute value matches exactly.

/* all <input> elements with type="text" */
input[type="text"] {
  background: #eee;
}

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

Selects elements where the attribute value starts with the given string.

/* all <a> elements with href starting with https */
a[href^="https"] {
  color: green;
}

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

Selects elements where the attribute value ends with the given string.

/* all <a> elements with href ending in .pdf */
a[href$=".pdf"] {
  color: red;
}

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

Selects elements where the attribute value contains the substring.

/* all elements with a class name that contains "btn" */
[class*="btn"] {
  background: pink;
}

Example elements that match:

<button class="btn">Click me!</button>
<button class="btn-primary">Click me!</button>
<button class="sm-btn">Click me!</button>
<button class="ghost-btn-danger">Click me!</button>

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

Selects elements where the attribute value contains the word (space-separated).

/* all elements whose class attribute contains the word "btn" */
[class~="btn"] {
  padding: 8px;
}

Example:

<button class="btn">Click me!</button>
<button class="btn primary">Click me!</button>

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

Selects elements where the attribute value is exactly the given value, or starts with it followed by a dash.

/* matches lang="en" or lang="en-US", etc. */
[lang|="en"] {
  font-style: italic;
}

Example:

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

Closing thoughts

I hope this post helps level up your CSS skills as a frontend developer.

If you enjoyed this article, don’t forget to 💖 save, 🗨️ comment, and 🔁 share it with fellow developers!

See you in the next post 👋

Regex di CSS

Eris Sulistina — Thu, 02 Oct 2025 02:50:28 +0000

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 👋

[Boost]

Eris Sulistina — Sat, 31 May 2025 12:10:30 +0000

Rails Designer

May 29 '25

10 Modern CSS Features You Want to Use

#webdev #css #ruby #rails

Comments 6

6 min read

Logical Pseudo-Classes in CSS

Eris Sulistina — Wed, 28 May 2025 05:18:19 +0000

Logical pseudo-classes are a type of CSS pseudo-class that allow you to select elements based on logical conditions, filtering elements based on structure or relationships within the DOM.

List of Logical Pseudo-Classes

Pseudo-Class	Description	Example Usage
`:not(selector)`	Selects elements that do not match a given selector	`button:not(.primary)`
`:is(selector, …)`	Simplifies multiple selectors that share the same rule	`:is(h1, h2, h3)`
`:where(selector, …)`	Same as `:is()`, but always has zero specificity	`:where(article, section)`
`:has(selector)`	Selects elements that contain a child/descendant matching the selector	`div:has(img)`
`:nth-child(n)`	Selects elements based on their order among siblings	`li:nth-child(2)`
`:nth-of-type(n)`	Like `:nth-child` but only counts elements of the same type	`p:nth-of-type(2)`
`:nth-last-child(n)`	Like `:nth-child` but counts from the end	`tr:nth-last-child(1)`
`:nth-last-of-type(n)`	Combines `:nth-last-child` and `:nth-of-type`	`div:nth-last-of-type(1)`
`:first-child`	Selects the first child of a parent	`p:first-child`
`:last-child`	Selects the last child of a parent	`li:last-child`
`:only-child`	Selects elements that are the only child	`span:only-child`
`:only-of-type`	Selects elements that are the only one of their type within a parent	`h2:only-of-type`
`:empty`	Selects elements that are completely empty (no text or whitespace)	`div:empty`

Big 4

Among all logical pseudo-classes, I highly recommend mastering these four, as they are modern CSS selectors for writing more flexible and efficient rules:

:not
:is
:where
:has

❗ `:not()` — Exclude Elements

:not is used to target all elements that do not match a given selector.

/* Targets all <a> elements without the .btn class */
a:not(.btn) { .... }

/* Targets all <textarea> elements without a rows attribute */
textarea:not([rows]) {
    resize: none;
    field-sizing: content;
}

🧩 `:is()` — Combine Multiple Selectors

:is is used to target elements that match any of the selectors inside it.

/* Targets h1, h2, and h3 elements */
:is(h1, h2, h3) { .... }

/* 
    Targets both:
    1. article > p
    2. article > span
 */
article > :is(p, span) { .... }

💡 `:where()` — Like `:is()`, But Zero Specificity

/* Targets h1, h2, and h3 without specificity */
:where(h1, h2, h3) { .... }

/* 
    Targets both without specificity for p and span:
    1. article > p
    2. article > span
 */
article > :where(p, span) { .... }

🔎 `:has()` — Target Elements That CONTAIN Other Elements

:has is used to select elements based on whether they have specific children or descendants.

/* Targets buttons that contain an svg */
button:has(svg) { .... }

/* Targets article elements with a direct child <img> */
article:has(> img) { .... }

/* Targets <label> with a required input as next sibling */
label:has(+ [required])::after {
    content: "*"
}

✨ Closing

I hope this post helps level up your CSS skills as a frontend developer.

If you enjoyed this article, don’t forget to 💖 save, 🗨️ comment, and 🔁 share it with fellow developers!

See you in the next post 👋

Logical Pseudo-class di dalam CSS

Eris Sulistina — Wed, 28 May 2025 05:14:25 +0000

Logical pseudo-class adalah jenis pseudo-class dalam CSS yang memungkinkan kita membuat seleksi elemen berdasarkan logika kondisi untuk menyaring elemen berdasarkan struktur atau hubungan dalam DOM.

Daftar Logical Pseudo-class

Pseudo-Class	Deskripsi	Contoh Penggunaan
`:not(selector)`	Menyeleksi elemen yang tidak cocok dengan selector tertentu	`button:not(.primary)`
`:is(selector, …)`	Menyederhanakan banyak selector yang memiliki deklarasi sama	`:is(h1, h2, h3)`
`:where(selector, …)`	Sama seperti `:is()` tapi dengan specificity selalu 0	`:where(article, section)`
`:has(selector)`	Menyeleksi elemen yang memiliki anak/cucu yang cocok dengan selector	`div:has(img)`
`:nth-child(n)`	Menyeleksi elemen berdasarkan urutan anak	`li:nth-child(2)`
`:nth-of-type(n)`	Sama seperti `:nth-child` tapi hanya memperhitungkan jenis tag yang sama	`p:nth-of-type(2)`
`:nth-last-child(n)`	Seperti `:nth-child` tapi dihitung dari belakang	`tr:nth-last-child(1)`
`:nth-last-of-type(n)`	Kombinasi `:nth-last-child` dan `:nth-of-type`	`div:nth-last-of-type(1)`
`:first-child`	Menyeleksi elemen pertama dalam parent	`p:first-child`
`:last-child`	Menyeleksi elemen terakhir dalam parent	`li:last-child`
`:only-child`	Menyeleksi elemen yang menjadi satu-satunya anak	`span:only-child`
`:only-of-type`	Menyeleksi satu-satunya elemen dari jenisnya dalam parent	`h2:only-of-type`
`:empty`	Menyeleksi elemen yang tidak punya isi (termasuk teks/spasi)	`div:empty`

Big 4

Diantara banyaknya Logical pseudo-class, saya sangat merekomendeasikan kamu untuk menguasai 4 diantaranya karena itu merupakan selector CSS modern untuk menulis rule yang lebih fleksibel dan efisien. 4 pseudo-class tersebut adalah:

:not
:is
:where
:has

❗ :not() — Mengecualikan Elemen

:not berfungsi untuk menargetkan semua elemen yang tidak cocok dengan selector tertentu.

/* Menargetkan elemen a yang tidak memiliki class .btn */
a:not(.btn) { .... }

/* Menargetkan elemen textarea yang tidak memiliki attribute rows */
textarea:not([rows]) {
    resize: none;
    field-sizing: content;
}

🧩 :is() — Menyatukan Beberapa Selector

:is berfungsi untuk menargetkan elemen yang cocok dengan salah satu selector di dalamnya.

/* Menargetkan elemen h1, h2, h3 */
:is(h1, h2, h3) { .... }

/* 
    Menargetkan 2 kondisi.
    1. article > p
    2. article > span
 */
article > :is(p, span) { .... }

💡 :where() — Mirip :is(), Tapi Tanpa Bobot Spesifisitas

/* Menargetkan elemen h1, h2, h3 tanpa spesifisitas */
:where(h1, h2, h3) { .... }

/* 
    Menargetkan 2 kondisi tanpa spesifisitas pada p dan span.
    1. article > p
    2. article > span
 */
article > :where(p, span) { .... }

🔎 :has() — Menargetkan Elemen yang MENGANDUNG Elemen Tertentu

:has berfungsi untuk menyeleksi elemen berdasarkan child atau selector yang diberikan.

/* Menargetkan button yang memiliki descendant child svg */
button:has(svg) { .... }

/* Menargetkan article yang memiliki direct child img */
article:has(> img) { .... }

/* Menargetkan label yang memiliki attribute required pada next-sibling */
label:has(+ [required])::after {
    content: "*"
}

✨ 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 👋

📝 Give the Stage to Attributes Because Accessibility Deserves the Spotlight

Eris Sulistina — Wed, 28 May 2025 00:48:21 +0000

There are many ways to target elements with selectors—Universal selector *, Type selector like header, ID selector #header, Class selector .header, and others.

But among all of them, I find myself (and other developers too) mostly using class selectors for styling. I get it—classes are more flexible.

But that doesn't mean you should use them everywhere. Sometimes all you need is a type selector. Sometimes, you just need an attribute selector.

Overusing classes can blind you to the unique powers other selectors have to offer.

And just like attributes, accessibility is often overlooked by developers.

Even though implementing accessibility may feel like doing twice the work, it actually makes your website healthier, more inclusive, and increases your value as a developer.

In this article, I want to open your eyes to attribute selectors and how they can shine—especially when combined with accessibility.

🤔 What is an Attribute Selector?

Attribute selectors let you target elements based on their HTML attributes. The syntax uses square brackets [attribute].

/* Targets elements with the hidden attribute */
[hidden] { .... }

/* Targets input elements with the required attribute */
input[required] { .... }

/* Targets elements with aria-hidden="true" */
[aria-hidden="true"] { .... }

🎯 When Does an Attribute Selector Make More Sense?

The attribute has clear semantic/functional meaning
It's not possible or efficient to use a class
You want to style elements based on data- attributes

✅ Semantically Meaningful Attributes

💡 Example 1: Alert UI

<div role="alert" aria-live="assertive">
    Profile updated successfully
</div>

[role="alert"] {
    background-color: green;
}

No need for a .alert class—just use its semantic meaning directly.

💡 Example 2: Required Form Field

<form action="#">
    <div>
        <label for="name">Name</label>
        <input type="text" required>
    </div>
</form>

label:has(+ [required])::after {
    content: "*";
}

This selector helps provide a visual indicator for required fields.

💡 Example 3: Tab UI

<button role="tab" aria-selected="true">Tab 1</button>

[aria-selected="true"] {
    color: blue;
}

This can replace .active with something more semantic.

💡 Example 4: Active Navigation

<a href="/" aria-current="page">Home</a>

[aria-current="page"] {
    color: blue;
}

Accessible and clean styling, all in one.

🚫 When Classes Aren’t Ideal

💡 Example 1: Framework Elements

<button type="button" data-bs-button>Click</button>

[data-bs-button] {
    background-color: indigo;
}

Can’t touch third-party code? No problem.

💡 Example 2: Detect Missing `alt` Text

<img src="https://picsum.photos/600/400">

img:not([alt]), img[alt=""] {
    filter: blur(4px);
}

Useful for debugging or warning about missing descriptions.

💡 Example 3: Label Without `for`

<label>Name</label>
<input id="name">

label:not([for]), label[for=""] {
    opacity: .3;
}

Helps catch potential UX issues in forms.

⚙️ Styling Based on `data-*` Attributes

💡 Example 1: Dark Mode

<html lang="en" data-theme="dark">

[data-theme="dark"] {
    background-color: black;
}

💡 Example 2: Button Variants

<button data-variant="primary">Submit</button>

button[data-variant="primary"] {
    background-color: cyan;
}

✨ Final Words

I hope this article helps you open up to using attribute selectors more intentionally—especially when dealing with semantics and accessibility.

With the right usage, we can write CSS that's:

Cleaner
More semantic
More inclusive

So from now on, let’s give the stage to attributes, because accessibility deserves the spotlight 🙌

Got a cool trick with attribute selectors? Share it in the comments!

If you liked this article, don’t forget to 💖 save, 🗨️ comment, and 🔁 share it with your dev friends!

See you in the next post 👋

📝 Kasih Panggung untuk Attribute karena Accesibility perlu disambut

Eris Sulistina — Wed, 28 May 2025 00:36:26 +0000

Selector untuk memberikan style ke elemen dapat menggunakan banyak cara yang di antaranya adalah Universal Selector *, Type Selector header, ID selector #header, Class Selector: .header, dan selector lainnya. Tapi dari sekian banyaknya selector, saya lebih sering menggunakan dan melihat developer lain menggunakan class selector untuk memberikan style. Saya paham penggunaan class lebih fleksibel, tapi bukan berarti kamu perlu menggunakannya di semua tempat. Bisa jadi kamu hanya membutuhkan type selector, atau bisa jadi kamu hanya membutuhkan attribute selector. Penggunaan class di semua tempat akan membutakan matamu terhadap kemampuan-kemampuan unik dari selector lain.

Selain attribute, ternyata accessibility juga sering diabaikan oleh developer. Walaupun pengerjaannya seakan membuat developer jadi kerja 2 kali, tapi penerapan accessibility akan membuat website lebih sehat, lebih banyak merangkul user, dan akan menaikkan value kamu sebagai developer.

Pada tulisan ini saya akan membukakan matamu agar lebih perhatian terhadap attribute selector sekaligus penggunaannya bersamaan dengan accessibility.

🤔 Apa Itu Attribute Selector?

Attribute selector adalah jenis selector yang menargetkan elemen berdasarkan atribut HTML-nya. Aturan penulisannya adalah nama elemen diapit oleh kurung siku [attribute].

/* Menargetkan elemen yang memiliki atribut hidden */
[hidden] { .... }

/* Menargetkan elemen input yang memiliki atribut required */
input[required] { .... }

/* Menargetkan elemen yang memiliki atribut aria-hidden dengan value true */
[aria-hidden="true"] { .... }

🎯 Kapan Attribute Selector Lebih Baik?

Atribut memiliki arti semantik/fungsional yang jelas
Tidak memungkinkan atau tidak efisien menambahkan class
Kamu ingin styling berdasarkan data- attribute

✅ Atribut Semantik

💡 Contoh 1: Alert UI

<div role="alert" aria-live="assertive">
    Berhasil mengupdate profile
</div>

[role="alert"] {
    background-color: green;
}

Tanpa perlu class .alert, kita bisa styling berdasarkan arti semantiknya langsung.

💡 Contoh 2: Form Wajib Isi

<form action="#">
    <div>
        <label for="name">Name</label>
        <input type="text" required>
    </div>
</form>

label:has(+ [required])::after {
    content: "*"
}

Selector ini membantu kita untuk memberikan indikator visual ke field yang wajib diisi.

💡 Contoh 3: Tab UI

<button role="tab" aria-selected="true">Tab 1</button>

[aria-selected="true"] {
    color: blue;
}

Selector ini bisa menggantikan class .active dengan lebih semantik.

💡 Contoh 4: Navigation Aktif

<a href="/" aria-current="page">Beranda</a>

[aria-current="page"] {
    color: blue;
}

Aksesibilitas dapet, styling pun tetap rapi.

🚫 Tidak memungkinkan atau tidak efisien menggunakan class

💡 Contoh 1: Elemen dari Framework

<button type="button" data-bs-button>Click</button>

[data-bs-button] {
    background-color: indigo;
}

Kalau elemen dari third-party library gak bisa diutak-atik, ini solusinya.

💡 Contoh 2: Deteksi Gambar Tanpa alt

<img src="https://picsum.photos/600/400">

img:not([alt]), img[alt=""] {
    filter: blur(4px);
}

Bisa buat debugging atau memperingatkan kalau ada gambar yang lupa dikasih deskripsi.

💡 Contoh 3: Label tanpa `for`

<label>Name</label>
<input id="name">

label:not([for]), label[for=""] {
    opacity: .3;
}

Bantu mendeteksi potensi masalah UX di form.

⚙️ Styling Berdasarkan data-* Attribute

💡 Contoh 1: Dark Mode

<html lang="en" data-theme="dark">

[data-theme="dark"] {
    background-color: black;
}

💡 Contoh 2: Variant Button

<button data-variant="primary">Submit</button>

button[data-variant="primary"] {
    background-color: cyan;
}

✨ Penutup

Semoga tulisan ini bisa bikin kamu lebih terbuka untuk mempertimbangkan attribute selector dalam styling, terutama untuk kasus-kasus yang menyangkut semantik dan aksesibilitas.

Dengan pemakaian yang tepat, kita bisa menulis CSS yang:

Lebih bersih
Lebih semantik
Lebih inklusif

Yuk, mulai sekarang, kasih panggung untuk attribute karena accessibility perlu disambut 🙌

Punya trik menarik dengan attribute selector? Share di kolom komentar ya!

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

Sampai jumpa di tulisan berikutnya 👋

🧠 Learn CSS Pseudo-classes by Category — With Priorities!

Eris Sulistina — Mon, 26 May 2025 03:49:32 +0000

CSS comes with a wide variety of pseudo-classes that allow us to target elements based on their state, structure, and user interaction. Below is a categorized summary of commonly used pseudo-classes, complete with brief descriptions and learning priority levels (based on my personal opinion).

👁️ Element Display State Pseudo-classes

These pseudo-classes target elements based on their display state.

Pseudo-class	Description	Priority
:fullscreen	Targets elements in fullscreen mode	⭐⭐
:modal	Targets an open `<dialog>` element displayed as a modal	⭐⭐⭐⭐
:picture-in-picture	Targets `<video>` elements in picture-in-picture mode	⭐
:open	Targets open elements like `<details>`	⭐⭐⭐
:popover-open	Targets an element currently open as a popover	⭐⭐⭐⭐

⌨️ Input Pseudo-classes

Used to target input elements based on their state, validation, and user interaction.

Pseudo-class	Description	Priority
:autofill	Targets form fields filled in automatically by the browser	⭐
:enabled	Targets input elements that are enabled	⭐⭐
:disabled	Targets input elements that are disabled	⭐⭐⭐
:read-only	Targets input elements that are read-only	⭐⭐
:placeholder-shown	Targets input elements that show placeholder text	⭐⭐⭐
:default	Targets default form elements (like a default button)	⭐
:checked	Targets selected checkboxes or radio buttons	⭐⭐⭐⭐⭐
:blank	Targets completely empty input fields	⭐
:valid	Targets inputs that pass HTML5 validation	⭐⭐
:user-valid	Targets valid inputs after user interaction	⭐⭐⭐
:invalid	Targets inputs that fail HTML5 validation	⭐⭐
:user-invalid	Targets invalid inputs after user interaction	⭐⭐⭐
:in-range	Targets inputs with values within a valid range	⭐
:out-of-range	Targets inputs with values outside the valid range	⭐
:required	Targets required input fields	⭐⭐⭐
:optional	Targets optional input fields	⭐

🌍 Location Pseudo-classes

Target links or elements based on the URL or fragment identifier.

Pseudo-class	Description	Priority
:any-link	Targets all `<a>` elements with an href, whether visited or not	⭐⭐⭐
:link	Targets links that have not been visited	⭐⭐⭐⭐⭐
:visited	Targets links that have been visited	⭐⭐⭐⭐⭐
:local-link	Targets links pointing to the same page (internal links)	⭐
:target	Targets elements that match the URL fragment identifier (e.g., `#section`)	⭐⭐⭐

🌳 Tree-structural Pseudo-classes

Used to target elements based on DOM structure.

Pseudo-class	Description	Priority
:root	Targets the root element of the document (usually `<html>`)—great for global CSS vars	⭐⭐⭐⭐⭐
:empty	Targets elements with no children (including text/comments)	⭐⭐⭐
:first-child	Targets the first child of its parent	⭐⭐⭐⭐
:first-of-type	Targets the first sibling of its type	⭐⭐⭐
:last-child	Targets the last child of its parent	⭐⭐⭐⭐
:last-of-type	Targets the last sibling of its type	⭐⭐⭐
:nth-child()	Targets elements based on their position among siblings	⭐⭐⭐⭐⭐
:nth-last-child()	Targets elements from the end based on their position	⭐⭐⭐⭐
:nth-of-type()	Targets siblings of the same type based on order	⭐⭐⭐⭐
:nth-last-of-type()	Targets same-type siblings from the end	⭐⭐⭐
:only-child	Targets elements that are the only child of their parent	⭐⭐⭐⭐⭐
:only-of-type	Targets elements that are the only one of their type among siblings	⭐⭐

🖱️ User Action Pseudo-classes

These target elements based on user interaction like hovering, clicking, or focusing.

Pseudo-class	Description	Priority
:hover	Targets elements when hovered	⭐⭐⭐⭐⭐
:active	Targets elements during active state (click or tap)	⭐⭐⭐⭐⭐
:focus	Targets elements receiving focus	⭐⭐⭐⭐⭐
:focus-visible	Focus styles shown only when navigating with keyboard/tab	⭐⭐⭐⭐
:focus-within	Targets an element that contains a focused child element	⭐⭐⭐

🧩 Functional Pseudo-classes

These pseudo-classes use parentheses () to create more dynamic and flexible selectors.

Pseudo-class	Description	Priority
:is()	Simplifies writing complex selectors. Great for targeting multiple elements at once	⭐⭐⭐⭐⭐
:where()	Like `:is()`, but doesn’t add specificity. Perfect for resets or default styling	⭐⭐⭐⭐
:has()	A powerful parent selector that targets elements based on their children or content	⭐⭐⭐⭐⭐
:not()	Excludes elements that match a certain selector	⭐⭐⭐⭐⭐

These four pseudo-classes are powerful and highly recommended for writing expressive and maintainable CSS selectors.

Disclaimer: The priority ratings above are entirely based on my personal opinion. Feel free to adjust based on your own needs and experience.

If you found this cheat sheet helpful, feel free to 💖 save it, 🗨️ leave a comment, or 🔁 share it with other web developers!

See you in the next post 👋

CSS Pseudo-classes Cheat Sheet 🔍

Eris Sulistina — Mon, 26 May 2025 03:43:37 +0000

CSS memiliki banyak pseudo-class yang memungkinkan kita menarget elemen berdasarkan status, struktur, dan interaksi. Berikut ini adalah ringkasan beberapa pseudo-class yang dikelompokkan berdasarkan kategori, lengkap dengan deskripsi singkat dan tingkat prioritas mempelajarinya.

👁️ Element display state pseudo-classes

Pseudo-class berikut digunakan untuk menarget elemen berdasarkan status tampilannya.

Pseudo-class	Keterangan	Prioritas
:fullscreen	Menargetkan elemen saat berada dalam mode fullscreen	⭐⭐
:modal	Menargetkan elemen yang sedang terbuka sebagai modal	⭐⭐⭐⭐
:picture-in-picture	Menargetkan elemen saat berada dalam mode picture-in-picture	⭐
:open	Menargetkan elemen seperti yang sedang terbuka	⭐⭐⭐
:popover-open	Menargetkan elemen yang sedang terbuka sebagai popover	⭐⭐⭐⭐

⌨️ Input pseudo-classes

Digunakan untuk menarget elemen input berdasarkan status, validasi, dan interaksi pengguna.

Pseudo-class	Keterangan	Prioritas
:autofill	Menargetkan field form yang diisi otomatis oleh browser	⭐
:enabled	Menargetkan elemen input yang tidak dinonaktifkan	⭐⭐
:disabled	Menargetkan elemen input yang dinonaktifkan	⭐⭐⭐
:read-only	Menargetkan elemen input yang bersifat hanya-baca	⭐⭐
:placeholder-shown	Menargetkan input yang sedang menampilkan placeholder	⭐⭐⭐
:default	Menargetkan elemen input yang menjadi pilihan default	⭐
:checked	Menargetkan input seperti checkbox/radio yang tercentang	⭐⭐⭐⭐⭐
:blank	Menargetkan input kosong (belum diisi sama sekali)	⭐
:valid	Menargetkan input yang lolos validasi HTML5	⭐⭐
:user-valid	Menargetkan input valid setelah ada interaksi user	⭐⭐⭐
:invalid	Menargetkan input yang gagal validasi HTML5	⭐⭐
:user-invalid	Menargetkan input tidak valid setelah ada interaksi user	⭐⭐⭐
:in-range	Menargetkan input dengan nilai di dalam rentang yang valid	⭐
:out-of-range	Menargetkan input dengan nilai di luar rentang yang valid	⭐
:required	Menargetkan input yang wajib diisi	⭐⭐⭐
:optional	Menargetkan input yang tidak wajib diisi	⭐

🌍 Location Pseudo-classes

Digunakan untuk menarget link atau elemen berdasarkan URL dan fragment.

Pseudo-class	Keterangan	Prioritas
:any-link	Menargetkan semua elemen dengan atribut href, baik yang dikunjungi maupun belum	⭐⭐⭐
:link	Menargetkan link yang belum dikunjungi	⭐⭐⭐⭐⭐
:visited	Menargetkan link yang sudah dikunjungi	⭐⭐⭐⭐⭐
:local-link	Menargetkan link yang mengarah ke halaman yang sama (internal link)	⭐
:target	Menargetkan elemen yang sesuai dengan fragment identifier di URL (misalnya #section)	⭐⭐⭐
:target-within	Menargetkan elemen yang mengandung target	⭐⭐⭐

🌳 Tree-structural Pseudo-classes

Digunakan untuk menarget elemen berdasarkan struktur DOM-nya.

Pseudo-class	Keterangan	Prioritas
:root	Menargetkan elemen root dari dokumen (biasanya )—berguna untuk deklarasi CSS global seperti variabel	⭐⭐⭐⭐⭐
:empty	Menargetkan elemen yang tidak memiliki anak (termasuk teks, komentar, dan elemen)	⭐⭐⭐
:first-child	Menargetkan elemen yang merupakan anak pertama dari parent-nya	⭐⭐⭐⭐
:first-of-type	Menargetkan elemen pertama dari jenisnya di antara sibling-nya	⭐⭐⭐
:last-child	Menargetkan elemen terakhir dari parent-nya	⭐⭐⭐⭐
:last-of-type	Menargetkan elemen terakhir dari jenisnya di antara sibling-nya	⭐⭐⭐
:nth-child()	Menargetkan elemen berdasarkan urutan posisinya dalam parent	⭐⭐⭐⭐⭐
:nth-last-child()	Menargetkan elemen dari belakang berdasarkan urutan dalam parent	⭐⭐⭐⭐
:nth-of-type()	Menargetkan elemen berdasarkan urutan dari jenisnya di antara sibling-nya	⭐⭐⭐⭐
:nth-last-of-type()	Menargetkan elemen terakhir dari jenisnya di antara sibling-nya dari belakang	⭐⭐⭐
:only-child	Menargetkan elemen yang merupakan satu-satunya anak dari parent-nya	⭐⭐⭐⭐⭐
:only-of-type	Menargetkan elemen yang merupakan satu-satunya dari jenisnya di antara sibling-nya	⭐⭐

🖱️ User Action Pseudo-classes

Menargetkan elemen berdasarkan interaksi pengguna seperti hover, klik, atau fokus.

Pseudo-class	Keterangan	Prioritas
:hover	Menargetkan elemen saat pointer berada di atasnya	⭐⭐⭐⭐⭐
:active	Menargetkan elemen saat sedang di-klik atau di-tap	⭐⭐⭐⭐⭐
:focus	Menargetkan elemen saat mendapatkan fokus input (keyboard, mouse, dll)	⭐⭐⭐⭐⭐
:focus-visible	Fokus hanya terlihat ketika pengguna menavigasi dengan keyboard/tab (bukan mouse)	⭐⭐⭐⭐
:focus-within	Menargetkan elemen yang memiliki anak yang sedang fokus	⭐⭐⭐

🧩 Functional Pseudo-classes

Ini adalah pseudo-class dengan tanda kurung () dan biasanya digunakan untuk membuat selector lebih dinamis dan fleksibel.

Pseudo-class	Keterangan	Prioritas
:is()	Menyederhanakan penulisan selector kompleks. Cocok untuk menarget banyak elemen sekaligus.	⭐⭐⭐⭐⭐
:where()	Mirip seperti :is(), tapi tidak berkontribusi pada specificity (sangat berguna untuk reset atau default styling)	⭐⭐⭐⭐
:has()	Selector powerful yang bisa memilih elemen berdasarkan anak/cucu atau kontennya (parent selector!)	⭐⭐⭐⭐⭐
:not()	Menargetkan elemen kecuali yang memenuhi selector tertentu	⭐⭐⭐⭐⭐

Keempat pseudo-class ini sangat powerful dan wajib dikuasai karena membuat kita bisa menulis selector yang lebih ekspresif dan maintainable.

Disclaimer: Penilaian kolom prioritas datangnya murni dari opini saya sendiri. Jadi jika kamu tidak setuju, silakan sesuaikan.

Kalau kamu suka cheat sheet ini, jangan lupa 💖 save, 🗨️ comment, atau 🔁 share ke sesama web developer lainnya!

Sampai jumpa di tulisan selanjutnya 👋

🔍 How to Access x-data from Outside an Alpine.js Component (Without Alpine.store)

Eris Sulistina — Sat, 24 May 2025 01:22:55 +0000

By default, data defined inside x-data in Alpine.js is only accessible within the element where it’s initialized—and its child elements.

For example:

<body>
  <header x-data="{ title: 'AlpineJS Awesome' }" x-text="title"></header>
  <main>Main Content</main>
  <footer>Footer</footer>
</body>

In the example above, you can’t access the title value from the <footer> element because it’s outside the <header> component.

🤔 Common Solution: Move x-data Up
A typical solution would be to move the x-data up to a common parent, like <body>. This works but comes with a drawback: you’ll end up with prop drilling hell—passing data down manually through several components. 😫

💡 Better Solution: Use a Global Store
Alpine has a built-in global store feature called Alpine.store, similar to React's Context API. It’s a great solution when you need to share state across many components.

But sometimes, you don’t need full global state—just a quick way to update one component’s state from the outside.

This post will walk you through 3 practical ways to access or modify x-data from outside a component without using Alpine.store.

🧪 1. Passing $data to a JavaScript Function

Alpine exposes a $data reference that contains all the reactive properties of your component. You can pass this to a regular JS function and update the state there.

<!-- index.html -->
<header x-data="{ title: "'AlpineJS Suck' }\">"
  <p x-text="title"></p>
  <button @click="setTitle($data)">Change Title</button>
</header>

// script.js
function setTitle(data) {
  data.title = 'AlpineJS Awesome';
}

📝 Use this when you want to update Alpine state from an external JS file.

🧪 2. Manipulate State with Alpine.$data()

This is an undocumented trick shared by an Alpine.js maintainer in the article Underrated Alpine API Features.

<header x-data="{ title: 'AlpineJS Suck' }" id="header">
  <p x-text="title"></p>
</header>

<button id="trigger">Change from Outside</button>

const header = document.querySelector('#header');
const trigger = document.querySelector('#trigger');

trigger.addEventListener('click', () => {
  Alpine.$data(header).title = 'AlpineJS Awesome';
});

📌 Alpine.$data(el) gives you access to the component's internal data—so you can manipulate it directly.

🧪 3. Access from Another Alpine Component

Let’s say you want a component in <main> to update the state inside <header>.

<header x-data="{ title: 'AlpineJS Suck' }" id="header">
  <p x-text="title"></p>
</header>

<main>
  <div x-data="{
    updateTitle() {
      Alpine.$data(document.querySelector('#header')).title = 'AlpineJS Awesome';
    }
  }">
    <button @click="updateTitle">Update Title</button>
  </div>
</main>

💡 Quick tip: If you give an element an id="header", many browsers automatically expose it as a global JS variable. So instead of:

Alpine.$data(document.querySelector('#header')).title = 'AlpineJS Awesome';

You can shorten it to:

Alpine.$data(header).title = 'AlpineJS Awesome';

💻 Bonus Demo

Want to see it in action? Check out the demo here 👉 https://iCodeThis.com/code/3972

✍️ Final Thoughts

If you only need to interact with Alpine's reactive data occasionally from outside a component, these lightweight methods are great alternatives to global stores.

But when your app grows and multiple components need access to the same state, stick with Alpine.store for maintainability.

✨ Hope this helped! If you know other tips or have questions about Alpine.js, feel free to drop a comment.
See you in the next post 👋

🔍 Cara Mengakses x-data dari Luar Komponen Alpine.js (Tanpa Alpine.store)

Eris Sulistina — Sat, 24 May 2025 00:54:16 +0000

Secara default, data yang kamu deklarasikan di dalam x-data hanya bisa diakses oleh elemen tempat x-data itu di-mount dan turunannya. Misalnya:

<body>
  <header x-data="{ title: 'AlpineJS Awesome' }" x-text="title"></header>
  <main>Isi Content</main>
  <footer>Footer</footer>
</body>

Di contoh di atas, kamu nggak bisa akses title dari elemen <footer>. Data tersebut hanya hidup di <header> dan child-nya saja.

🤔 Solusi Umum: Pindahkan ke Atas
Solusi pertama yang terlintas biasanya: pindahkan x-data ke parent-nya, misalnya ke <body>. Tapi ini bisa menjebak kamu dalam prop drilling hell — seperti di React, data harus "diturunkan" manual ke banyak anak komponen. 😩

💡 Solusi Lebih Baik: Gunakan Global Store
Alpine punya built-in global store bernama Alpine.store, mirip dengan context di React. Cocok untuk data global yang sering diakses dari berbagai tempat.

Tapi… kadang kita nggak butuh global, cuma pengen "sesekali" ubah state dari luar komponen.

Nah, artikel ini akan membahas 3 alternatif cara mengakses atau memanipulasi data x-data dari luar komponen tanpa harus pakai store.

🧪 1. Passing $data ke Fungsi JavaScript

Alpine punya binding $data yang berisi semua properti dalam x-data. Kamu bisa lempar $data ke fungsi eksternal dan ubah di sana.

<!-- index.html -->
<header x-data="{ title: "'AlpineJS Suck' }\">"
  <p x-text="title"></p>
  <button @click="setTitle($data)">Change Title</button>
</header>

// script.js
function setTitle(data) {
  data.title = 'AlpineJS Awesome';
}

📝 Cocok untuk: ketika ingin mengubah data Alpine dari file JavaScript biasa.

🧪 2. Manipulasi via Alpine.$data()

Trik ini tidak terdokumentasi resmi, tapi dibahas oleh salah satu maintainer di artikel Underrated Alpine API Features.

<header x-data="{ title: 'AlpineJS Suck' }" id="header">
  <p x-text="title"></p>
</header>

<button id="trigger">Change from Outside</button>

const header = document.querySelector('#header');
const trigger = document.querySelector('#trigger');

trigger.addEventListener('click', () => {
  Alpine.$data(header).title = 'AlpineJS Awesome';
});

📌 Kuncinya: Alpine.$data(el) akan mengembalikan data dari elemen Alpine yang dimaksud.

🧪 3. Mengakses dari Komponen Lain

Misalnya kamu punya komponen lain (misalnya di <main>) yang ingin mengubah data di <header>.

<header x-data="{ title: 'AlpineJS Suck' }" id="header">
  <p x-text="title"></p>
</header>

<main>
  <div x-data="{
    updateTitle() {
      Alpine.$data(document.querySelector('#header')).title = 'AlpineJS Awesome';
    }
  }">
    <button @click="updateTitle">Update Title</button>
  </div>
</main>

💡 Fun fact: Kalau kamu pakai id="header", maka header langsung jadi variabel global di JS (di banyak browser modern). Jadi kode tadi bisa disingkat:

Alpine.$data(header).title = 'AlpineJS Awesome';

🧪 Bonus Demo

Lihat demo lengkapnya di sini 👉 https://iCodeThis.com/code/3972

✍️ Penutup

Kalau kamu cuma butuh akses data Alpine secara ringan dari luar komponen, gunakan teknik $data atau Alpine.$data() ini. Lebih fleksibel daripada harus memindahkan semuanya ke store.

Tapi kalau kamu butuh state global yang diakses dari banyak tempat, tetap gunakan Alpine.store ya!

🚀 Semoga tips ini bermanfaat. Kalau kamu punya cara lain atau pengalaman menarik seputar Alpine, share di komentar!

Sampai jumpa di tulisan selanjutnya 👋

🎭 Must-Know CSS Pseudo-elements (and When to Use Them)

Eris Sulistina — Tue, 20 May 2025 01:11:23 +0000

If you’ve ever styled a placeholder inside an <input>, you’ve already met a pseudo-element — even if you didn’t realize it.

🤔 What Are Pseudo-elements?

In simple terms: pseudo-elements are "virtual elements" that let you style specific parts of an element that you normally can’t target with regular selectors.

For example, when you do this:

input::placeholder {
  color: silver;
}

You're not styling the whole input — you're specifically targeting the placeholder inside it. That placeholder is a pseudo-element.

All pseudo-elements start with a double colon ::, like ::before, ::after, or ::selection.

Want to explore the full list? Check out the MDN docs on Pseudo-elements

📋 Common Pseudo-elements You Should Know

Here’s a quick reference table of useful pseudo-elements, what they do, and how important they are (in my opinion 😉):

Pseudo-element	What It Does	Priority
::after	Inserts content after an element	⭐⭐⭐⭐⭐
::before	Inserts content before an element	⭐⭐⭐⭐⭐
::selection	Styles the part of text the user selects	⭐⭐⭐⭐⭐
::file-selector-button	Styles the button inside `<input type="file">`	⭐⭐⭐⭐
::marker	Styles bullets or numbers in lists	⭐⭐⭐⭐
::backdrop	Styles the overlay behind `<dialog>`	⭐⭐⭐
::details-content	Targets the content of a `<details>` element	⭐⭐⭐
::first-letter	Styles the first letter of a block	⭐⭐⭐
::first-line	Styles the first line of text	⭐⭐⭐
::target-text	Highlights text targeted by URL fragment	⭐⭐⭐
::cue	Styles video captions (WebVTT)	⭐⭐
::view-transition and friends	Powers page transition animations	⭐⭐⭐⭐

Note: The priority stars are totally subjective, based on my dev experience. Feel free to disagree or reorder based on your needs.

🧪 How to See Pseudo-elements in Action?

Most browser dev tools (like Chrome and Firefox) let you inspect pseudo-elements directly in the Elements tab. Open DevTools, select an element, and you’ll often see ::before, ::after, or others appear in the sidebar when used.

✍️ Final Thoughts

Pseudo-elements are small but powerful — they let you enhance your UI without bloating your HTML with extra tags.

Hope this list helps you recognize and use them more effectively in your next project! 🚀

If you found this useful, drop a ❤️ or share your favorite pseudo-element in the comments!

See you in the next post! 👋

DEV Community: Eris Sulistina

Regex in CSS

Understanding Attribute Selectors

Types of Attribute Selectors

Existence Selector → [attr]

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

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

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

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

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

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

Closing thoughts

Regex di CSS

Mengenal Attribute Selectors

Jenis-jenis Attribute Selectors

1. Existence Selector → [attr]

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

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

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

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

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

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

Penutup

[Boost]

10 Modern CSS Features You Want to Use

Logical Pseudo-Classes in CSS

List of Logical Pseudo-Classes

Big 4

❗ :not() — Exclude Elements

🧩 :is() — Combine Multiple Selectors

💡 :where() — Like :is(), But Zero Specificity

🔎 :has() — Target Elements That CONTAIN Other Elements

✨ Closing

Logical Pseudo-class di dalam CSS

Daftar Logical Pseudo-class

Big 4

❗ :not() — Mengecualikan Elemen

🧩 :is() — Menyatukan Beberapa Selector

💡 :where() — Mirip :is(), Tapi Tanpa Bobot Spesifisitas

🔎 :has() — Menargetkan Elemen yang MENGANDUNG Elemen Tertentu

✨ Penutup

📝 Give the Stage to Attributes Because Accessibility Deserves the Spotlight

🤔 What is an Attribute Selector?

🎯 When Does an Attribute Selector Make More Sense?

✅ Semantically Meaningful Attributes

💡 Example 1: Alert UI

💡 Example 2: Required Form Field

💡 Example 3: Tab UI

💡 Example 4: Active Navigation

🚫 When Classes Aren’t Ideal

💡 Example 1: Framework Elements

💡 Example 2: Detect Missing alt Text

💡 Example 3: Label Without for

⚙️ Styling Based on data-* Attributes

💡 Example 1: Dark Mode

💡 Example 2: Button Variants

✨ Final Words

📝 Kasih Panggung untuk Attribute karena Accesibility perlu disambut

🤔 Apa Itu Attribute Selector?

🎯 Kapan Attribute Selector Lebih Baik?

✅ Atribut Semantik

💡 Contoh 1: Alert UI

💡 Contoh 2: Form Wajib Isi

💡 Contoh 3: Tab UI

💡 Contoh 4: Navigation Aktif

🚫 Tidak memungkinkan atau tidak efisien menggunakan class

💡 Contoh 1: Elemen dari Framework

💡 Contoh 2: Deteksi Gambar Tanpa alt

💡 Contoh 3: Label tanpa for

⚙️ Styling Berdasarkan data-* Attribute

💡 Contoh 1: Dark Mode

💡 Contoh 2: Variant Button

✨ Penutup

🧠 Learn CSS Pseudo-classes by Category — With Priorities!

👁️ Element Display State Pseudo-classes

⌨️ Input Pseudo-classes

🌍 Location Pseudo-classes

🌳 Tree-structural Pseudo-classes

🖱️ User Action Pseudo-classes

🧩 Functional Pseudo-classes

Existence Selector → `[attr]`

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

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

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

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

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

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

1. Existence Selector → `[attr]`

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

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

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

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

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

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

❗ `:not()` — Exclude Elements

🧩 `:is()` — Combine Multiple Selectors

💡 `:where()` — Like `:is()`, But Zero Specificity

🔎 `:has()` — Target Elements That CONTAIN Other Elements

💡 Example 2: Detect Missing `alt` Text

💡 Example 3: Label Without `for`

⚙️ Styling Based on `data-*` Attributes

💡 Contoh 3: Label tanpa `for`