Xulayaasha CSS (Selectors)

Xulayaasha (selectors) waa qaybta koowaad ee xeer kasta oo CSS ah. Waxay u sheegaan bog-furaha (browser-ka) curiyaha ama curiyayaasha (elements) ee la rabo in la qaabeeyo oo la qurxiyo [1].

1. Xulaha Curiyaha (Element Selector)

Wuxuu doortaa dhammaan curiyayaasha isku nooca ah ee ku jira bogga:

/* Dhammaan curiyayaasha h1 */
h1 { color: #0a0a0a; font-size: 2rem; }

/* Dhammaan curiyayaasha p */
p  { color: #555; line-height: 1.8; }

/* Dhammaan badhamada (button) */
button { background: #00d97e; border: none; }

2. Xulaha Class-ka / Kooxda (Class Selector) .

Wuxuu doortaa dhammaan curiyayaasha leh class-kaas gaarka ah. Si looga dhex saaro curiyayaasha kale, waxaa magaca class-ka laga horreysiiyaa dhibic .:

.badhanka      { background: #00d97e; padding: 10px 20px; }
.qoraal-weyn   { font-size: 1.5rem; font-weight: 700; }
.mid-cas       { color: red; }

<button class="badhanka">Gujiso</button>
<p class="qoraal-weyn">Qoraalkan waa mid weyn</p>
<p class="mid-cas">Qoraalkan waa mid casaan ah</p>

<!-- Curiye leh class-yo badan -->
<p class="qoraal-weyn mid-cas">Waa weyn yahay, midabkiisuna waa casaan</p>

3. Xulaha Aqoonsiga (ID Selector) #

Wuxuu doortaa hal curiye oo kaliya oo leh aqoonsiga id ee la tilmaamay. Waxaa magaca ID-ga laga horreysiiyaa calaamadda #:

#cinwaanka-ugu-weyn { font-size: 3rem; text-align: center; }
#nav-bar            { background: #0a0a0a; }
#hoosta             { border-top: 1px solid #eee; }

<h1 id="cinwaanka-ugu-weyn">Ereyle Learning</h1>
<nav id="nav-bar">...</nav>

Talo Muhiim Ah: Adeegso Class-yada inta badan si aad koodka u isticmaali karto marar badan. ID-ga u daa kaliya marka aad qaabaynayso hal curiye oo gaar ah oo aan bogga ku soo noqnoqonayn.

4. Xulaha Caalamiga ah (Universal Selector) *

Wuxuu doortaa dhammaan curiyayaasha ku jira bogga oo dhan iyadoon la kala reebayn:

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

Inta badan waxaa loo adeegsadaa dib-u-habaynta (CSS Reset) si meesha looga saaro margin-ka iyo padding-ka dabiiciga ah ee bog-furayaashu siiyaan curiyayaasha.

5. Xulaha Kooxaynta (Group Selector) ,

Haddii aad rabto inaad xeer isku mid ah u adeegsato curiyayaal kala duwan, halkii aad mid kasta si gaar ah u qori lahayd, waxaad u qori kartaa hal mar adigoo ku kala saaraya dhibic-iyo-gole (comma) ,:

/* Badalkii aad saas u qori lahayd: */
h1 { color: #0a0a0a; }
h2 { color: #0a0a0a; }
h3 { color: #0a0a0a; }

/* Waxaad u qori kartaa si kooban oo ka dhowrsan ku-celis: */
h1, h2, h3 { color: #0a0a0a; }

/* Sidoo kale, waxaad isku dhex dari kartaa noocyo kala duwan: */
h1, .cinwaanka, #magaca {
  font-family: 'Georgia', serif;
  letter-spacing: -0.02em;
}

6. Xulaha Faraca (Descendant Selector) (Meel bannaan)

Wuxuu doortaa dhammaan curiyayaasha ku dhex jira curiye kale oo gaar ah (ha ahaadaan kuwo toos ugu dhex jira ama farac sii dhex jira):

/* Dhammaan xiriiriyayaasha <a> ee ku dhex jira <nav> */
nav a { color: white; text-decoration: none; }

/* Dhammaan walxaha <li> ee ku dhex jira class-ka .liiska */
.liiska li { margin-bottom: 8px; }

/* Dhammaan <strong> ee ku dhex jira <p> ee isna ku dhex jira <article> */
article p strong { color: #00a860; }

<nav>
  <a href="/">Hoyga</a>      <!-- ✓ Waa la doortay -->
  <a href="/koorso">Koorso</a> <!-- ✓ Waa la doortay -->
</nav>
<a href="#">Link kale</a> <!-- ✗ Lama dooranayo (maadaama uusan ku dhex jirin nav) -->

7. Xulaha Faraca Tooska ah (Child Selector) >

Wuxuu doortaa oo kaliya faraca tooska ah (direct child) ee curiyaha sare, isagoo iska indho-tiraya faraca sii dhex jira:

/* Kaliya <li> toos ugu dhex jira <ul> oo leh class-ka .liiska */
ul.liiska > li { font-weight: 600; }

/* Kaliya <p> toos ugu dhex jira .kaadhka */
.kaadhka > p { color: #333; }

<ul class="liiska">
  <li>Walax 1 ✓ (Waa la doortay)</li>
  <li>
    Walax 2 ✓ (Waa la doortay)
    <ul>
      <li>Hoosaadka — ✗ (Lama dooranayo sababtoo ah ma aha farac toos ah)</li>
    </ul>
  </li>
</ul>

8. Xulaha Deriska Tooska ah (Adjacent Sibling) +

Wuxuu doortaa curiyaha isla heerka ah ee isla markiiba ku xiga curiyaha hore:

/* Curiyaha <p> ee isla markiiba ku xiga <h2> */
h2 + p {
  font-size: 1.1rem;
  color: #333;
  margin-top: 0;
}

<h2>Cinwaanka</h2>
<p>Tuduca koowaad — ✓ Waa la doortay (waayo wuxuu ku xigaa h2)</p>
<p>Tuduca labaad — ✗ Lama doorto (waayo isla markiiba kuma xigo h2)</p>

9. Xulaha Walaalaha Guud (General Sibling) ~

Wuxuu doortaa dhammaan curiyayaasha isla heerka ah ee ka dambeeya curiyaha hore:

h2 ~ p { color: #666; }

<h2>Cinwaanka</h2>
<p>Tuduc 1 — ✓ Waa la doortay</p>
<p>Tuduc 2 — ✓ Waa la doortay</p>
<p>Tuduc 3 — ✓ Waa la doortay</p>

10. Xulaha Sifada Curiyaha (Attribute Selector) []

Wuxuu doortaa curiyayaasha iyadoo lagu dhowrayo sifooyinka gaarka ah ee ay u leeyihiin HTML-ka dhexdiisa:

/* Dhammaan input-yada leh sifo ah type="text" */
input[type="text"]     { border: 2px solid #00d97e; }
input[type="password"] { border: 2px solid red; }
input[type="email"]    { border: 2px solid blue; }

/* Dhammaan xiriiriyayaasha <a> ee href-koodu ka bilaabmo "https" */
a[href^="https"] { color: green; }

/* Dhammaan xiriiriyayaasha <a> ee href-koodu ku dhammaado ".pdf" */
a[href$=".pdf"]  { color: red; }

/* Dhammaan sawirrada <img> ee alt-kooda ay ku jirto ereyga "ereyle" */
img[alt*="ereyle"] { border: 2px solid #00d97e; }

11. Xulaha Xaaladda (Pseudo-Classes) :

Waxay doortaan curiyayaasha marka ay ku jiraan xaalad gaar ah (sida marka la taabto, la riixo, ama la booqdo):

/* Hover — marka tilmaamaha jiirka la dul saaro */
a:hover           { color: #00d97e; text-decoration: underline; }
button:hover      { opacity: 0.85; transform: translateY(-1px); }

/* Focus — marka curiyaha la dhex taagan yahay (sida sanduuqa qoraalka) */
input:focus       { border-color: #00d97e; outline: none; box-shadow: 0 0 0 3px rgba(0,217,126,0.2); }

/* Active — marka badhanka la riixayo isla daqiiqaddaas */
button:active     { transform: scale(0.97); }

/* Visited — xiriiriye horay loo booqday */
a:visited         { color: purple; }

/* First/last child — kan ugu horreeya ama ugu dambeeya */
li:first-child    { font-weight: 700; }
li:last-child     { border-bottom: none; }

/* Nth child — u doorista boos gaar ah */
tr:nth-child(even) { background: #f9f9f9; } /* Safafka dhabanka ah */
tr:nth-child(odd)  { background: white; }   /* Safafka kinsiga ah */

/* li:nth-child(3n) — mid kasta oo saddexaad */
li:nth-child(3n)  { color: #00d97e; }

/* Not — ka-reebista curiye gaar ah */
p:not(.gaarka)    { color: #555; }

/* Required / disabled — ku xiran xaaladda foomka */
input:required    { border-left: 3px solid #00d97e; }
input:disabled    { opacity: 0.5; cursor: not-allowed; }

12. Xulaha Qaybaha Gaarka ah (Pseudo-Elements) ::

Waxay qaabeeyaan qayb ka mid ah curiyaha, halkii ay qaabayn lahaayeen curiyaha oo dhan:

/* Xarafka ugu horreeya ee tuduca */
p::first-letter {
  font-size: 2.5rem;
  font-weight: 700;
  float: left;
  margin-right: 6px;
  color: #00d97e;
}

/* Xariiqda ugu horreysa ee tuduca */
p::first-line { font-weight: 600; }

/* Nuxur lagu darayo curiyaha hortiisa */
.xidid::before {
  content: "✦ ";
  color: #00d97e;
}

/* Nuxur lagu darayo curiyaha gadaashiisa */
.cusub::after {
  content: " 🆕";
}

/* Marka qoraalka bogga la xusho (laga jiido mouse-ka) */
::selection {
  background: #00d97e;
  color: #0a0a0a;
}

/* Qaabaynta qoraalka hordhaca ah (placeholder) ee ku dhex jira input-ka */
input::placeholder { color: #bbb; font-style: italic; }

Awoodda Xulayaasha (Specificity)

Marka ay jiraan xeerar isku dhacaya oo hal curiye wada beegsanaya, xeerka leh dhibcaha awoodda ugu sarreeya ayaa la fuliyaa:

/* Awoodda = 1 (Curiye kaliya) */
p { color: black; }

/* Awoodda = 10 (Class kaliya) */
.qoraal { color: blue; }

/* Awoodda = 100 (ID kaliya) */
#gaarka { color: green; }

/* Awoodda = 11 (Curiye + Class) */
p.qoraal { color: red; }

/* Awoodda = 111 (ID + Class + Curiye) */
#gaarka .qoraal p { color: purple; }

Tusaale Dhamaystiran

<!DOCTYPE html>
<html lang="so">
<head>
  <meta charset="UTF-8">
  <title>Xulayaasha CSS</title>
  <style>
    * { box-sizing: border-box; margin: 0; padding: 0; }

    body {
      font-family: sans-serif;
      background: #f9f7f4;
      padding: 40px 20px;
    }

    /* Curiyaha (Element) */
    h1 { font-size: 2rem; margin-bottom: 8px; }

    /* Kooxda (Class) */
    .xidid { color: #00d97e; }

    /* Aqoonsiga (ID) */
    #cinwaanka { text-align: center; margin-bottom: 40px; }

    /* Faraca (Descendant) */
    nav a {
      display: inline-block;
      padding: 8px 16px;
      color: #555;
      text-decoration: none;
    }
    nav a:hover { color: #00d97e; }

    /* Booska (Nth-child) */
    li:nth-child(odd)  { background: #f0fdf8; }
    li:nth-child(even) { background: #fff; }
    li { padding: 10px 16px; list-style: none; }

    /* Kahor (Before) */
    .xidid::before { content: "▶ "; font-size: 0.8em; }

    /* Xulista (Selection) */
    ::selection { background: #00d97e; color: #0a0a0a; }
  </style>
</head>
<body>

  <div id="cinwaanka">
    <h1>Xulayaasha <span class="xidid">CSS</span></h1>
    <nav>
      <a href="#">Hoyga</a>
      <a href="#">Koorsooyinka</a>
      <a href="#">Xiriir</a>
    </nav>
  </div>

  <ul>
    <li class="xidid">HTML Basics</li>
    <li>CSS Basics</li>
    <li class="xidid">JavaScript</li>
    <li>React</li>
    <li class="xidid">Node.js</li>
  </ul>

</body>
</html>

Casharka xiga: Waxaan ku baran doonaa Midabada iyo Gadaal-ka-buuxiyaha (Backgrounds) ee CSS.