CSS !important qoidasi

!important qoidasi ma’lum xossa qiymatiga eng yuqori ustuvorlikni berish uchun ishlatiladi.

!important qoidasi shu elementda shu xossa uchun BARCHA oldingi uslublash qoidalarini almashtiradi!

!important kalit so‘zi CSS deklaratsiyasi oxiriga, nuqta-verguldan oldin qo‘shiladi.

Sintaksis

selector {
property: value !important;
}

CSS !important qoidasi misoli

Quyidagi misolda barcha uch paragraf sariq fon rangini oladi — inline uslub, id selektori va klass selektori yuqoriroq specificity'ga ega bo‘lsa ham. !important qoidasi shu elementda shu xossa uchun BARCHA uslublash qoidalarini almashtiradi!

Misol

!important qoidasidan foydalanish:

<html>
<head>
<style>
p {
background-color: yellow !important;
}

#myid {
background-color: blue;
}

.myclass {
background-color: gray;
}

</style>
</head>
<body>

<p style="background-color:orange;">This is a paragraph.</p>
<p class="myclass">This is a paragraph.</p>
<p id="myid">This is a paragraph.</p>

</body>
</html>

O‘zingiz sinab ko‘ring »

!important dan tejamkorlik bilan foydalaning

!important qoidasini almashtirishning yagona usuli — manba kodda bir xil (yoki yuqoriroq) specificity’li deklaratsiyaga yana bir !important qoidasini kiritishdir — va mana muammo shu yerda boshlanadi!

CSS kodi chalkash bo‘ladi va xatolarni tuzatish qiyinlashadi! Ayniqsa katta stillar jadvalingiz bo‘lsa!

Quyidagi misolda qaysi rang eng muhim hisoblanishi aniq emas:

Misol

p {
background-color: red !important;
}

#myid {
background-color: blue !important;
}

.myclass {
background-color: gray !important;
}

O‘zingiz sinab ko‘ring »

!important dan to‘g‘ri foydalanish holatlari

!important qoidasi ba’zi hollarda foydali bo‘lishi mumkin, masalan:

1. Hech qanday boshqa usul bilan almashtirib bo‘lmaydigan uslubni almashtirish uchun. Bu Kontentni Boshqarish Tizimida (CMS) ishlayotganingizda va CSS kodini tahrirlay olmasangiz bo‘lishi mumkin. Unda CMS uslublaridan ba’zilarini almashtirish maqsadida shaxsiy uslublarni belgilashingiz mumkin.

2. Foydalanuvchi sozlamalarini hurmat qilish uchun. Ba’zi foydalanuvchilar harakatga sezgir bo‘lib, kamroq animatsiyali saytlarni afzal ko‘radi. CSS’da prefers-reduced-motion deb ataladigan @media imkoniyati bor — u foydalanuvchi animatsiya yoki o‘tishlarni kamaytirishni so‘raganini tekshirish imkonini beradi. Kompyuterida bu sozlamani yoqgan foydalanuvchilar uchun animatsiya va o‘tishlarni o‘chirish yoki yumshatish uchun !important'dan foydalanishingiz mumkin:

Misol

@media (prefers-reduced-motion: reduce) {
* {
animation: none !important;
transition: none !important;
}
}

O‘zingiz sinab ko‘ring »

Keyingi bobda siz media so‘rovlar haqida ko‘proq bilib olasiz.

3. Ma’lum element uchun juda aniq, o‘zgarmas uslub yaratish uchun. Sahifadagi barcha havola tugmalari maxsus ko‘rinishga ega bo‘lishini xohlaymiz deb tasavvur qiling:

Misol

Havola tugmalarini kulrang fon rangi, oq matn va ba’zi padding hamda chegara bilan ushlab keling:

a.button {
background-color: #8c8c8c;
color: white;
padding: 5px;
border: 1px solid black;
text-decoration: none;
}

O‘zingiz sinab ko‘ring »

Endi havola tugmani yuqoriroq specificity’li boshqa element ichiga qo‘ysak, xossalar ziddiyatga kirishi mumkin. Mana bunday misol:

Misol

a.button {
background-color: #8c8c8c;
color: white;
padding: 5px;
border: 1px solid black;
text-decoration: none;
}

#myDiv a {
color: red;
background-color: yellow;
}

O‘zingiz sinab ko‘ring »

Barcha tugmalarni qanday bo‘lsa ham bir xil ko‘rinishda bo‘lishiga "majbur" qilish uchun tugma xossalariga !important qoidasini qo‘shishimiz mumkin, mana bunday:

Misol

a.button {
background-color: #8c8c8c !important;
color: white !important;
padding: 5px !important;
border: 1px solid black !important;
text-decoration: none !important;
}

#myDiv a {
color: red;
background-color: yellow;
}

O‘zingiz sinab ko‘ring »

W3Schools Pathfinder

Yutuqlaringizni kuzating – bu bepul!

Ro'yxatdan o'tish Kirish