🎨 CSS Lesson 01 — Selectors & Specificity

1. Element Selector

Tag name တိုက်ရိုက် target လုပ်တယ် — page ထဲ အဲဒီ element အကုန်ကို apply ဖြစ်

p    { color: red; }
h4   { color: blue; }
span { color: green; }

2. Class Selector (.)

Class တူတဲ့ element တွေ အကုန်ကို target — element တစ်ခုမှာ class တစ်ခုထက်မက ထည့်လို့ရ

.highlight { background: yellow; }
.bold-text { font-weight: bold; }
.big-text  { font-size: 1.3em; }

<p class="highlight bold-text">Multiple classes!</p>

3. ID Selector (#)

Page ထဲ unique element တစ်ခုပဲ target — ID တစ်ခုကို element တစ်ခုပဲ သုံးသင့်

#special-title {
  color: red;
  font-size: 1.4em;
  text-decoration: underline;
}

4. Combinator Selectors

div p      → Descendant  (div ထဲ မည်သည့် p မဆို)
div > p    → Child       (div ရဲ့ direct child p ပဲ)
h5 + p     → Adjacent    (h5 ရဲ့ ချက်ချင်းနောက် p)
h5 ~ p     → Sibling     (h5 ရဲ့ နောက် sibling p အကုန်)

5. Pseudo-class (:)

Element ရဲ့ state ပေါ် မူတည်ပြီး style ချ — :hover, :focus, :nth-child, :first-child...

a:hover      { background: blue; color: white; }
li:first-child  { color: green; }
li:nth-child(2) { color: blue; }
li:nth-child(odd) { background: #f0f0f0; }
input:focus  { border-color: blue; }

6. Pseudo-element (::)

Element ရဲ့ တစ်ပိုင်းကို target — ::before, ::after, ::first-line, ::first-letter

p::first-line    { color: blue; }       /* ပထမဆုံး line */
p::first-letter  { font-size: 2em; }    /* ပထမဆုံး စာလုံး */
.box::before { content: "→ "; color: green; }
.box::after  { content: " ←"; color: red; }

7. Attribute Selector ([])

[type="text"]    { border: 2px solid green; }
[type="email"]   { border: 2px solid blue; }
[disabled]       { opacity: 0.4; }
[href^="https"]  { color: green; }   /* starts with */
[href$=".pdf"]   { color: red; }     /* ends with */
[href*="vue"]    { color: orange; }  /* contains */
a[target="_blank"]::after { content: " ↗"; }

8. Specificity — ဘယ် Style ကအနိုင်ရသလဲ

Conflict ဖြစ်ရင် specificity အမြင့်ဆုံးကအနိုင်ရတယ်

/* Specificity တွက်နည်း: (inline, id, class, element) */

p              → (0, 0, 0, 1) → score: 1
.class         → (0, 0, 1, 0) → score: 10
#id            → (0, 1, 0, 0) → score: 100
style=""       → (1, 0, 0, 0) → score: 1000
!important     → nuclear option 💣