Sobes.tech
Junior

Ի՞նչ է պսևդո էլեմենտը։

sobes.tech AI

Պատասխան AI-ից

CSS-ում псեվդո-մեկնաբանությունը՝ դա հիմնական բառ է, որը ավելացվում է սելեկտորին և թույլ է տալիս ձևափոխել որոշակի մաս՝ առանց լրացուցիչ DOM տարրեր բացահայտելու:

Ամենատարածված псեվդո-մեկնաբանությունները՝

  • ::before: Ստեղծված պարունակությունը ավելացնում է ընտրված տարրի առաջ:
  • ::after: Ստեղծված պարունակությունը ավելացնում է ընտրված տարրի հետո:
  • ::first-line: Կիրառվում է բլոկային տարրի առաջին տողին:
  • ::first-letter: Կիրառվում է բլոկային տարրի առաջին տառին:
  • ::selection: Կիրառվում է այն մասի վրա, որը ընտրել է օգտվողը (օրինակ՝ մկնիկով տեքստը նշելու ժամանակ):
  • ::placeholder: Կիրառվում է <input> կամ <textarea> դաշտերի placeholder տեքստին:

Օրինակ՝ ::before և ::after օգտագործելու համար՝

div::before {
  content: "Նախածին: "; // պարտադիր content հատկությունը
  color: blue;
}

div::after {
  content: " Վերջ": // պարտադիր content հատկությունը
  color: red;
}

Օրինակ՝ ::first-line և ::first-letter օգտագործելու համար՝

p::first-line {
  font-weight: bold;
}

p::first-letter {
  font-size: 2em;
  float: left;
  margin-right: 0.1em;
}

Pseudo-մեկնաբանությունները օգտակար են դեկորատիվ տարրեր ավելացնելու, պարունակություն ստեղծելու, տեքստի մասերին ձևափոխություն կատարելու և այլ խնդիրներ լուծելու համար, ինչը հեշտացնում է HTML կառուցվածքը։ Տարածված է, որ դրանք սկսվում են մեկ կետով (:), սակայն CSS3-ի ստանդարտը ներկայացրել է երկու կետ (::) տարբերելու համար pseudo-կլասները (:hover, :focus) և pseudo-մեկնաբանությունները, թեև մեկ կետով (:) դեռ աջակցում են շատ բրաուզերներ հին pseudo-մեկնաբանությունների համար։ Առաջարկվում է օգտագործել ::։