Maqaalka: Pseudo-classes iyo pseudo-elements waa labo qaab oo muhiim u ah CSS, kuwaas oo kuu oggolaanaya inaad saameyn gaar ah ku samayso qaybo ka mid ah HTML, adigoon wax isbeddel ah ku samaynin qoraalka laftiisa. Tani waxay kuu suurtogelinaysaa inaad naqshadeyn gaar ah siiso qaybaha boggaaga iyadoo aanad u baahnayn inaad ku darto waxyaabo cusub boggaaga HTML.
Pseudo-classes
 |
| Pseudo-classes and pseudo-element |
Pseudo-classes waa siyaabo gaar ah oo CSS u isticmaasho inay u muujiso qaybaha marka xaalado gaar ah dhacaan. Qaar ka mid ah pseudo-classes-ka caanka ah waxaa ka mid ah:
:hover: Waxaa la isticmaalaa marka curiyaha la dul-maro ama la gujiyo (hover) iyadoo la isticmaalayo jiirka.:focus: Waxay saameyn ku leedahay curiyaha marka uu diiradda ku jiro, sida marka qof uu ku garaaco tab ama gujiyo meel furan oo qoraalka ah.:nth-child(): Waxaa lagu dabaqi karaa walxaha kala duwan iyadoo loo eegayo booska ay ku jiraan waalidkooda.:active: Waxaa la isticmaalaa marka curiyaha la gujiyo ama uu ku jiro xaalad firfircoon.
Tusaale ahaan, haddii aad rabto inaad midabka qoraalka isbedesho marka qofka isticmaalaya bogga uu jiirka dul mariyo badhanka, waxaad isticmaali kartaa :hover sidan:
css
button:hover {
background-color: green;
}
Pseudo-elements
Pseudo-elements waxay kuu oggolaanayaan inaad sameysid saameyn gaar ah oo ku saabsan qayb gaar ah oo ka mid ah curiyaha. Tani waxay ka dhigeysaa naqshadeynta mid aad u faahfaahsan. Qaarkood waxaa ka mid ah:
::before: Waxay kuu ogolaaneysaa inaad wax ku darto curiyaha ka hor inta uusan muuqanin waxyaabaha ku jiraa curiyaha laftiisa.::after: Waxay kuu ogolaaneysaa inaad wax ku darto curiyaha kadib marka waxyaabaha ku jiraa curiyaha lasoo bandhigay.::first-letter: Waxay ka saameynaysaa xarafka ugu horreeya ee curiyaha.::first-line: Waxay ka saameynaysaa xariiqda ugu horreeya ee curiyaha.
Haddii aad rabto inaad wax ku darto bogga ka hor qoraalka, tusaale ahaan, waxaad isticmaali kartaa ::before sidaan:
css
p::before {
content: "Bilowga: ";
font-weight: bold;
}
Pseudo-classes iyo pseudo-elements waa farsamooyin lagama maarmaan ah oo ku saabsan CSS. Waxay ku siiyaan awood dheeri ah oo aad ku sameyn karto naqshadeynta boggaaga iyadoon loo baahnayn inaad wax ka beddesho HTML-ka laftiisa. Tani waxay ka dhigeysaa naqshadeynta mid ka fudud oo dabacsan.