HTML Code

## 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 : ``` HTML Code

Html Element

``` 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](https://www.w3schools.com/css/css_pseudo_classes.asp) ## 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](https://www.w3schools.com/css/css_pseudo_elements.asp) ## 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.

uzbcontent

Pseudo Classes va Pseudo Elements

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