Псевдоклассҳо дар CSS чистанд?

Псевдокласҳо дар CSS калимаҳои калидӣ мебошанд, ки ба интихобкунандагон илова карда мешаванд, то ҳолати махсуси унсурро нишон диҳанд. Онҳо имкон медиҳанд, ки услубҳоро ба унсурҳо дар асоси ҳамкории онҳо бо корбар, ҷойгиршавии онҳо дар сохтори ҳуҷҷат ё дигар хусусиятҳо татбиқ кунанд, ки бо интихобкунандагони стандартӣ ифода кардан мумкин нест.

Масаланҳои псевдоклассҳо:

• Ҳолатҳои корбар:

  • :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;
}

Псевдоклассҳо имкониятҳоро дарselectors-ро васеъ мекунанд, ки имкон медиҳанд, ки интерфейсҳои бештар динамикӣ ва интерактивӣ созанд, бе истифодаи JavaScript барои тағироти оддӣ дар услуб.