CSS Selectors and Specificity

Hordhac

CSS (Cascading Style Sheets) waa luuqad lagu maareeyo muuqaalka iyo naqshadeynta bogagga webka. Mid ka mid ah aasaaska CSS waa selectors, kuwaas oo kuu oggolaanaya inaad qeexdo qaybaha HTML-ka ee aad rabto inaad qaabeyso. Si aad si hufan ugu isticmaasho selectors, waxaa muhiim ah in la fahmo specificity, taas oo go'aamisa sida uu u shaqeeyo qaabkaaga marka ay jiraan dhowr qaabeyn oo ka dhigan qayb ama element. Maqaalkan, waxaan ku eegi doonaa noocyada kala duwan ee CSS selectors iyo sida ay u shaqeeyaan, iyo sidoo kale muhiimadda specificity.

1. Maxay Tahay CSS Selectors?

CSS Selectors and Specificity
 CSS Selectors and Specificity


CSS selectors waa qaabab loo isticmaalo si loo xusho (select) qaybaha HTML-ka. Waxay kuu oggolaanayaan inaad qeexdo qaabeyn gaar ah oo loogu talagalay qaybo kala duwan. Selectors waxay la xiriiraan noocyada HTML, IDs, classes, iyo xitaa sifooyin kale.

2. Noocyada CSS Selectors

Halkan waxaa ku qoran noocyada ugu muhiimsan ee CSS selectors:

a. Universal Selector (*)

Universal selector wuxuu xulayaa dhammaan element-yada ku jira bogga.

css

* {
  margin: 0;
  padding: 0;
}

b. Type Selector

Type selector wuxuu xulayaa dhammaan element-yada noocaas ah.

css

p {
  color: blue;
}

Tusaalahan, dhammaan <p> element-yada waxay noqon doonaan buluug.

c. Class Selector (.)

Class selector wuxuu xulayaa dhammaan element-yada leh class gaar ah.

css

.button {
  background-color: green;
  color: white;
}

Halkan, dhammaan element-yada leh class-ka button ayaa loo dabaqi doonaa qaabkan.

d. ID Selector (#)

ID selector wuxuu xulayaa hal element oo kaliya, taas oo leh ID gaar ah.

css

#header {
  font-size: 24px;
}

Xaaladdan, element-ka leh ID-ga header ayaa loo dabaqi doonaa qaabkan.

e. Descendant Selector

Descendant selector wuxuu xulayaa element-yada ku jira mid kale. Waxaad isticmaali kartaa fursad laga helay (combinators) si aad u qeexdo xiriirka.

css

div p {
  color: red;
}

Halkan, dhammaan <p> element-yada ku jira <div> ayaa noqon doona casaan.

f. Child Selector (>)

Child selector wuxuu xulayaa element-yada ku jira mid gaar ah oo ah carruurtiisa kaliya.

css

ul > li {
  list-style-type: square;
}

Xaaladdan, liisaska tooska ah ee ku jira <ul> ayaa leh nooc toosan.

g. Attribute Selector

Attribute selector wuxuu xulayaa element-yada leh sifo gaar ah.

css

input[type="text"] {
  border: 1px solid black;
}

Tusaalahan, dhammaan input-yada leh attribute-ka type="text" ayaa loo dabaqi doonaa qaabkan.

3. Specificity

Specificity waa habka CSS uu go'aamiyo qaabka lagu dabaqi doono element-ka marka ay jiraan xeerar badan oo ka dhigan. Specificity waxay ka kooban tahay afar darajo:

  • Inline styles: (1,0,0,0) — Nooc kasta oo style ah oo lagu daray toos element-ka HTML.
  • IDs: (0,1,0,0) — Hal ID selector.
  • Classes, attributes, iyo pseudo-classes: (0,0,1,0) — Hal class selector ama attribute selector.
  • Type selectors iyo pseudo-elements: (0,0,0,1) — Hal type selector.

Tusaale:

css

/* Xeerarka */
p {
  color: red; /* (0,0,0,1) */
}

.button {
  color: blue; /* (0,0,1,0) */
}

#header {
  color: green; /* (0,1,0,0) */
}

/* Inline style */
<p id="header" style="color: yellow;">Hello World</p>

Halkan, farriinta "Hello World" waxay noqon doontaa jaalle sababtoo ah inline style (1,0,0,0) wuxuu ka sarreeyaa xeerarka kale.

4. Isku-dhafka Selectors

Waxaad isku dari kartaa selectors si aad u abuurto qaabeyn gaar ah. Tusaale ahaan:

css

div.button:hover {
  background-color: darkgreen;
}

Xaaladdan, badhanka div leh class button wuxuu yeelan doonaa midab ka duwan marka la hover.

Gunaanad

CSS selectors iyo specificity waa qodobo muhiim ah oo aad u baahan tahay inaad fahanto si aad u sameyso naqshad wax ku ool ah. Selectors waxay kuu oggolaanayaan inaad qeexdo qaybo HTML ah si ay u helaan qaabeyn gaar ah, halka specificity ay go'aamiso sida ay u shaqeyso qaabeynta marka ay jiraan xeerar badan. Fahan wanaagsan oo ku saabsan labadan arrimood ayaa kaa caawin doona inaad si hufan u maareyso qaabeynta boggaaga webka.

Tags
Previous Post Next Post