Tilmaamaha Adag ee CSS (Advanced Selectors)

Casharkan waxaan ku baran doonnaa xulayaasha (Selectors) ee heerka sare (advanced) [1]. Kuwani waxay kuu sahlayaan inaad qorto kood kooban oo CSS ah oo qabta shaqo aad u baaxad weyn. Waxyaabaha aan baran doonno waxaa ka mid ah :is(), :where(), :has(), :not(), habka is-dhex-galka koodka (CSS Nesting), weydiimaha weelka (Container Queries), iyo lakabyada kala-sarreeya (Cascade Layers) [1]. Sifooyinkani waxay kor u qaadaan awoodda iyo tayada qorista CSS.

Xulaha Isku-duubnida — `:is()`

Sifada :is() waxay kuu sahlaysaa inaad hal meel isugu keento (kooxayso) xulayaal kala duwan si aad u yarayso ku-celiska koodka:

/* Kood dheer oo ku-celis leh: */
header a:hover, main a:hover, footer a:hover {
  color: #3b82f6;
}

/* Isticmaalka :is() — oo aad u gaaban kuna habboon dayactirka: */
:is(header, main, footer) a:hover {
  color: #3b82f6;
}

Ogow: Sifada :is() waxay si toos ah u qaadataa awoodda ugu sarreysa (highest specificity) ee ku dhex jirta xulayaasha la kooxeeyay [1].

Xulaha Awoodda Eberka ah — `:where()`

Sifada :where() waxay u shaqaysaa si la mid ah :is(), laakiin awooddeeda gaarka ah (specificity) had iyo jeer waa 0 [1]:

/* Awoodda (Specificity): 0 0 1 0 */
:where(header, main, footer) a {
  color: #64748b;
}

/* Xeerkani wuu ka awood badnaanayaa kan :where() — inkastoo awoodda 'a' ay tahay mid guud (0 0 0 1) */
a { color: #2563eb; }

/* Haddii aan adeegsan lahayn :is(), wuu ka awood badnaan lahaa xeerka caadiga ah ee 'a'. */

Xulaha	Awoodda (Specificity)	Faa’iidada uu leeyahay
`:is()`	Midka ugu awoodda badan	Yaraynta iyo fududeynta koodka
`:where()`	0 (eber)	Waxaa si dhib yar looga adkaan karaa xeerar kale (easy to override)

Xulaha Curiyaha Sare (Parent Selector) — `:has()`

Sifada :has() waa xulaha curiyaha sare (parent selector). Waxay kuu sahlaysaa inaad qaabayso curiye sare iyadoo lagu tixgelinayo waxa ku dhex jira (carruurta) [1]:

/* Kaadhka uu sawirku ku dhex jiro: */
.card:has(img) {
  grid-column: span 2;
  border-color: #3b82f6;
}

/* Foomka uu qaladku ku dhex jiro: */
form:has(.error) {
  border-color: #ef4444;
  background: #fef2f2;
}

/* Baarka shaqada ee uu menu-kiisu furan yahay: */
nav:has(.menu-open) {
  background: #0f172a;
}

Tusaale	Sharaxaadda hannaankiisa
`.card:has(img)`	Wuxuu dooranayaa `.card` oo kaliya haddii uu dhexdiisa ku jiro `img`
`div:has(> p)`	Wuxuu dooranayaa `div` haddii curiyaha `p` uu yahay farac toos ah
`label:has(input:focus)`	Wuxuu dooranayaa `label` haddii input-ka gudihiisa ku jira la gujiyay (`focus`)

Xulaha Reebista — `:not()`

Sifada :not() waxay doorataa dhammaan curiyayaasha aan buuxin shuruudaha ama aan lahayn xulaha la dhex qoray:

/* Dhammaan sanduuqyada wax-qorista (inputs) ee aan xirneyn: */
input:not(:disabled) {
  background: white;
}

/* Dhammaan kaadhadhka aan lahayn calaamadda rasmiga ah (badge): */
.card:not(.has-badge) {
  opacity: 0.7;
}

/* Dhammaan walxaha liiska ku jira marka laga reebo kan ugu horreeya: */
li:not(:first-child) {
  border-top: 1px solid #e2e8f0;
}

Habka Xisaabeed ee `:nth-child(An+B)`

Sifada :nth-child() waxay kuu oggolaanaysaa inaad u adeegsato hab-xisaabeed (formulas) si aad u beegsato curiyayaal gaar ah:

/* Saddex saf kasta mid ka mid ah: */
tr:nth-child(3n) {
  background: #f8fafc;
}

/* Afarta curiye ee ugu horreeya: */
li:nth-child(-n+4) {
  font-weight: 700;
}

/* Curiyaha labaad ilaa kan shanaad u dhexeeya: */
li:nth-child(n+2):nth-child(-n+5) {
  color: #3b82f6;
}

Hab-xisaabeedka	Sharaxaadda	Curiyayaasha la dooranayo
`odd`	Safafka kinsiga ah	1, 3, 5, …
`even`	Safafka dhabanka ah	2, 4, 6, …
`3n`	Saddex curiye kasta mid ka mid ah	3, 6, 9, …
`3n+1`	Saddex kasta + 1	1, 4, 7, …
`-n+3`	Saddexda ugu horreeya	1, 2, 3
`n+4`	Laga bilaabo curiyaha afaraad	4, 5, 6, …

Is-dhex-galka Koodka (CSS Nesting) iyo `&`

Bog-furayaasha casriga ah waxay si toos ah u taageeraan is-dhex-galka koodka (CSS Nesting) iyadoo loo adeegsanayaa astaanta & si la mid ah sidii SASS/SCSS laga heli jiray:

.card {
  background: white;
  border-radius: 12px;

  & img {
    border-radius: 12px 12px 0 0;
  }

  & .content {
    padding: 20px;
  }

  &:hover {
    box-shadow: 0 8px 24px rgba(0,0,0,0.08);
  }

  @media (min-width: 768px) {
    & { padding: 24px; }
  }
}

Weydiimaha Weelka (Container Queries) — `@container`

Weydiimaha Weelka (Container Queries) waxay aad ugu dhow yihiin weydiimaha warbaahinta (Media Queries), laakiin kala-duwanaanshuhu waa inay ku xiran yihiin ballaca curiyaha sare (waalidka), ee aysan tixraacin ballaca guud ee shaashadda (viewport) [1]:

/* U qeex curiyaha sare inuu noqdo weel cabbiran (Container): */
.kaadhada {
  container-type: inline-size;
  container-name: card-list;
}

/* U qor weydiinta (query) gaarka ah ee weelkaas: */
@container card-list (min-width: 400px) {
  .card {
    display: grid;
    grid-template-columns: 120px 1fr;
    gap: 16px;
  }
}

@container card-list (max-width: 399px) {
  .card {
    display: flex;
    flex-direction: column;
  }
}

Sifada	Sharaxaadda doorkeeda
`container-type: inline-size`	U qeexista curiyaha inuu noqdo weel isku cabbira jihooyinka jiifka ah
`container-name: x`	U bixinta magac u gaar ah weelka si loogu tixraaco
`@container x (min-width: 400px)`	Weydiinta iyo fulinta koodka marka weelka gaarka ah uu buuxiyo shuruudda

Lakabyada Kala-sarreeya (Cascade Layers) — `@layer`

Sifada @layer waxay kuu sahlaysaa inaad maamusho lakabyada kala-sarreynta awoodda koodka (specificity) adoo naqshadaynaya nidaamka koodka CSS-ka:

@layer reset, base, components, utilities;

@layer reset {
  *, *::before, *::after { box-sizing: border-box; margin: 0; }
}

@layer base {
  body { font-family: system-ui, sans-serif; color: #0f172a; }
  a { color: #3b82f6; }
}

@layer components {
  .card { background: white; border-radius: 12px; padding: 20px; }
}

@layer utilities {
  .text-center { text-align: center; }
  .mt-4 { margin-top: 16px; }
}

Faa’iidada weyn: Waxaad qori kartaa koodka adigoo ka welweli la’ awoodda gaarka ah ee xulayaasha (specificity) — sababtoo ah lakabka (layer) dambe ayaa mar walba ka awood badan kii ka horreeyay ee loo qeexay nidaamka.

`:focus-within` iyo `:focus-visible`

/* Curiyaha sare ee ay ku dhex jiraan unugyada la gujiyay (focus-within): */
.foom:focus-within {
  border-color: #3b82f6;
  box-shadow: 0 0 0 3px rgba(59,130,246,0.12);
}

/* Qaabaynta focus-ka marka keyboard-ka la adeegsado (focus-visible): */
*:focus-visible {
  outline: 2px solid #3b82f6;
  outline-offset: 2px;
}

Sifooyinka ku xiran Jihada Qoraalka (Logical Properties)

Sifooyinka Logical Properties waxay si toos ah ula qabsadaan jihada qoraalka luuqadda (hadduu yahay mid ka bilaabma bidix-ilaa-midig LTR ama midig-ilaa-bidix RTL) [1]:

/* Jihooyinka Bidix iyo Midig: */
margin-left: 20px;     /* Habkii hore (Qadiimiga) */
margin-inline-start: 20px; /* Habka Logical — wuxuu si toos ah u noqonayaa bidix marka uu yahay LTR, midigna marka uu yahay RTL */

padding-right: 20px;
padding-inline-end: 20px;

/* Jihooyinka Sare iyo Hoose: */
padding-top: 16px;
padding-block-start: 16px;

margin-bottom: 20px;
margin-block-end: 20px;

Tusaale Mashruuc Dhamaystiran

<!DOCTYPE html>
<html lang="so">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Advanced Selectors — :has() &amp; @container</title>
  <style>
    * { box-sizing: border-box; margin: 0; padding: 0; }

    @layer base {
      body {
        font-family: system-ui, sans-serif;
        background: #f8fafc;
        padding: 32px 20px;
        color: #0f172a;
      }
    }

    @layer components {
      .weelka {
        max-width: 900px;
        margin: 0 auto;
      }

      h1 { font-size: 1.75rem; margin-bottom: 8px; }
      .subtitle { color: #64748b; margin-bottom: 32px; }
    }

    /* Isku-hagaajinta kaadhadhka adoo adeegsanaya Container Queries */
    .card-grid {
      container-type: inline-size;
      container-name: grid;
    }

    .card-list {
      display: grid;
      gap: 16px;
    }

    @container grid (min-width: 500px) {
      .card-list {
        grid-template-columns: 1fr 1fr;
      }
    }

    @container grid (min-width: 700px) {
      .card-list {
        grid-template-columns: 1fr 1fr 1fr;
      }
    }

    /* Naqshadaynta kaadhadhka (Card styling) */
    .card {
      background: white;
      border-radius: 14px;
      border: 1px solid #e2e8f0;
      padding: 20px;
      transition: all 0.2s;
    }

    .card h3 { font-size: 0.95rem; margin-bottom: 6px; }
    .card p  { font-size: 0.85rem; color: #64748b; line-height: 1.6; }

    /* Isticmaalka :has() — kaadhka leh icon-ka ama sifooyin gaar ah */
    .card:has(.card-icon) {
      border-left: 4px solid #3b82f6;
    }

    .card:has(.tag-hot) {
      border-color: #f59e0b;
    }

    .card:has(.tag-new) {
      border-color: #22c55e;
    }

    .card-icon {
      font-size: 2rem;
      margin-bottom: 10px;
    }

    .tag {
      display: inline-block;
      font-size: 0.7rem;
      font-weight: 600;
      padding: 2px 8px;
      border-radius: 99px;
      margin-top: 10px;
    }

    .tag-hot { background: #fef3c7; color: #92400e; }
    .tag-new { background: #dcfce7; color: #166534; }
    .tag-popular { background: #dbeafe; color: #1e40af; }

    /* Tusaalaha :not() — kaadh kasta oo ka dambeeya kan ugu horreeya */
    .card-list .card:not(:first-child) {
      border-top: 3px solid #f1f5f9;
    }

    /* Muujinta :nth-child — dhibcaha midabada leh */
    .color-row {
      display: flex;
      gap: 8px;
      margin-bottom: 32px;
      flex-wrap: wrap;
    }

    .color-dot {
      width: 36px;
      height: 36px;
      border-radius: 50%;
      border: 2px solid #e2e8f0;
    }

    .color-dot:nth-child(3n) {
      border-color: #3b82f6;
      transform: scale(1.15);
    }

    .color-dot:nth-child(5) {
      border-color: #ef4444;
      box-shadow: 0 0 0 3px rgba(239,68,68,0.2);
    }

    /* Iftiiminta foomka adoo adeegsanaya :focus-within */
    .foom-demo:focus-within {
      border-color: #3b82f6;
      box-shadow: 0 0 0 3px rgba(59,130,246,0.1);
    }

    .foom-demo {
      background: white;
      border: 2px solid #e2e8f0;
      border-radius: 14px;
      padding: 24px;
      margin-bottom: 32px;
      transition: all 0.2s;
    }

    .foom-demo label { display: block; font-size: 0.8rem; font-weight: 600; margin-bottom: 4px; }
    .foom-demo input {
      width: 100%;
      padding: 8px 12px;
      border: 1px solid #e2e8f0;
      border-radius: 8px;
      font-size: 0.9rem;
    }
    .foom-demo input:focus {
      outline: none;
    }

    /* Habka is-dhex-galka koodka (Nested CSS) */
    .nest-demo {
      background: white;
      border-radius: 14px;
      padding: 24px;
      border: 1px solid #e2e8f0;

      & h2 { font-size: 1.1rem; margin-bottom: 12px; }
      & p  { color: #64748b; line-height: 1.7; }
      & .note { font-size: 0.8rem; color: #94a3b8; margin-top: 12px; }
    }

    @media (max-width: 640px) {
      .nest-demo {
        padding: 16px;
      }
    }

    /* Cinwaannada qaybaha */
    h2 { font-size: 1.25rem; margin: 32px 0 12px; }
    code { background: #f1f5f9; padding: 1px 5px; border-radius: 4px; font-size: 0.85em; }
  </style>
</head>
<body>

<div class="weelka">
  <h1>Advanced Selectors</h1>
  <p class="subtitle">:is() · :has() · :not() · :nth-child · @container · @layer</p>

  <!-- :has() demo -->
  <h2><code>:has()</code> — Kaadhadhka gaarka ah</h2>
  <div class="card-grid">
    <div class="card-list">
      <div class="card">
        <div class="card-icon">🎨</div>
        <h3>CSS Design</h3>
        <p>Baro sida loo sameeyo naqshad qurux badan.</p>
        <span class="tag tag-new">Cusub</span>
      </div>

      <div class="card">
        <div class="card-icon">📊</div>
        <h3>Data Visualization</h3>
        <p>Jadwallada, graphs, iyo macluumaadka.</p>
        <span class="tag tag-hot">Hot</span>
      </div>

      <div class="card">
        <h3>Farta iyo Qoraalka</h3>
        <p>Casharka farta — ma laha icon, sidaas darteed ma laha xariiq buluug ah.</p>
        <span class="tag tag-popular">Popular</span>
      </div>

      <div class="card">
        <div class="card-icon">🚀</div>
        <h3>Performance</h3>
        <p>Waxqabadka website-ka hagaaji.</p>
        <span class="tag tag-new">Cusub</span>
      </div>

      <div class="card">
        <h3>Networking</h3>
        <p>Baro sida internetka u shaqeeyo.</p>
        <span class="tag tag-hot">Hot</span>
      </div>

      <div class="card">
        <div class="card-icon">✨</div>
        <h3>Animations</h3>
        <p>Dhaqdhaqaaqa CSS oo dhammaystiran.</p>
        <span class="tag tag-popular">Popular</span>
      </div>
    </div>
  </div>

  <p style="color:#94a3b8; font-size:0.8rem; margin-top:8px;">
    Kaadhadhka leh icon-ka waxay leeyihiin xariiq buluug ah (<code>.card:has(.card-icon)</code>).
    Kaadhadhka aan ahayn kan ugu horreeya waxay leeyihiin xariiq dusha sare ah (<code>:not(:first-child)</code>).
  </p>

  <!-- :nth-child demo -->
  <h2><code>:nth-child(3n)</code> — Dhibcaha Midabada leh</h2>
  <div class="color-row">
    <div class="color-dot" style="background:#3b82f6;"></div>
    <div class="color-dot" style="background:#22c55e;"></div>
    <div class="color-dot" style="background:#ef4444;"></div>
    <div class="color-dot" style="background:#f59e0b;"></div>
    <div class="color-dot" style="background:#8b5cf6;"></div>
    <div class="color-dot" style="background:#ec4899;"></div>
    <div class="color-dot" style="background:#14b8a6;"></div>
    <div class="color-dot" style="background:#6366f1;"></div>
  </div>
  <p style="color:#94a3b8; font-size:0.8rem;">
    Dhibic kasta oo 3-aad (<code>:nth-child(3n)</code>) waxay leedahay xariiq buluug ah, halka dhibicda 5-aad ay casaan tahay.
  </p>

  <!-- CSS Nesting demo -->
  <h2>CSS Nesting <code>&amp;</code></h2>
  <div class="nest-demo">
    <h2>Qoraalkan wuxuu ku dhex jiraa .nest-demo</h2>
    <p>CSS Nesting waxay u shaqaysaa si la mid ah SASS — astaanta <code>&amp;</code> waxay tixraacdaa curiyaha sare ee ku dhex jira.</p>
    <div class="note">CSS-ka: .nest-demo { &amp; h2 { ... } &amp; p { ... } }</div>
  </div>

  <!-- :focus-within demo -->
  <h2><code>:focus-within</code> — Foomka</h2>
  <div class="foom-demo">
    <label for="demo-input">Geli qoraal — si aad u aragto sida foomku u iftiimayo</label>
    <input type="text" id="demo-input" placeholder="Guji halkan...">
    <p style="margin-top:8px; font-size:0.8rem; color:#94a3b8;">
      Foomka oo dhan wuxuu yeelanayaa xariiq firfircoonaan ah (focus ring) marka aad gujiso meesha wax lagu qorayo.
    </p>
  </div>

  <!-- Container Query note -->
  <h2><code>@container</code></h2>
  <p style="color:#64748b; font-size:0.9rem; line-height:1.7;">
    Kaadhadhka sare waxay adeegsayan weydiimaha weelka (Container Queries). Haddii aad ballaariso ama aad yarayso weelka guud,
    qaabka kaadhadhku wuu isbeddelayaa iyadoo lagu tixgelinayo weelka sare, ee aysan ku xirnayn shaashadda guud.
    Tan waxaa loo yaqaan <strong>responsiveness-ka heerka-curiyaha (component-level responsiveness)</strong>.
  </p>
</div>

</body>
</html>

Casharka xiga: Waxaan ku baran doonnaa Qaababka Caanka ah ee Qaab-dhismeedka Bogga (Page Layout Patterns) ee CSS.

Xulaha Isku-duubnida — :is()

Xulaha Awoodda Eberka ah — :where()

Xulaha Curiyaha Sare (Parent Selector) — :has()

Xulaha Reebista — :not()

Habka Xisaabeed ee :nth-child(An+B)

Is-dhex-galka Koodka (CSS Nesting) iyo &

Weydiimaha Weelka (Container Queries) — @container

Lakabyada Kala-sarreeya (Cascade Layers) — @layer

:focus-within iyo :focus-visible