Ի՞նչ են CSS-ում псевդոկլասները։

CSS-ում псևդոկլասները հուշում են հատուկ վիճակները նշելու համար, որոնք ավելացվում են սելեկտորներին: Դրանք թույլ են տալիս կիրառել ոճեր էլեմենտների վրա՝ հիմնվելով նրանց հետ օգտագործողի փոխազդեցության, փաստաթղթի կառուցվածքում նրանց դիրքի կամ այլ հատկանիշների վրա, որոնք չեն կարող արտահայտվել ստանդարտ սելեկտորներով:

Pseudo-կլասների օրինակներ՝

• Օգտագործողի վիճակներ:

  • :hover - այն էլեմենտը, որի վրա է գտնվում մկնիկի նշանը:
  • :active - այն էլեմենտը, որը ակտիվ է (օրինակ՝ սեղմված կոճակ):
  • :focus - այն էլեմենտը, որը գտնվում է մուտքի կենտրոնում (օրինակ՝ տեքստային դաշտ):
  • :visited - այն հղումը, որը օգտվողը արդեն այցելել է:
  • :link - այն հղումը, որը օգտվողը դեռ չի այցելել:

• Կառուցվածքի դիրքավորումներ:

  • :first-child - առաջին զավակը:
  • :last-child - վերջին զավակը:
  • :nth-child(n) - n-րդ զավակը:
  • :first-of-type - առաջին տարրը իր տեսակի մեջ:
  • :last-of-type - վերջին տարրը իր տեսակի մեջ:

• Այլ:

  • :empty - այն էլեմենտը, որը չունի զավակներ կամ տեքստ:
  • :not(selector) - այն էլեմենտները, որոնք չեն համապատասխանում նշված սելեկտորին:

Սինտաքսիս:

selector:pseudo-class {
  property: value;
}

Օգտագործման օրինակ՝

/* Փոխել տեքստի գույնը, երբ մկնիկը անցնում է պարբերականի վրա */
p:hover {
  color: blue;
}

/* Սթայլ առաջին ցուցակի տարրի համար */
li:first-child {
  font-weight: bold;
}

Pseudo-կլասները ընդլայնում են սելեկտորների հնարավորությունները՝ թույլ տալով ավելի դինամիկ և ինտերակտիվ ինտերֆեյսներ ստեղծել առանց JavaScript-ի՝ պարզ ոճային փոփոխությունների համար։