Նկարագրեք CSS-ում псևդոկլասներն ու псևդոэлементները։

Պսևդոկլասներն ու պսևդոօբյեկտները ընդլայնում են CSS սելեկտորների հնարավորությունները՝ թույլ տալով կիրառել ոճեր էլեմենտների վրա՝ հիմնվելով դրանց վիճակի, դիրքի կամ այլ հատկանիշների վրա, որոնք չեն կարող արտահայտվել պարզ սելեկտորներով:

Պսևդոկլասներ

Պսևդոկլասները սկսվում են մեկ դվզնոց (:): Դրանք օգտագործվում են էլեմենտի ձևավորման համար որոշակի վիճակում:

Հիմնական պսևդոկլասներ՝

• :hover - ձևավորում էլեմենտի վրա մկնիկի անցնելիս:
• :active - ձևավորում էլեմենտի վրա կլիկի ժամանակ:
• :focus - ձևավորում էլեմենտի վրա, երբ այն կենտրոնացված է:
• :visited - ձևավորում այցելած հղին:
• :link - ձևավորում չայցելած հղին:
• :first-child - ձևավորում առաջին երեխային:
• :last-child - ձևավորում վերջին երեխային:
• :nth-child(n) - ձևավորում n-րդ երեխային:
• :nth-last-child(n) - ձևավորում n-րդ երեխային վերջից:
• :not(selector) - ձևավորում այն էլեմենտները, որոնք չեն համապատասխանում նշված սելեկտորին:

/* Օրինակ պսևդոկլասների օգտագործման */
a:hover {
  color: blue; // Լինկի գույնի փոփոխություն անցնելիս
}

input:focus {
  border-color: green; // Մուտքային դաշտի շրջանակի գույնի փոփոխություն ֆոկուսում
}

li:first-child {
  font-weight: bold; // Առաջին ցանկի տարրին ձևավորում
}

Պսևդոօբյեկտներ

Պսևդոօբյեկտները սկսվում են երկու դվզնոց (::). Նրանք օգտագործվում են որոշակի մասի ձևավորման կամ գեներացված բովանդակության ավելացման համար՝ նախ կամ հետո էլեմենտի բովանդակության:

Հիմնական պսևդոօբյեկտներ՝

• ::before - ավելացնում է գեներացված բովանդակություն նախ էլեմենտի բովանդակությանը:
• ::after - ավելացնում է գեներացված բովանդակություն հետո էլեմենտի բովանդակությանը:
• ::first-letter - ձևավորում առաջին տառը:
• ::first-line - ձևավորում առաջին տողը:
• ::selection - ձևավորում ընտրված հատվածը:

/* Օրինակ պսևդոօբյեկտների օգտագործման */
p::first-letter {
  font-size: 2em; // մեծացնել առաջին տառը
  font-weight: bold;
}

h2::after {
  content: " ---"; // ավելացնել տեքստ վերնագրի հետո
  color: gray;
}

mark::selection {
  background-color: yellow; // փոխել ընտրված տեքստի ֆոնը
  color: black;
}

Պսևդոկլասներն օգտագործում էին միայն մեկ դվզնոց (:) CSS2.1-ի հետ համատեղելիության համար, իսկ պսևդոօբյեկտները CSS3-ում սկսեցին օգտագործել երկու դվզնոց (::)՝ ավելի լավ տարբերակելու համար։ Առաջարկվում է օգտագործել երկու դվզնոց՝ պսևդոօբյեկտների համար՝ արդիական կոդում:

Համեմատական աղյուսակ՝

Գծագիր	Պսևդոկլասը	Պսևդոօբյեկտը
Սինտաքսիս	:selector	::selector
Մշակույթ	Էլեմենտի վիճակ	Էլեմենտի մաս կամ գեներացված բովանդակություն