CSS selektorlar kombinatsiyalari bo‘yicha amaliy mashqlar
Divlar div ichida joylashgan abzaslarni tanlovchi selektor yozing.
Selektoringizni quyidagi kodda sinab ko‘ring:
html<div>
<p>
+++
</p>
<p>
+++
</p>
</div>
<div>
<p>
+++
</p>
</div>
<p>
---
</p>
<p>
---
</p>
Divlar div ichida joylashgan barcha h2 elementlarini tanlovchi selektor yozing.
Selektoringizni quyidagi kodda sinab ko‘ring:
html<div>
<h2>+++</h2>
<p>
---
</p>
<p>
---
</p>
</div>
<div>
<h2>+++</h2>
<p>
---
</p>
</div>
<h2>---</h2>
<p>
---
</p>
id atributi block ga teng bo‘lgan element ichidagi barcha p abzalarini tanlovchi selektor yozing.
Selektoringizni quyidagi kodda sinab ko‘ring:
html<div id="block">
<h2>---</h2>
<p>
+++
</p>
<p>
+++
</p>
</div>
<div>
<h2>---</h2>
<p>
---
</p>
</div>
<h2>---</h2>
<p>
---
</p>
id atributi block ga teng bo‘lgan element ichidagi barcha h2 elementlarini tanlovchi selektor yozing.
Selektoringizni quyidagi kodda sinab ko‘ring:
html<div id="block">
<h2>+++</h2>
<p>
---
</p>
<p>
---
</p>
<h2>+++</h2>
<p>
---
</p>
</div>
<div>
<h2>---</h2>
<p>
---
</p>
</div>
<h2>---</h2>
<p>
---
</p>
bbb klassiga ega bo‘lgan barcha elementlarni tanlovchi selektor yozing.
Selektoringizni quyidagi kodda sinab ko‘ring:
html<div id="block">
<h2 class="bbb">+++</h2>
<p class="bbb">
+++
</p>
<p>
---
</p>
<h2 class="bbb">+++</h2>
<p>
---
</p>
</div>
<div class="bbb">
+++
</div>
<h2>---</h2>
<p class="bbb">
+++
</p>
id atributi block ga teng bo‘lgan element ichidagi, bbb klassiga ega bo‘lgan barcha elementlarni tanlovchi selektor yozing.
Selektoringizni quyidagi kodda sinab ko‘ring:
html<div id="block">
<h2 class="bbb">+++</h2>
<p class="bbb">
+++
</p>
<p>
---
</p>
<h2 class="bbb">+++</h2>
<p>
---
</p>
</div>
<div class="bbb">
---
</div>
<h2>---</h2>
<p class="bbb">
---
</p>
bbb klassiga ega bo‘lgan barcha p abzalarini tanlovchi selektor yozing.
Selektoringizni quyidagi kodda sinab ko‘ring:
html<div id="block">
<h2 class="bbb">---</h2>
<p class="bbb">
+++
</p>
<p>
---
</p>
<h2 class="bbb">---</h2>
<p class="bbb">
+++
</p>
</div>
<div class="bbb">
---
</div>
<h2>---</h2>
<p class="bbb">
+++
</p>
bbb klassiga ega bo‘lgan barcha h2 elementlarini tanlovchi selektor yozing.
Selektoringizni quyidagi kodda sinab ko‘ring:
html<div id="block">
<h2 class="bbb">+++</h2>
<p class="bbb">
---
</p>
<p>
---
</p>
<h2 class="bbb">+++</h2>
<p class="bbb">
---
</p>
</div>
<h2>---</h2>
<p class="bbb">
---
</p>
<h2 class="bbb">+++</h2>
<p class="bbb">
---
</p>
id atributi block ga teng bo‘lgan element ichidagi, bbb klassiga ega bo‘lgan barcha p abzalarini tanlovchi selektor yozing.
Selektoringizni quyidagi kodda sinab ko‘ring:
html<div id="block">
<h2 class="bbb">---</h2>
<p class="bbb">
+++
</p>
<p>
---
</p>
<h2 class="bbb">---</h2>
<p class="bbb">
+++
</p>
</div>
<div class="bbb">
---
</div>
<h2>---</h2>
<p class="bbb">
---
</p>
bbb klassiga ega bo‘lgan barcha elementlarni VA xxx klassiga ega bo‘lgan barcha elementlarni bir vaqtda tanlovchi selektor yozing (ya’ni selektorlarni vergul orqali guruhlash kerak).
Selektoringizni quyidagi kodda sinab ko‘ring:
html<h2 class="bbb">+++</h2>
<p class="bbb">
+++
</p>
<h2 class="xxx">+++</h2>
<p>
---
</p>
<h2>---</h2>
<p class="xxx">
+++
</p>
<div class="bbb">
+++
</div>
bbb klassiga ega bo‘lgan barcha p abzalarini VA xxx klassiga ega bo‘lgan barcha h2 elementlarini bir vaqtda tanlovchi selektor yozing.
Selektoringizni quyidagi kodda sinab ko‘ring:
html<h2 class="bbb">---</h2>
<p class="bbb">
+++
</p>
<h2 class="xxx">+++</h2>
<p>
---
</p>
<h2>---</h2>
<p class="xxx">
---
</p>
<div class="bbb">
---
</div>
id atributi block ga teng bo‘lgan element ichidagi, bbb klassiga ega bo‘lgan barcha p abzalarini VA id atributi block ga teng bo‘lgan element ichidagi, xxx klassiga ega bo‘lgan barcha p abzalarini bir vaqtda tanlovchi selektor yozing.
Selektoringizni quyidagi kodda sinab ko‘ring:
html<div id="block">
<h2 class="bbb">---</h2>
<p class="bbb">
+++
</p>
<h2 class="xxx">---</h2>
<p>
---
</p>
<h2>---</h2>
<p class="xxx">
+++
</p>
<div class="bbb">
---
</div>
<div class="xxx">
---
</div>
</div>
<h2 class="bbb">---</h2>
<p class="xxx">
---
</p>
fff klassiga ega bo‘lgan barcha elementlarni tanlovchi selektor yozing.
Selektoringizni quyidagi kodda sinab ko‘ring:
html<div class="fff">
+++
</div>
<h2 class="fff">+++</h2>
<p class="fff">
+++
</p>
<h2 class="bbb">---</h2>
<p class="xxx">
---
</p>
fff klassiga ega bo‘lgan element ichidagi barcha p abzalarini tanlovchi selektor yozing.
Selektoringizni quyidagi kodda sinab ko‘ring:
html<div class="fff">
<h2>---</h2>
<p>
+++
</p>
<p>
+++
</p>
</div>
<h2 class="fff">---</h2>
<p class="fff">
---
</p>
fff klassiga ega bo‘lgan barcha p abzalarini tanlovchi selektor yozing.
Selektoringizni quyidagi kodda sinab ko‘ring:
html<div id="block">
<h2>---</h2>
<p>
---
</p>
<p>
---
</p>
<p class="fff">
+++
</p>
</div>
<h2 class="fff">---</h2>
<p class="fff">
+++
</p>
fff klassiga ega bo‘lgan element ichidagi, bbb klassiga ega bo‘lgan barcha elementlarni tanlovchi selektor yozing.
Selektoringizni quyidagi kodda sinab ko‘ring:
html<div class="fff">
<h2 class="bbb">+++</h2>
<p>
---
</p>
<p>
---
</p>
<p class="bbb">
+++
</p>
</div>
<h2 class="fff">---</h2>
<p class="bbb">
---
</p>
fff klassiga ega bo‘lgan element ichidagi, bbb klassiga ega bo‘lgan barcha h2 elementlarini tanlovchi selektor yozing.
Selektoringizni quyidagi kodda sinab ko‘ring:
html<div class="fff">
<h2 class="bbb">+++</h2>
<p>
---
</p>
<h2 class="bbb">+++</h2>
<p>
---
</p>
<p class="bbb">
---
</p>
</div>
<h2 class="bbb">---</h2>
<p class="bbb">
---
</p>
<p class="fff">
---
</p>