CSS Pseudo-элемент сонгогч

CSS-д Pseudo-элементийг ашиглан тухайн элементийн тодорхой хэсгийг загварчлахад ашигладаг.
Жишээ нь та доорх зорилгоор ашиглаж болно.

• Элементийн эхний үсэг эсвэл мөрийг хэлбэржүүлэх
• Элементийн эхэнд эсвэл ард нь агуулг нэмж оруулах зэрэгт ашиглаж болно.

Syntax буюу Бичиглэл

pseudo-elements-н бичиглэл нь дараах хэлбэртэй байна.

<style>
selector::pseudo-element {
  property:value;
}
</style>

Pseudo-элемент ::first-line

Pseudo-элементийн ::first-line шинж чанарыг текстийн эхний мөрөнд тусгай хэв маяг нэмэхэд ашигладаг. Доорх жишээнд бүх <p>-н эхний мөрийг тохируулж өгч байна.

<style>
p::first-line {
  color: #0000ff;
  font-variant: small-caps;
}
</style>

Pseudo-элемент ::first-letter

Pseudo-элементийн ::first-letter-г текстийн эхний үсэгт тусгай хэв маяг нэмхэд ашигладаг. Доорх жишээнд бүх <p>-н эхний үсгийг тохируулж өгч байна.

<style>
p::first-letter {
  color: #00ff00;
  font-size: xx-large;
}
</style>

Pseudo-элемент ба CSS Classes

Pseudo-элементийг CSS-н класстай хослуулан ашиглаж болно.

<style>
p.test::first-letter {
  color: #ff0000;
  font-size:250%;
}
</style>

Олон Pseudo-элемент /Multiple/

Хэд хэдэн Pseudo-элементийг нэгтгэн ашиглаж болно.

<style>
p::first-letter {
  color: #ff0000;
  font-size: xx-large;
}
p::first-line {
  color: #0000ff;
  font-variant: small-caps;
}
</style>

Pseudo-элемент ::before

::before Pseudo-элемент нь контентийн өмнө контент нэмж чадна.

<style>
h2::before {
  content: url(/static/img/html/leaf.jpg);
}
</style>

Pseudo-элемент ::after

::after Pseudo-элемент нь контентийн ард контент нэмж чадна.

<style>
h2::after {
  content: url(/static/img/html/leaf.jpg);
}
</style>

Pseudo-элемент ::selection

::selection Pseudo-элемент нь сонгосон элементийг тохируулж өгнө.
::selection-д дараах шинж чанаруудыг ашиглаж болно: color, background, cursor болон outline.

<style>
::-moz-selection { /* Firefox дээр ажиллах код*/
  color: green;
  background: yellow;
}
::selection {
  color: white;
  background: brown;
}
</style>

Сэтгэгдэлүүд