Pseudo-class selectors

Pseudo-classes -г элементийн тодорхой төлөвийг тодорхойлоход ашигладаг.

Жишээлбэл дараах зорилгоор ашиглана.

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

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

Pseudo-classes сонгогчийн бичиглэл нь доорх хэлбэртэй байна.

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

Anchor Pseudo-classes

Pseudo-classes-г ашиглан холбоосын төлвийг өөр өөрөөр үзүүлж болно.

<style>
/* Зочлоогүй үед */
a:link {
  color: #000FFF;
}

/* Зочилсон үед */
a:visited {
  color: #F000FF;
}

/* Хулгана очих үед */
a:hover {
  color: #FF000F;
}

/* Сонгогдох үед */
a:active {
  color: #FFF000;
}
</style>

Pseudo-classes ба CSS Classes

Pseudo-classes-г CSS Classes-тай хослуулан ашиглаж болно.
Доорх жишээнд хоёр холбоосын нэгэнд нь хулгана очих буюу hover төлөвийг зааж өгөхийн тулд Pseudo-classes болон CSS classes-г хослуулан ашиглана.

<style>
a.cssClass:hover {
  color: #0000ff;
} 
</style>

Hover төлөвийг элементэд ашиглаж болно.

Pseudo-classes-г элементэд ашиглаж болно. Тэгвэл энэ жишээнд :hover төлөвийг элементүүдэд ашиглаж үзье.

<style>
div {
  background-color: #3f9ce8;
  color: white;
  padding: 25px;
  text-align: center;
}
div:hover {
  background-color: red;
}
</style>

Tooltip Hover өөр нэгэн жишээ.

<div> элемент дээр хулгана очиход <p> элементийг дэлгэцэд харуулж болно.

<style>
p {
  display: none;
  background-color: orange;
  padding: 20px;
  color: white;
}

div:hover p {
  display: block;
}
</style>

first-child шинж чанар.

Pseudo-class-н first-child шинж чанар нь заасан элементийн төлөвийг өөрчилнө.

Хүү элементүүдээс хамгийн эхэнд таарсан <p> элементийн төлөвийг өөрчилж үзье.

<style>
p:first-child {
  color: red;
} 
</style>

Бүх <p> элемент доторх эхний <em>-н утгыг тохируулах

Дараах жишээнд сонгогч нь бүх <p> элементийн эхний <em> элементийн төлөвийг өөрчлөхөөр тохируулагдсан болно.

<style>
p em:first-child {
  color: blue;
} 
</style>

Эхний <p> элемент доторх бүх <em>-н утгыг тохируулах

Дараах жишээнд сонгогч нь эхний <p> элементийн бүх <em> элементийн төлөвийн өөрчлөхөөр тохируулагдсан болно.

<style>
p:first-child em {
  color: red;
} 
</style>

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