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
}
Html Code :
<!DOCTYPE html>
<html>
<head>
<title>HTML Code</title>
</head>
<body>
<div> Html Element </div>
</body>
</html>
CSS Code :
// Box Module
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
// Div Style
div {
width: 250px;
height: 250px;
background: #000;
}
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;
}
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
}
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;
}
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.
Top comments (0)