TheLazy.Dev
Portfolio GitHub

Blog

css |newbie |tutorial |uzbcontent

Pseudo Classes va Pseudo Elements

junior_aliy

Aliy

Posted on December 25, 2023

Pseudo Classes va Pseudo Elements

Psuedo Class

CSS da Psuedo class lar Htmlda yozilgan elementga qandaydir jarayonda qo'shimcha style berishda ishlatiladi.
Pseudo class lar quyidagi formula asosida yoziladi:

element:pseudo-class {
  // style
}
Enter fullscreen mode Exit fullscreen mode

Html Code :

<!DOCTYPE html>
<html>
<head>
<title>HTML Code</title>
</head>
<body>
  <div> Html Element </div>
</body>
</html>
Enter fullscreen mode Exit fullscreen mode

CSS Code :

// Box Module
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
// Div Style
div {
  width: 250px;
  height: 250px;
  background: #000;
}
Enter fullscreen mode Exit fullscreen mode

Biz yuqorida Div elementining o'ziga oddatiy holati uchun style berdik. Endi Div elementiga pseudo class ning yozilishini ko'rib chiqamiz.

div:hover {
  background: green;
}
Enter fullscreen mode Exit fullscreen mode

Yuqoridagi kodda div element hisoblanadi, :hover bo'lsa pseudo class hisoblanadi.
pseudo class larda :hover varianti - sichqoncha hover bo'layotgan elementning ustiga borganda ishlaydi.
Pseudo element larning birqancha turlari mavjud va ular haqida quyodagi havoladan topishingiz mumkin.
pseudo classes

Pseudo Element

CSS da pseudo elementlar Htmlda yozilgan elementga qaram bo'lgan element qo'shib beradi.
Pseudo Element quyidagi formula asosida yasaladi:

element:: pseudo-element {
  // style
}
Enter fullscreen mode Exit fullscreen mode

Hozir biz yuqorida HTML fileda yozilgan div ga pseudo element qo'shamiz :

div {
  position: relative;
}
div::before {
  position: absolute;
  content: "";
  width: 100%;
  height: 100%;
  background: crimson;
}
Enter fullscreen mode Exit fullscreen mode

Yuqoridagi jarayonda div element, ::before pseudo element hisoblanadi.
Pseudo elementlar bir nechta bo'lib, ular haqida quyidagi linkdan yaxshiroq bilib olishingiz mumkin.
pseudo-elements

Pseudo element va Pseudo Class ning farqi

Pseudo Element qaysi elementga berilayotgan bo'lsa o'sha elementga qaram bo'lib qoladi va uni har qanday vaziyatda ham ko'rishimiz mumkin.
Pseudo Class qaysi elementga berilga bo'lsa o'sha elementning vaziyati pseudo class ga to'g'ri kelganda ishlab uning style ni o'zgartiradi.

💖 💪 🙅 🚩
junior_aliy
Aliy

Posted on December 25, 2023

Join Our Newsletter. No Spam, Only the good stuff.

Sign up to receive the latest update from our blog.

Related

Pseudo Classes va Pseudo Elements
css Pseudo Classes va Pseudo Elements

December 25, 2023